@nuxt/eslint-config

Shared ESLint config for Nuxt 3 projects. Unopinionated by default, but customizable.

Config Formats

This package provides two different ESLint configs:

• Flat Config - Customizable future-proof config for the new flat config format.
• Legacy Config - Unopinionated static config for the legacy .eslintrc format.

Flat Config Format

The flat config format is the future of ESLint and is designed to be more flexible and project-aware. The entry @nuxt/eslint-config/flat provides a factory function to create a project-aware ESLint config for Nuxt 3 projects. It is unopinionated by default but customizable by passing options to the factory function. Used by @nuxt/eslint module to generate project-aware ESLint config.

1. Install this package and eslint in your devDependencies.

yarn add --dev @nuxt/eslint-config eslint

2. Import the config factory function from @nuxt/eslint-config/flat entry in your eslint.config.mjs:

import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  // options here
})

You might also want to add a script entry to your package.json:

{
  "scripts": {
    "lint": "eslint ."
  }
}

Customizing the Config

Note that createConfigForNuxt() returns a chainable FlatConfigComposer instance from eslint-flat-config-utils which allows you to manipulate the ESLint flat config with ease. If you want to combine with other configs, you can use the .append() method:

import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  // options here
})
  .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

FlatConfigComposer is also a Promise object, that you can use await to get the final config object.

Module Authors

This config also provides rules for module/library authors. You can enable them by setting the features.tooling option to true:

import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  features: {
    tooling: true
  }
})

This will enable rules with unicorn, regexp and jsdoc plugins, to ensure your module is following best practices.

You can also turn them off individually by providing an object with the rule names set to false:

import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  features: {
    tooling: {
      regexp: false,
    }
  }
})

Legacy Config Format

The legacy config configures TypeScript and Vue integration for ESLint. It is unopinionated and static, and does not contains stylistic rules or project-aware settings.

1. Install this package and eslint in your devDependencies.

yarn add --dev @nuxt/eslint-config eslint

2. Extend the default Nuxt config by creating an .eslintrc.cjs:

module.exports = {
  root: true,
  extends: ["@nuxt/eslint-config"],
};

You might also want to add a script entry to your package.json:

{
  "scripts": {
    "lint": "eslint ."
  }
}

ESLint Stylistic

Similar to the ESLint Module, you can opt-in by setting stylistic to true in the features module options.

import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  features: {
    stylistic: true // <---
  }
})

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