ESLint Module

All-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev server.

Features

• ESLint flat config, future-proof.
• Project-aware Nuxt-specific settings, also supports layers.
• Nuxt DevTools integration powered by @eslint/config-inspector.
• Optional dev server checker integration.

Quick Setup

yarn add --dev @nuxt/eslint eslint

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    // options here
  }
})

And create an eslint.config.mjs file under your project root, with the following content:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // your custom flat configs go here, for example:
  // {
  //   files: ['**/*.ts', '**/*.tsx'],
  //   rules: {
  //     'no-console': 'off' // allow console.log in TypeScript files
  //   }
  // },
  // {
  //   ...
  // }
)

withNuxt will take the rest arguments of flat configs and append them after Nuxt flat config items. You can either use the Nuxt DevTools panel to inspect the resolved ESLint flat config, or manually run npx @eslint/config-inspector.

Recipes

VS Code

Note that because 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 setting to get ESLint working. (This will likely not be needed after ESLint v9).

{
  // Enable ESlint flat config support
  "eslint.experimental.useFlatConfig": true
}

Prettier

This module does not enable stylistic/formatting rules by default. You can use Prettier alongside directly.

ESLint Stylistic

If you prefer to use ESLint for formatting, we also directly integrate with ESLint Stylistic to make it easy. You can opt-in by setting config.stylistic to true in the eslint module options.

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      stylistic: true // <---
    }
  }
})

You can also pass an object to customize the rules:

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      stylistic: {
        indent: 'tab',
        semi: true,
        // ...
      }
    }
  }
})

Learn more about all the available options in the ESLint Stylistic documentation.

Config Customizations

withNuxt() returns a chainable FlatConfigComposer instance from eslint-flat-config-utils which allows you to manipulate the ESLint flat config with ease.

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // ...Custom flat configs append after nuxt's configs
)
  .prepend(
    // ...Prepend some flat configs in front
  )
  // Override some rules in a specific config, based on their name
  .override('nuxt/typescript', {
    rules: {
      // ...Override rules, for example:
      '@typescript-eslint/ban-types': 'off'
    }
  })
  // ...you can chain more operations as needed

You can learn more about the options available with the types can JSDocs of the instance.

For all the available configure names, please use the DevTools to inspect.

Dev Server Checker

Usually you don't need this setting as most IDEs are capable of running ESLint directly to inform you of issues. It's also possible to set up a pre-commit hook with lint-staged to guard your codebase before committing.

That said, if you are working on a team using a variety of IDEs you may still want to run the ESLint checker along side the dev server (which might slow down the dev server) to ensure issues are raised no matter the environment. You can enable it by setting checker to true in the eslint module options.

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    checker: true // <---
  }
})

You will need to install extra dependencies vite-plugin-eslint2 for Vite, or eslint-webpack-plugin if you are using the Webpack builder for Nuxt 3.

# For Vite
npm i -D vite-plugin-eslint2

# For Webpack
npm i -D eslint-webpack-plugin

This enables a similar experience to using @nuxtjs/eslint-module.

Custom Config Presets

By default, this module installs the JS, TS and Vue plugins with their recommended rules. This might already be covered by your config presets, so in that case you can disable the default setup by setting the standalone option to false.

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      standalone: false // <---
    }
  }
})

This ensures the module only generates Nuxt-specific rules so that you can merge it with your own config presets.

For example, with @antfu/eslint-config:

// @ts-check
import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  antfu({
    // ...@antfu/eslint-config options
  }),
  // ...your other rules
)