Nuxt ESLint
包

ESLint 模块

Nuxt 的一体化 ESLint 集成。它生成一个项目感知的 ESLint 平坦配置，并提供在开发服务器旁边可选地运行 ESLint 检查的功能。

Nuxt 的一体化 ESLint 集成。它生成一个项目感知的 ESLint 平坦配置，并提供在开发服务器旁边可选地运行 ESLint 检查的功能。

此模块专为 新的 ESLint 平坦配置格式 设计，这是 ESLint v9 之后的默认格式。平坦配置自 ESLint v8.45.0 开始支持，因此您可以使用任何高于该版本的 ESLint。我们建议您使用最新版本的 ESLint 以获得最佳体验。

旧版的 .eslintrc 配置 **不受** 此模块支持。我们强烈建议您迁移到平坦配置以确保将来能够正常使用。如果您仍然想使用旧版格式，您可能需要使用 @nuxt/eslint-config 手动配置，但这将缺少一些功能，例如项目感知设置。
GitHub 上的源代码

功能

快速设置

运行以下命令将 @nuxt/eslint 模块添加到您的项目

终端
npx nuxi module add eslint

启动 Nuxt 应用程序后，将在您的项目根目录下生成一个 eslint.config.mjs 文件。您可以根据需要对其进行自定义。

如果您使用的是 TypeScript，则需要在您的项目中安装 typescript
yarn add --dev typescript

手动设置

yarn add --dev @nuxt/eslint eslint typescript
nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    // options here
  }
})

并在您的项目根目录下创建一个 eslint.config.mjs 文件，内容如下

eslint.config.mjs
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 将接收平坦配置的其余参数，并将它们附加在 Nuxt 平坦配置项之后。您可以使用 Nuxt DevTools 面板检查解析后的 ESLint 平坦配置，或者手动运行 npx @eslint/config-inspector。

食谱

VS Code

ESLint v9.x 支持已在 ESLint VS Code 扩展 (vscode-eslint) v3.0.10 中添加。在 v3.0.10 之前的 vscode-eslint 版本中，新的配置系统默认情况下未启用。要启用对新配置文件的支持，请编辑您的 .vscode/settings.json 文件并添加以下内容

.vscode/settings.json
{
  // Required in vscode-eslint < v3.0.10 only
  "eslint.useFlatConfig": true
}

NPM 脚本

将以下内容添加到您 package.json 脚本部分的 lint 命令中

{
  "scripts": {
    ...
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    ...
  },
}

运行 npm run lint 命令检查代码样式是否正确，或运行 npm run lint:fix 自动修复问题。

Prettier

此模块默认情况下不会启用样式/格式化规则。您可以直接将 Prettier 与之结合使用。

ESLint 样式

如果您希望使用 ESLint 进行格式化，我们还直接与 ESLint 样式 集成以简化操作。您可以通过将 config.stylistic 设置为 true 在 eslint 模块选项中启用它。

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

您还可以传递一个对象来自定义规则

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

了解有关所有可用选项的更多信息，请参阅 ESLint 样式文档。

配置自定义

withNuxt() 返回一个来自 eslint-flat-config-utils 的可链式 FlatConfigComposer 实例，它允许您轻松地操作 ESLint 平坦配置。

eslint.config.mjs
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

您可以了解有关实例的可用选项以及类型的更多信息，请参阅 JSDoc。

有关所有可用配置名称，请使用 DevTools 进行检查。

配置检查器

此模块在您的 Nuxt DevTools 中提供了 ESLint 配置检查器。您可以在那里检查解析后的 ESLint 平坦配置

ESLint Config Inspector in Nuxt DevTools

开发服务器检查器

通常您不需要此设置，因为大多数 IDE 都能够直接运行 ESLint 以告知您问题。您也可以使用 使用 lint-staged 设置预提交钩子 来保护您的代码库在提交之前。

也就是说，如果您在一个使用各种 IDE 的团队中工作，您可能仍然希望在开发服务器旁边运行 ESLint 检查器（这可能会减慢开发服务器的速度），以确保无论环境如何都能提出问题。您可以通过将 checker 设置为 true 在 eslint 模块选项中启用它。

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

您需要为 Vite 安装额外的依赖项 vite-plugin-eslint2，或者如果您使用的是 Nuxt 3 的 Webpack 构建器，则安装 eslint-webpack-plugin。

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

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

这将启用类似于使用 @nuxtjs/eslint-module 的体验。

检查器默认情况下在平坦配置模式下运行。如果您想在旧版模式下运行它，则需要将 configType 设置为 eslintrc

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    checker: {
      configType: 'eslintrc' // <--- (consider migrating to flat config if possible)
    }
  }
})

自定义配置预设

默认情况下，此模块会安装 JS、TS 和 Vue 插件及其推荐规则。这可能已经被您的配置预设涵盖，因此在这种情况下，您可以通过将 standalone 选项设置为 false 来禁用默认设置。

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

这确保模块只生成 Nuxt 特定的规则，以便您可以将其与您自己的配置预设合并。

例如，使用 @antfu/eslint-config

eslint.config.mjs
// @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
)

自动初始化

在服务器启动时，模块将查找一个 eslint.config.* 文件，如果不存在，则会生成一个，以方便使用。您可以通过在 eslint.config 模块选项中将 autoInit 设置为 false 来选择退出此功能。

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    config: {
      autoInit: false // <--- disable auto-init
    }
  }
})