@nuxtjs/eslint-config-typescriptが有効にするESLintのルール
/ 6 min read
Table of Contents
TypeScriptファイルに対するESLintのルールを提供するパッケージとして@typescript-eslint/eslint-pluginがあります。このパッケージのNuxtモジュールが@nuxtjs/eslint-config-typescriptです。
@nuxtjs/eslint-config-typescriptを導入するとtsファイルに加えてvueファイルをリントできます。この際に適用されるESLintのルールがどのパッケージで記述されているのか分からなかったので調べました。
参考: https://github.com/nuxt/eslint-config/tree/master/packages/eslint-config-typescript
検証環境
検証リポジトリ: https://github.com/cuavv/sandbox-eslint-config-typescript
{ "name": "eslint-config-typescript-test", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt-ts", "build": "nuxt-ts build", "start": "nuxt-ts start", "generate": "nuxt-ts generate" }, "dependencies": { "@nuxt/typescript-runtime": "^1.0.0", "nuxt": "^2.14.0" }, "devDependencies": { "@nuxt/types": "^2.14.0", "@nuxt/typescript-build": "^2.0.2", "@nuxtjs/eslint-config-typescript": "^3.0.0", "eslint": "^7.6.0", "eslint-loader": "^4.0.2" }}module.exports = { root: true, env: { browser: true, node: true, }, extends: ['@nuxtjs/eslint-config-typescript'], rules: { quotes: [ 'error', 'double', { avoidEscape: true, allowTemplateLiterals: false }, ], },}まずrulesに記述したルールが適用されます。次にextendsのShareable config（ESLintの設定をまとめたnpmパッケージのこと）を読み込んでそこに記述されているルールが適用されます。
@nuxtjs/eslint-config-typescript
v3.0.0の依存関係は以下です。
"dependencies": { "@nuxtjs/eslint-config": "3.1.0", "@typescript-eslint/eslint-plugin": "^3.7.0", "@typescript-eslint/parser": "^3.7.0" },Shareable configは以下です。
module.exports = { extends: ['@nuxtjs'], plugins: ['@typescript-eslint'], parserOptions: { parser: '@typescript-eslint/parser', }, rules: { '@typescript-eslint/no-unused-vars': [ 'error', { args: 'all', argsIgnorePattern: '^_' }, ], },}補足として extends: ['@nuxtjs'] は@nuxtjs/eslint-configのルールを適用するという意味です。パッケージ名の “/eslint-config” という部分は省略して記述できます。
plugins: ['@typescript-eslint'] は@typescript-eslint/eslint-pluginのルールを読み込む（利用できるようにする）という意味です。パッケージ名の “/eslint-plugin” という部分は省略して記述できます。
参考: https://github.com/eslint/eslint/blob/v6.8.0/docs/user-guide/configuring.md#configuring-plugins
続いてextendsに設定されている@nuxtjs/eslint-configを確認します。
@nuxtjs/eslint-config
v3.1.0の依存関係は以下です。
"dependencies": { "eslint-config-standard": "^14.1.1", "eslint-plugin-import": "2.22.0", "eslint-plugin-jest": "^23.18.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-unicorn": "^21.0.0", "eslint-plugin-vue": "^6.2.2" },Shareable configは以下です。
module.exports = { env: { 'browser': true, 'node': true, 'jest/globals': true, }, extends: [ 'standard', 'plugin:import/errors', 'plugin:import/warnings', 'plugin:vue/recommended', ], plugins: ['jest', 'unicorn', 'vue'], settings: { 'import/resolver': { node: { extensions: ['.js', '.mjs'] }, }, }, rules: { /**********************/ /* General Code Rules */ /**********************/
// Enforce import order 'import/order': 'error',
// Imports should come first 'import/first': 'error',
// Other import rules 'import/no-mutable-exports': 'error',
// Allow unresolved imports 'import/no-unresolved': 'off',
// Allow paren-less arrow functions only when there's no braces 'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }],
// Allow async-await 'generator-star-spacing': 'off',
// Allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
// Prefer const over let 'prefer-const': [ 'error', { destructuring: 'any', ignoreReadBeforeAssign: false, }, ],
// No single if in an "else" block 'no-lonely-if': 'error',
// Force curly braces for control flow, // including if blocks with a single statement 'curly': ['error', 'all'],
// No async function without await 'require-await': 'error',
// Force dot notation when possible 'dot-notation': 'error',
'no-var': 'error',
// Force object shorthand where possible 'object-shorthand': 'error',
// No useless destructuring/importing/exporting renames 'no-useless-rename': 'error',
// 省略
/**********************/ /* Vue Rules */ /**********************/
// Disable template errors regarding invalid end tags 'vue/no-parsing-error': [ 'error', { 'x-invalid-end-tag': false, }, ],
// Maximum 5 attributes per line instead of one 'vue/max-attributes-per-line': [ 'error', { singleline: 5, }, ], },}extendsに standard というパッケージが指定されています。これは依存関係にあるようにeslint-config-standardのことです。また plugin:vue/recommended はeslint-plugin-vueで設定されているrecommendedという名称のrulesを指します。vueファイルのリントで適用されるルールはここに記述されていたのですね。
参考: https://github.com/vuejs/eslint-plugin-vue/blob/v6.2.2/lib/configs/recommended.js
plugin:import/errors や plugin:import/warnings などがどのパッケージを指すかは plugin:vue/recommended と同じ感じなので省略します。
疑問点
重複しているルールの優先度はどう処理されているか
例えばquotesは.eslintrc.jsとeslint-config-standardの両方で設定されているがどちらの設定が適用されるのか。
=> ドキュメントによるとextendsのルールを継承して、rulesで上書きする仕様になっているようです。上書きの仕様は2パターンあります。
ルールの重大度を変更する
例えばeslint-config-standardのquotesは以下の設定です。
"quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": false }]このとき.eslintrc.jsで以下のよう記述すると
"quotes": "warn"実際に適用されるルールは以下になります。
// オプションは継承される"quotes": ["warn", "single", { "avoidEscape": true, "allowTemplateLiterals": false }]ルールを上書きする
.eslintrc.jsで以下のよう記述すると
"quotes": ["error", "double"]実際に適用されるルールは以下になります。
// オプションは削除される"quotes": ["error", "double"]まとめ
プロジェクトの.eslintrc.jsには@nuxtjs/eslint-config-typescriptのみ記述したのでtsファイルのみリントするような印象を受けましたが、extendsを紐解いていくとvueファイルも対象としてリントするよう設定されていることがわかりました。適用されるルールをまとめると以下のようになります。
- .eslintrc.jsのextends+rules
- @nuxtjs/eslint-config-typescriptのextends+rules
- @nuxtjs/eslint-configのextends+rules
- eslint-config-standardのrules（extendsなし）
- eslint-plugin-import/errorsのrules（extendsなし）
- eslint-plugin-import/warningsのrules（extendsなし）
- eslint-plugin-vue/recommendedのextends+rules