Important
This module is now @nuxt/eslint
A module that generates project-aware ESLint flat config for Nuxt. This should replace @nuxt/eslint-config
as the flat config version.
- ESLint flat config, future-proof
- Project-aware Nuxt-specific settings, supports layers.
- Nuxt DevTools integration powered by
eslint-flat-config-viewer
npm i -D nuxt-module-eslint-config
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-module-eslint-config'
]
})
And create an eslint.config.js
file in your project root, with the following content:
// eslint.config.js
import NuxtEslintConfig from './.nuxt/eslint.config.mjs'
export default [
...NuxtEslintConfig
// your custom flat config here.
]
Note that ESLint Flat config is not yet enabled by default in the ESLint VS Code extension, you will need to enable it via the eslint.experimental.useFlatConfig
to get ESLint working in VS Code. (This is likely not needed after ESLint v9).
// .vscode/settings.json
{
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true
}
This module does not enable any stylistic/formatting rules by default. You can use Prettier alongside directly.
By default, this module installs the JS, TS and Vue plugins with their recommended rules. This might already been covered by your config presets. You can disable the default setup by adding:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-module-eslint-config'
],
eslintConfig: {
setup: false // <---
}
})
This will make this module only generate the Nuxt-specific rules and disables, so that you can merge it with your own config presets.
For example, with @antfu/eslint-config
:
// eslint.config.js
import antfu from '@antfu/eslint-config'
import NuxtEslintConfig from './.nuxt/eslint.config.mjs'
export default antfu(
{
// ...@antfu/eslint-config options,
},
// Add the Nuxt rules
NuxtEslintConfig,
// ...your other rules
)
MIT