【Nuxt 2】ESLintの導入

ESLint とは

ESLint は、JavaScript の静的解析ツールです。 例えば「文字列はシングルクォートとする」、「末尾のセミコロンは省略する」などのルールによりコードを解析します。 これにより、コードの統一性やバグ検知などに役立ちます。

ESLint のルールについては、以下を参照してください。 数が多すぎるため、すべての覚える必要はないです。

List of available rules - ESLint - Pluggable JavaScript linter

後述しますが、プラグインを入れることで Vue.js 用のルールを追加することもできます。

ESLint の導入

インストール

NuxtJS に ESLint を導入するために、以下のパッケージをインストールします。

• eslint(7.32.0)：ESLint 本体
• @babel/eslint-parser(7.16.5)：Babel を使用しているため必要
• @nuxtjs/eslint-config(8.0.0)：NuxtJS 用に ESLint を設定するためのもの

$ npm install -D eslint @babel/eslint-parser @nuxtjs/eslint-config

バージョンは上記にこだわる必要はありませんが、バージョンによりルールが追加されいるなど違いがある点に注意してください。

@nuxtjs/eslint-configは、依存パッケージとしてeslint-plugin-vueが設定されています。 これは Vue.js 用にルールを追加するためのものです。 Vue.js に関するルールについては、以下を参照してください。

Available rules | eslint-plugin-vue

設定ファイル

次に ESLint の設定ファイルとして、プロジェクトのルートフォルダに.eslintrc.jsを作成します。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs'
  ],
  rules: {}
}

各設定については、以下に簡単にまとめておきます。

実行

ESLint を実行するために、package.jsonのscriptsに以下を追加します。

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

簡単に解説をすると、eslint .とすることでカレントフォルダ配下にあるファイルの解析を行います。 --extオプションにより、JS と Vue ファイルのみに解析対象を限定します。 --ignore-pathオプションにより、.gitignoreで指定しているフォルダ、ファイルを解析対象外にします。

--ignore-pathオプションについては、.eslintignoreを作成すれば不要となるのですが、内容が.gitignoreと重複するためこのようにしています。 Git 管理を行っていない場合は.eslintignoreを作成するようにしてください。

では、以下のコマンドで ESLint を実行します。

$ npm run lint:js

ルールに違反するコードがある場合は、以下のような結果が出力されます。

[project path]\components\Tutorial.vue
  1:1  error  Component name "Tutorial" should always be multi-word  vue/multi-word-component-names

[project path]\pages\index.vue
  1:1  error  Component name "index" should always be multi-word  vue/multi-word-component-names

✖ 2 problems (2 errors, 0 warnings)

ファイル毎に行:列 [ error/warning ] メッセージ ルールの形で違反を通知してくれます。

上記の結果は、NuxtJS でプロジェクトを作成した直後に ESLint を実行した結果です。 components/Tutorial.vueとpages/index.vueがvue/multi-word-component-namesのルールに違反しているということになります。

ルールの設定

ルール設定の基本

先程のvue/multi-word-component-namesというルールは、Vue コンポーネントの名前には複数のワードを用いましょうというものです。 NuxtLogoは、NuxtとLogoの複数ワードを用いているため OK ですが、Tutorialやindexなど単体名のコンポーネントはエラーとなります。

参照：https://eslint.vuejs.org/rules/multi-word-component-names.html

NuxtJS でこのルールが適用されたままだと不便のため、このルールを無視するよう設定を行います。

ルールの設定は、.eslintrc.jsのrulesに記述していきます。 ルール毎に違反を検知したときのアクションとして、error（エラー）、warn（警告）、off（無視）のいずれかを設定します。

vue/multi-word-component-namesを無視するように設定する場合は、以下のようにします。

rules: {
  'vue/multi-word-component-names': 'off'
}

これで ESLint を実行したときに、エラーが表示されていなければ OK です。

ルールのオプション

ルールによってはオプションを持つものがあります。 vue/multi-word-component-namesもignoresというオプションを持ちます。 これは検査対象外とするコンポーネント名を設定するものです。

例えば、Indexを対象外とする場合は以下のようにします。

rules: {
  'vue/multi-word-component-names': ['error', {
    ignores: ['Index']
  }]
}

[project path]\components\Tutorial.vue
  1:1  error  Component name "Tutorial" should always be multi-word  vue/multi-word-component-names

✖ 1 problems (1 errors, 0 warnings)

オプションの設定については、ルール毎のドキュメントを参考するようにしてください。

コードの自動修正

一部のルールについては、--fixオプションを指定することでコードを自動で修正してくれます。 まずは--fixオプションありのコマンドをpackage.jsonに追記します。

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

これにより$npm run lintfix:jsで自動修正が動作します。

自動修正の対象は、各ドキュメントで 🔧 がついているものです。 例としてvue/no-shared-component-dataで試してみます。

参照: https://eslint.vuejs.org/rules/no-shared-component-data.html

このルールは、dataプロパティはメソッドとして定義しなさい、というルールです。 よって以下のようなコードはエラーとなります。

export default {
  data: {
    value: ''
  }
}

[project path]\components\Component.vue
  9:3  error  `data` property in component must be a function  vue/no-shared-component-data

✖ 1 problem (1 error, 0 warnings)

これを--fixオプションありで実行すると、以下のように修正されます。 修正された場合は、エラーの表示はされません。

export default {
  data() {
    return {
      value: ''
    }
  }
}

ビルド時に実行

ESLint を実行するには、$ npm run lint:jsのようにコマンドを実行する必要がありました。 しかし、コードを変更する度にコマンドを実行するのは面倒です。

そこで@nuxtjs/eslint-moduleというものがあります。 これは、ホットリロードなどのビルド時に自動で ESLint を実行してくれます。

参照：https://github.com/nuxt-community/eslint-module

まずは@nuxtjs/eslint-moduleをインストールします。

$ npm install -D @nuxtjs/eslint-module

次にnuxt.config.jsのbuildModuleに以下を追記します。

export default {
  buildModules: [
    '@nuxtjs/eslint-module'
  ],
}

設定はこれだけです。 もし、--fixオプションを実行したい場合は、以下のようにオプション設定を行います。

export default {
  buildModules: [
    ['@nuxtjs/eslint-module', {
      fix: true
    }]
  ],
}

その他オプションの設定については、上記の GitHub の README を参照してください。

Visual Studio Code の設定

エディターとして Visual Studio Code（VSCode）を使用している場合、以下 ESLint の拡張機能をインストールすることで、 エディター上に ESLint のエラー、警告が表示されるようになります。

ESLint - Visual Studio Marketplace

保存時に--fixを実行したい場合は、以下のように.vscode/settings.jsonを作成します。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

上記のように、プロジェクト毎に VSCode の設定を行いたい場合は、.vscode/settings.jsonを作成します。 エディター共通の設定でよい場合は、ベースとなるsettings.jsonに上記を追記してください。