Nuxt3 项目如何正确配置 ESLint 代码检查工具？

你已经通过npx nuxi init nuxt3-app完成项目初始化，后续配置按以下步骤操作即可：

1. 进入项目安装依赖 #

首先进入项目目录，执行依赖安装命令：

# npm
npm install -D eslint @nuxt/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser
# pnpm
pnpm add -D eslint @nuxt/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser
# yarn
yarn add -D eslint @nuxt/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser

2. 新增ESLint配置文件 #

在项目根目录新建.eslintrc.cjs文件，写入以下基础配置，可根据自身需求调整规则：

module.exports = {
  root: true,
  // 继承预设规范
  extends: [
    "@nuxt/eslint-config",
    "eslint:recommended",
    "@typescript-eslint/recommended"
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module"
  },
  // 自定义规则，off=关闭、warn=告警、error=报错阻断
  rules: {
    // 关闭Vue组件多单词命名要求，适配Nuxt单文件名页面组件
    "vue/multi-word-component-names": "off",
    // any类型仅告警不阻断
    "@typescript-eslint/no-explicit-any": "warn",
    // 可根据团队规范自行添加更多规则
  }
}

3. 新增ESLint忽略配置 #

在项目根目录新建.eslintignore文件，配置不需要校验的目录/文件：

node_modules
.nuxt
.output
dist
*.config.*
public

4. 添加校验命令 #

打开项目根目录的package.json，在scripts字段中添加两条命令：

{
  "scripts": {
    // 原有命令保留，新增以下两条
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

5. 功能测试 #

执行npm run lint命令即可触发全量代码规范校验，执行npm run lint:fix可自动修复所有可自动修复的规范问题。

可选配置：开发时实时校验 #

如果需要在开发运行阶段实时提示规范问题，可按以下步骤配置：

• 安装vite ESLint插件：

npm install -D vite-plugin-eslint

• 打开nuxt.config.ts，添加vite插件配置：

import eslintPlugin from "vite-plugin-eslint"

export default defineNuxtConfig({
  // 原有配置保留
  vite: {
    plugins: [
      eslintPlugin({
        include: ["**/*.{js,ts,vue}"],
        exclude: ["node_modules", ".nuxt"],
        // 开发阶段仅告警不阻断运行，可按需改为true
        failOnError: false
      })
    ]
  }
})

内容的提问来源于stack exchange，提问作者Kindi