NuxtでESLint Flat Configを導入する際、eslint.config.jsに以下を設定する
eslint.config.js
import withNuxt from "./.nuxt/eslint.config.mjs";
export default withNuxt();
withNuxt()の結果には、Nuxt側が用意したJavaScript, TypeScript, Vue, Nuxt向けのESLintルールが含まれている
具体的にどんなルールが適用されているか確認したい場合は、以下の方法で確認できる
-
以下のJavaScriptファイルを作成する
hoge.jsimport withNuxt from "./.nuxt/eslint.config.mjs"; console.log(await withNuxt()); -
コンソールで
node hoge.jsを実行すると、ルール一覧が表示される
ルール一覧(長いので折りたたみ)
[
{
ignores: [
'.output', '**/.output/**',
'.data', '**/.data/**',
'.nuxt', '**/.nuxt/**',
'.nitro', '**/.nitro/**',
'.cache', '**/.cache/**',
'dist', '**/dist/**',
'node_modules', '**/node_modules/**',
'logs', '**/logs/**',
'*.log', '**/*.log/**',
'.DS_Store', '**/.DS_Store/**',
'.fleet', '**/.fleet/**',
'.idea', '**/.idea/**',
'.env', '**/.env/**',
'.env.*', '**/.env.*/**',
'!.env.example', '!**/.env.example/**'
]
},
{
ignores: [
'**/dist',
'**/node_modules',
'**/.nuxt',
'**/.output',
'**/.vercel',
'**/.netlify'
]
},
{
rules: {
'constructor-super': 'error',
'for-direction': 'error',
'getter-return': 'error',
'no-async-promise-executor': 'error',
'no-case-declarations': 'error',
'no-class-assign': 'error',
'no-compare-neg-zero': 'error',
'no-cond-assign': 'error',
'no-const-assign': 'error',
'no-constant-binary-expression': 'error',
'no-constant-condition': 'error',
'no-control-regex': 'error',
'no-debugger': 'error',
'no-delete-var': 'error',
'no-dupe-args': 'error',
'no-dupe-class-members': 'error',
'no-dupe-else-if': 'error',
'no-dupe-keys': 'error',
'no-duplicate-case': 'error',
'no-empty': 'error',
'no-empty-character-class': 'error',
'no-empty-pattern': 'error',
'no-empty-static-block': 'error',
'no-ex-assign': 'error',
'no-extra-boolean-cast': 'error',
'no-fallthrough': 'error',
'no-func-assign': 'error',
'no-global-assign': 'error',
'no-import-assign': 'error',
'no-invalid-regexp': 'error',
'no-irregular-whitespace': 'error',
'no-loss-of-precision': 'error',
'no-misleading-character-class': 'error',
'no-new-native-nonconstructor': 'error',
'no-nonoctal-decimal-escape': 'error',
'no-obj-calls': 'error',
'no-octal': 'error',
'no-prototype-builtins': 'error',
'no-redeclare': 'error',
'no-regex-spaces': 'error',
'no-self-assign': 'error',
'no-setter-return': 'error',
'no-shadow-restricted-names': 'error',
'no-sparse-arrays': 'error',
'no-this-before-super': 'error',
'no-undef': 'error',
'no-unexpected-multiline': 'error',
'no-unreachable': 'error',
'no-unsafe-finally': 'error',
'no-unsafe-negation': 'error',
'no-unsafe-optional-chaining': 'error',
'no-unused-labels': 'error',
'no-unused-private-class-members': 'error',
'no-unused-vars': 'error',
'no-useless-backreference': 'error',
'no-useless-catch': 'error',
'no-useless-escape': 'error',
'no-with': 'error',
'require-yield': 'error',
'use-isnan': 'error',
'valid-typeof': 'error'
},
name: 'nuxt/javascript',
languageOptions: {
ecmaVersion: 2022,
parserOptions: [Object],
sourceType: 'module',
globals: [Object]
},
linterOptions: { reportUnusedDisableDirectives: true }
},
{
name: 'nuxt/typescript/setup',
plugins: { '@typescript-eslint': [Object] }
},
{
name: 'nuxt/typescript/rules',
files: [ '**/*.ts', '**/*.tsx', '**/*.mts', '**/*.cts', '**/*.vue' ],
languageOptions: { parser: [Object] },
rules: {
'constructor-super': 'off',
'getter-return': 'off',
'no-const-assign': 'off',
'no-dupe-args': 'off',
'no-dupe-class-members': 'off',
'no-dupe-keys': 'off',
'no-func-assign': 'off',
'no-import-assign': 'off',
'no-new-symbol': 'off',
'no-new-native-nonconstructor': 'off',
'no-obj-calls': 'off',
'no-redeclare': 'off',
'no-setter-return': 'off',
'no-this-before-super': 'off',
'no-undef': 'off',
'no-unreachable': 'off',
'no-unsafe-negation': 'off',
'no-var': 'error',
'prefer-const': 'error',
'prefer-rest-params': 'error',
'prefer-spread': 'error',
'@typescript-eslint/ban-ts-comment': [Array],
'@typescript-eslint/ban-types': 'error',
'no-array-constructor': 'off',
'@typescript-eslint/no-array-constructor': 'error',
'@typescript-eslint/no-duplicate-enum-values': 'error',
'@typescript-eslint/no-explicit-any': 'error',
'@typescript-eslint/no-extra-non-null-assertion': 'error',
'no-loss-of-precision': 'off',
'@typescript-eslint/no-loss-of-precision': 'error',
'@typescript-eslint/no-misused-new': 'error',
'@typescript-eslint/no-namespace': 'error',
'@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
'@typescript-eslint/no-this-alias': 'error',
'@typescript-eslint/no-unnecessary-type-constraint': 'error',
'@typescript-eslint/no-unsafe-declaration-merging': 'error',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': [Array],
'@typescript-eslint/no-var-requires': 'error',
'@typescript-eslint/prefer-as-const': 'error',
'@typescript-eslint/triple-slash-reference': 'error',
'@typescript-eslint/no-dynamic-delete': 'error',
'@typescript-eslint/no-extraneous-class': 'error',
'@typescript-eslint/no-invalid-void-type': 'error',
'@typescript-eslint/no-non-null-asserted-nullish-coalescing': 'error',
'@typescript-eslint/no-non-null-assertion': 'off',
'no-useless-constructor': 'off',
'@typescript-eslint/no-useless-constructor': 'error',
'@typescript-eslint/prefer-literal-enum-member': 'error',
'@typescript-eslint/unified-signatures': 'error',
'valid-typeof': 'off',
'@typescript-eslint/consistent-type-imports': [Array]
}
},
{
name: 'nuxt/vue/setup',
plugins: { vue: [Object] },
languageOptions: { parserOptions: [Object], globals: [Object] }
},
{
name: 'nuxt/vue/rules',
files: [ '**/*.vue' ],
languageOptions: { parser: [Object: null prototype] [Module] },
processor: {
preprocess: [Function: preprocess],
postprocess: [Function: postprocess],
supportsAutofix: true,
meta: [Object]
},
rules: {
'vue/comment-directive': 'error',
'vue/jsx-uses-vars': 'error',
'vue/multi-word-component-names': 'error',
'vue/no-arrow-functions-in-watch': 'error',
'vue/no-async-in-computed-properties': 'error',
'vue/no-child-content': 'error',
'vue/no-computed-properties-in-data': 'error',
'vue/no-deprecated-data-object-declaration': 'error',
'vue/no-deprecated-destroyed-lifecycle': 'error',
'vue/no-deprecated-dollar-listeners-api': 'error',
'vue/no-deprecated-dollar-scopedslots-api': 'error',
'vue/no-deprecated-events-api': 'error',
'vue/no-deprecated-filter': 'error',
'vue/no-deprecated-functional-template': 'error',
'vue/no-deprecated-html-element-is': 'error',
'vue/no-deprecated-inline-template': 'error',
'vue/no-deprecated-props-default-this': 'error',
'vue/no-deprecated-router-link-tag-prop': 'error',
'vue/no-deprecated-scope-attribute': 'error',
'vue/no-deprecated-slot-attribute': 'error',
'vue/no-deprecated-slot-scope-attribute': 'error',
'vue/no-deprecated-v-bind-sync': 'error',
'vue/no-deprecated-v-is': 'error',
'vue/no-deprecated-v-on-native-modifier': 'error',
'vue/no-deprecated-v-on-number-modifiers': 'error',
'vue/no-deprecated-vue-config-keycodes': 'error',
'vue/no-dupe-keys': 'error',
'vue/no-dupe-v-else-if': 'error',
'vue/no-duplicate-attributes': 'error',
'vue/no-export-in-script-setup': 'error',
'vue/no-expose-after-await': 'error',
'vue/no-lifecycle-after-await': 'error',
'vue/no-mutating-props': 'error',
'vue/no-parsing-error': 'error',
'vue/no-ref-as-operand': 'error',
'vue/no-reserved-component-names': 'error',
'vue/no-reserved-keys': 'error',
'vue/no-reserved-props': 'error',
'vue/no-shared-component-data': 'error',
'vue/no-side-effects-in-computed-properties': 'error',
'vue/no-template-key': 'error',
'vue/no-textarea-mustache': 'error',
'vue/no-unused-components': 'error',
'vue/no-unused-vars': 'error',
'vue/no-use-computed-property-like-method': 'error',
'vue/no-use-v-if-with-v-for': 'error',
'vue/no-useless-template-attributes': 'error',
'vue/no-v-for-template-key-on-child': 'error',
'vue/no-v-text-v-html-on-component': 'error',
'vue/no-watch-after-await': 'error',
'vue/prefer-import-from-vue': 'error',
'vue/require-component-is': 'error',
'vue/require-prop-type-constructor': 'error',
'vue/require-render-return': 'error',
'vue/require-slots-as-functions': 'error',
'vue/require-toggle-inside-transition': 'error',
'vue/require-v-for-key': 'error',
'vue/require-valid-default-prop': 'error',
'vue/return-in-computed-property': 'error',
'vue/return-in-emits-validator': 'error',
'vue/use-v-on-exact': 'error',
'vue/valid-attribute-name': 'error',
'vue/valid-define-emits': 'error',
'vue/valid-define-props': 'error',
'vue/valid-next-tick': 'error',
'vue/valid-template-root': 'error',
'vue/valid-v-bind': 'error',
'vue/valid-v-cloak': 'error',
'vue/valid-v-else-if': 'error',
'vue/valid-v-else': 'error',
'vue/valid-v-for': 'error',
'vue/valid-v-html': 'error',
'vue/valid-v-if': 'error',
'vue/valid-v-is': 'error',
'vue/valid-v-memo': 'error',
'vue/valid-v-model': 'error',
'vue/valid-v-on': 'error',
'vue/valid-v-once': 'error',
'vue/valid-v-pre': 'error',
'vue/valid-v-show': 'error',
'vue/valid-v-slot': 'error',
'vue/valid-v-text': 'error',
'vue/attribute-hyphenation': 'warn',
'vue/component-definition-name-casing': 'warn',
'vue/first-attribute-linebreak': 'warn',
'vue/html-closing-bracket-newline': 'warn',
'vue/html-closing-bracket-spacing': 'warn',
'vue/html-end-tags': 'warn',
'vue/html-indent': [Array],
'vue/html-quotes': [Array],
'vue/html-self-closing': 'warn',
'vue/max-attributes-per-line': 'warn',
'vue/multiline-html-element-content-newline': [Array],
'vue/mustache-interpolation-spacing': 'warn',
'vue/no-multi-spaces': 'warn',
'vue/no-spaces-around-equal-signs-in-attribute': 'warn',
'vue/no-template-shadow': 'warn',
'vue/one-component-per-file': 'off',
'vue/prop-name-casing': 'warn',
'vue/require-default-prop': 'off',
'vue/require-explicit-emits': 'warn',
'vue/require-prop-types': 'warn',
'vue/singleline-html-element-content-newline': 'warn',
'vue/v-bind-style': 'warn',
'vue/v-on-event-hyphenation': [Array],
'vue/v-on-style': 'warn',
'vue/v-slot-style': 'warn',
'vue/attributes-order': 'warn',
'vue/no-lone-template': 'warn',
'vue/no-multiple-slot-args': 'warn',
'vue/no-v-html': 'warn',
'vue/order-in-components': 'warn',
'vue/this-in-template': 'warn',
'vue/block-order': 'warn',
'vue/array-bracket-spacing': [Array],
'vue/arrow-spacing': [Array],
'vue/block-spacing': [Array],
'vue/block-tag-newline': [Array],
'vue/brace-style': [Array],
'vue/comma-dangle': [Array],
'vue/comma-spacing': [Array],
'vue/comma-style': [Array],
'vue/html-comment-content-spacing': [Array],
'vue/key-spacing': [Array],
'vue/keyword-spacing': [Array],
'vue/object-curly-newline': 'off',
'vue/object-curly-spacing': [Array],
'vue/object-property-newline': [Array],
'vue/operator-linebreak': [Array],
'vue/padding-line-between-blocks': [Array],
'vue/quote-props': [Array],
'vue/space-in-parens': [Array],
'vue/template-curly-spacing': 'error'
}
},
{
name: 'nuxt/import/rules',
plugins: { import: [Object] },
rules: {
'import/first': 'error',
'import/no-duplicates': 'error',
'import/no-mutable-exports': 'error',
'import/no-named-default': 'error',
'import/no-self-import': 'error',
'import/order': 'error',
'import/newline-after-import': [Array]
}
},
{ name: 'nuxt/configs', languageOptions: { globals: [Object] } },
{
name: 'nuxt/vue/single-root',
files: [
'layouts/**/*.{js,ts,jsx,tsx,vue}',
'pages/**/*.{js,ts,jsx,tsx,vue}'
],
rules: { 'vue/no-multiple-template-root': 'error' }
},
{
name: 'nuxt/rules',
plugins: { nuxt: [Object] },
rules: { 'nuxt/prefer-import-meta': 'error' }
},
{
name: 'nuxt/stylistic',
plugins: { '@stylistic': [Object] },
rules: {
'@stylistic/array-bracket-spacing': [Array],
'@stylistic/arrow-parens': [Array],
'@stylistic/arrow-spacing': [Array],
'@stylistic/block-spacing': [Array],
'@stylistic/brace-style': [Array],
'@stylistic/comma-dangle': [Array],
'@stylistic/comma-spacing': [Array],
'@stylistic/comma-style': [Array],
'@stylistic/computed-property-spacing': [Array],
'@stylistic/dot-location': [Array],
'@stylistic/eol-last': 'error',
'@stylistic/indent': [Array],
'@stylistic/indent-binary-ops': [Array],
'@stylistic/key-spacing': [Array],
'@stylistic/keyword-spacing': [Array],
'@stylistic/lines-between-class-members': [Array],
'@stylistic/max-statements-per-line': [Array],
'@stylistic/member-delimiter-style': [Array],
'@stylistic/multiline-ternary': [Array],
'@stylistic/new-parens': 'error',
'@stylistic/no-extra-parens': [Array],
'@stylistic/no-floating-decimal': 'error',
'@stylistic/no-mixed-operators': [Array],
'@stylistic/no-mixed-spaces-and-tabs': 'error',
'@stylistic/no-multi-spaces': 'error',
'@stylistic/no-multiple-empty-lines': [Array],
'@stylistic/no-tabs': 'error',
'@stylistic/no-trailing-spaces': 'error',
'@stylistic/no-whitespace-before-property': 'error',
'@stylistic/object-curly-spacing': [Array],
'@stylistic/operator-linebreak': [Array],
'@stylistic/padded-blocks': [Array],
'@stylistic/quote-props': [Array],
'@stylistic/quotes': [Array],
'@stylistic/rest-spread-spacing': [Array],
'@stylistic/semi': [Array],
'@stylistic/semi-spacing': [Array],
'@stylistic/space-before-blocks': [Array],
'@stylistic/space-before-function-paren': [Array],
'@stylistic/space-in-parens': [Array],
'@stylistic/space-infix-ops': 'error',
'@stylistic/space-unary-ops': [Array],
'@stylistic/spaced-comment': [Array],
'@stylistic/template-curly-spacing': 'error',
'@stylistic/template-tag-spacing': [Array],
'@stylistic/type-annotation-spacing': [Array],
'@stylistic/type-generic-spacing': 'error',
'@stylistic/type-named-tuple-spacing': 'error',
'@stylistic/wrap-iife': [Array],
'@stylistic/yield-star-spacing': [Array],
'@stylistic/jsx-closing-bracket-location': 'error',
'@stylistic/jsx-closing-tag-location': 'error',
'@stylistic/jsx-curly-brace-presence': [Array],
'@stylistic/jsx-curly-newline': 'error',
'@stylistic/jsx-curly-spacing': [Array],
'@stylistic/jsx-equals-spacing': 'error',
'@stylistic/jsx-first-prop-new-line': 'error',
'@stylistic/jsx-function-call-newline': [Array],
'@stylistic/jsx-indent': [Array],
'@stylistic/jsx-indent-props': [Array],
'@stylistic/jsx-max-props-per-line': [Array],
'@stylistic/jsx-one-expression-per-line': [Array],
'@stylistic/jsx-quotes': 'error',
'@stylistic/jsx-tag-spacing': [Array],
'@stylistic/jsx-wrap-multilines': [Array]
}
},
{
name: 'nuxt/disables/routes',
files: [
'app.{js,ts,jsx,tsx,vue}',
'error.{js,ts,jsx,tsx,vue}',
'layouts/**/*.{js,ts,jsx,tsx,vue}',
'pages/**/*.{js,ts,jsx,tsx,vue}',
'components/*/**/*.{js,ts,jsx,tsx,vue}'
],
rules: { 'vue/multi-word-component-names': 'off' }
},
{
name: 'nuxt/import-globals',
languageOptions: { globals: [Object] }
}
]
他ルールを追加する場合も、withNuxtに追加したものを出力すれば最終的なルールが確認できる
hoge.js
import eslintConfigPrettier from "eslint-config-prettier";
import withNuxt from "./.nuxt/eslint.config.mjs";
console.log(await withNuxt([eslintConfigPrettier]));