NuxtでEslintとPrettierの設定をする

Nuxtの公式を参考にしています。

Contents

パッケージをインストール
設定ファイルをいじる
コマンドラインでlintを実行できるようにする
ファイル保存時に構文チェックをする
ハマログ
使っていない変数があると怒られる
参考

パッケージをインストール

まずは必要なパッケージをインストールします。

babel-eslint
eslint
eslint-config-prettier
eslint-loader
eslint-plugin-vue
eslint-plugin-prettier
prettier

yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

設定ファイルをいじる

ルートディレクトリ直下に.eslintrc.jsを作成して、下記の内容に変更する。（公式に少し手を加えています）

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: "babel-eslint",
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:prettier/recommended",
  ],
  plugins: ["vue"],
  rules: {
    semi: [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "no-unused-vars": "off", //使っていない変数を許可
    "vue/html-self-closing": "off", //空タグを許可する
    "prettier/prettier": ["error", { semi: false }],
  },
}

コマンドラインでlintを実行できるようにする

package.jsonにコマンドの設定をする。

  "scripts": {
    ...,
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
   },

上記のようにscriptに追加することでコマンドとして登録できます。
構文チェックならyarn lint、構文エラーの修正ならyarn lintfixで実行可能となります。

この状態で構文チェックができるようになっています。

ファイル保存時に構文チェックをする

現状では構文チェックをするためにはコマンドを叩く必要があります。これをファイル保存時に自動で構文チェックが走るように設定していきます。

公式の通りnuxt.config.jsをいじります。

...
  /*
   ** Build configuration
  */
  build: {
   extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        })
      }
    }
  }

nuxt.config.jsを編集したら設定を反映させるために必ずサーバを再起動します。

これでファイル保存時でも自動で構文チェックができるようになりました。

ハマログ

<img />で閉じると怒られる

HTML部分に<img />を使用していて、下記のような構文エラーがでました。

warning  Disallow self-closing on HTML void elements (<img/>)  vue/html-self-closing

ESlint側では閉じタグないのが許せないみたいです。

ルールに"vue/html-self-closing": "off",を追加して回避しています。

使っていない変数があると怒られる

axiosの設定などで引数に使用していない変数を設定したりするのですが、そこで怒られてしまっていました。

構文チェック時に下記のようなエラーが出ます。

error  'app' is defined but never used    no-unused-vars

こちらもルールに"no-unused-vars": "off",を追加して回避しました。