Nuxt3 中使用 ESLint

# 快速安装

使用该命令安装的同时会给依赖、内置模块同时更新

npx nuxi module add eslint

 

安装完毕后，nuxt.config.ts 文件 和 package.json 文件 会新增代码段：

# nuxt.config.ts
modules: [
    "@nuxt/eslint"
]

# package.json
"devDependencies": {
    "@nuxt/eslint": "^0.3.13",
}

 

启动您的 Nuxt 应用程序

# 启动你的nuxt3项目
npm run dev

 

一旦启动你的项目，将会在您的项目根目录下生成一个文件 -->  eslint.config.mjs ， 可以根据需要对其进行自定义。

# eslint.config.mjs
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
 
export default withNuxt(
  // Your custom configs here
)

该模块专为新的 ESLint 平面配置格式而设计，是自 ESLint v9 以来的默认格式。

 

# 实战演练

这里以 Visual Studio Code 工具为例

vscode 设置，配置项关联 eslint 插件

# .vscode/settings.json
{
  // Enable ESlint flat config support
  "eslint.experimental.useFlatConfig": true
}

这里可以看到 eslint 并没有激活，提示：未找到相关插件支持该选项配置。

 

给vscode安装 ESLint 扩展插件

 

安装完成之后，配置项被激活

初步体验一下 eslint 在 vscode 使用效果，eslint.config.mjs 内容修改如下：

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
 
export default withNuxt(
  // your custom flat configs go here, for example:
  {
    files: ['**/*.vue', '**/*.ts', '**/*.tsx'],
    rules: {
      'no-console': ["error", { allow: ["warn", "error"] }]
    }
  }
)

这段 eslint 规则 'no-console': ["error", { allow: ["warn", "error"] }] 用于控制台输出的规范。

1. 'no-console': 这是一个eslint规则的名称，它用于检查代码中是否存在对 console 对象的直接调用。
2. ["error", { allow: ["warn", "error"] }]: 这部分定义了规则的行为。它告诉eslint如果发现代码中有直接使用 console 对象的调用，应该如何处理。具体解释如下：

                "error": 表示如果违反了这个规则，应该以错误 (error) 的形式进行报告，这意味着代码将无法通过eslint的验证。

                { allow: ["warn", "error"] }: 这指定了一组允许的 console 方法。在这种情况下，允许使用 console.warn() 和 console.error() 方法，但是除了这两个之外的其他 console 方法将会触发eslint错误。

因此，这个eslint规则的目的是防止在代码中直接调用 console 对象的方法，以提高代码的可维护性和可读性，同时允许使用 console.warn() 和 console.error() 方法进行调试和错误处理。

除了 allow 参数之外，no-console 规则还有其他一些可用的参数值，包括：

• "always": 意味着 console 对象的任何调用都将被视为一个错误。
• "never": 完全禁止使用 console 对象的调用。
• object: 可以指定特定的 console 方法，例如 { allow: ["log", "info"] }，这将只允许使用 console.log() 和 console.info() 方法，而其他方法将被视为错误。

新建一个 index.vue，在