1.config.md

title
@nuxt/eslint-config

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

:::callout{icon="i-ph-lightbulb-duotone"} We recommand to use directly the ESLint Module that will provide project-aware ESLint config and Nuxt DevTools integration on top of this config. :::

::read-more

to: https://github.com/nuxt/eslint/tree/main/packages/eslint-config color: gray icon: i-simple-icons-github

Source code on GitHub ::

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.

::code-group

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

npm install --save-dev @nuxt/eslint-config eslint

pnpm add -D @nuxt/eslint-config eslint

bun add -D @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:

:::callout{icon="i-ph-crane-tower-duotone" color="amber"} This feature is experimental and may change in the future. :::

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

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

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

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.

::code-group

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

npm install --save-dev @nuxt/eslint-config eslint

pnpm add -D @nuxt/eslint-config eslint

bun add -D @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 ."
  }
}