ESLint の設定 (Nuxt TypeScript)

Nuxt で開発する時の ESLint の設定ファイルです。Nuxt のバージョンは 2.10 です。

前提
設定ファイル
ESLint の設定ファイルを読む
いつ ESLint を走らせるのか

前提

構文チェックに ESLint, コードフォーマットには Prettier を利用します。eslint-plugin-prettier を利用して ESLint 経由で Prettier を動かします。

設定ファイル

npm i -D @nuxtjs/eslint-config-typescript eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier prettier

// .eslintrc.js
module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    '@nuxtjs/typescript',
    'plugin:nuxt/recommended',
    'plugin:vue/strongly-recommended',
    'plugin:prettier/recommended',
    'prettier/vue'
  ],
  rules: {
    // Add rules
  }
}

ESLint の設定ファイルを読む

ざっくりです。

基本知識

rules に設定されたルールがチェックされます。

module.exports = {
  rules: {
    semi: ['error']
  }
}

ESLint のルール以外の構文チェックを設定したい場合 plugins を追加します。プラグインの名前から eslint-plugin- を省略することができます。eslint-plugin-vue なら vue で設定可能です。

module.exports = {
  plugins; ['vue'],
  rules: {
    'vue/html-self-closing': ['error']
  }
}

参考:
https://eslint.org/docs/user-guide/configuring#configuring-rules
https://eslint.org/docs/user-guide/configuring#configuring-plugins

実際に適用されるルールを確認

ESLint には --print-config path::String というコマンドが用意されています。これを利用することで、最終的にどのような設定が適用されるのか確認ができます。

node_modules/.bin/eslint --print-config pages/index.vue

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest/globals": true
  },
  "globals": {
    "document": false,
    "navigator": false,
    "window": false
  },
  "parser": "<PATH_TO_PROJECT>/node_modules/vue-eslint-parser/index.js",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "parser": "@typescript-eslint/parser"
  },
  "plugins": [
    "standard",
    "promise",
    "node",
    "import",
    "unicorn",
    "jest",
    "@typescript-eslint",
    "nuxt",
    "vue",
    "prettier"
  ],
  "rules": {
    "vue/html-self-closing": [
      0
    ],
    "vue/array-bracket-spacing": [
      "off"
    ],
    // ... (数が多いので省略)
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".mjs"
        ]
      }
    }
  }
}

.eslintrc.js にはなかった plugins や rules の設定が追加されているのが確認できると思います。

設定ファイルを拡張する `extends`

extends を利用すると既存の設定ファイルを再利用することができます。npm から設定ファイルをインストールして利用することも可能です。

参考:
https://eslint.org/docs/2.0.0/user-guide/configuring#extending-configuration-files

命名規則

plugins と同様に extends も名前を省略して設定することができます。eslint-config- が省略可能です。
プラグイン内の設定ファイルを利用する場合は plugin: を先頭につけます。名前の先頭の eslint-plugin- はここでも省略可能です

最初の設定ファイルを省略なしで記述すると以下のようになります。

extends: [
  'eslint:recommended',
  '@nuxtjs/eslint-config-typescript',
  'plugin:eslint-plugin-nuxt/recommended',
  'plugin:eslint-plugin-vue/strongly-recommended',
  'plugin:eslint-plugin-prettier/recommended',
  'eslint-config-prettier/vue'
],

命名規則がわかると利用されているパッケージ名がわかるので確認しやすくなると思います。 (この記事で言いたいことはこれくらいかもしれない)

`@nuxtjs/eslint-config-typescript`

試しに1つ、今回利用している設定ファイルを確認してみます。

eslint-config/packages/eslint-config-typescript at master · nuxt/eslint-config · GitHub

module.exports = {
  extends: [
    '@nuxtjs'
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }]
  }
}

内部で @nuxtjs/eslint-config, @typescript-eslint/eslint-plugin, @typescript-eslint/parser を利用しているのがわかります。

いつ ESLint を走らせるのか

(ここの説明は雑です)

手動で

eslint --ext .ts,.vue, .

eslint --ext .ts,.vue --fix .

コミット時

husky の pre-commit hook に lint-staged を設定することで、変更したファイルのみを ESLint の対象にする。

ファイル保存時

VSCode を利用している場合

{ 
  "eslint.validate": ["javascript", "typescript", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

保存時に ESLint を実行させます。必要に応じて "editor.formatOnSave": false, のように既存処理が邪魔をしない設定も追加してください。

前提