Nuxt 4 + Vue 3 + TypeScript + Vite 项目 ESLint + Prettier 配置指南

在现代前端开发中，统一的代码规范非常重要。本篇文章整理了 Nuxt 4 + Vue 3 + Vite + TypeScript 项目下的 ESLint + Prettier 配置方法，并标注每个配置文件的作用，兼容 WebStorm。

---

1. 安装依赖

在项目根目录执行：

pnpm add -D eslint prettier eslint-plugin-vue @nuxt/eslint-config @vue/eslint-config-typescript @vue/eslint-config-prettier

说明：

依赖	作用
eslint	核心代码检查工具
prettier	统一代码风格
eslint-plugin-vue	Vue 语法检查
@nuxt/eslint-config	Nuxt 官方 ESLint 规则
@vue/eslint-config-typescript	Vue + TS 检查规则
@vue/eslint-config-prettier	解决 ESLint 和 Prettier 的冲突

---

2. ESLint 配置

在 Nuxt 4/ESLint 9 项目中推荐使用 Flat Config，新建文件 eslint.config.mjs：

// eslint.config.mjs
import nuxt from '@nuxt/eslint-config'
import ts from '@vue/eslint-config-typescript'
import prettier from '@vue/eslint-config-prettier'

export default [
  ...nuxt,      // Nuxt 官方推荐规则
  ...ts(),      // Vue + TypeScript 支持
  ...prettier,  // Prettier 风格覆盖 ESLint 冲突
  {
    rules: {
      'vue/multi-word-component-names': 'off',  // 允许单词组件名
      '@typescript-eslint/no-unused-vars': ['warn'], // TS 未使用变量提醒
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁止 console
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生产环境禁止 debugger
    },
  },
]

说明：

• ...nuxt → 引入 Nuxt 官方 ESLint 配置
• ...ts() → 引入 Vue + TypeScript 配置
• ...prettier → 禁止 ESLint 与 Prettier 冲突
• rules → 自定义规则，可根据项目需求修改

---

3. Prettier 配置

在根目录新建 .prettierrc.json：

{
  "semi": false,          // 不使用分号
  "singleQuote": true,    // 使用单引号
  "printWidth": 100,      // 最大行宽 100
  "trailingComma": "es5", // 尾随逗号 ES5 支持范围
  "arrowParens": "avoid"  // 箭头函数省略括号
}

说明：

• 配置代码风格
• 与 ESLint 配合，Prettier 负责格式化，ESLint 负责代码规范

---

4. WebStorm 配置

1. 启用 ESLint

   • 打开 Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint
   • 选择 Manual configuration
   • ESLint package 指向项目的 node_modules/eslint
   • 勾选 Run eslint --fix on save

2. 启用 Prettier（可选）

   • 打开 Preferences | Languages & Frameworks | JavaScript | Prettier
   • 设置 Prettier package 路径（一般是 node_modules/prettier）
   • 勾选 On 'Save' action

说明： WebStorm 会在保存时自动调用 ESLint + Prettier 修复代码，无需手动格式化。

---

5. package.json 脚本

在 package.json 中添加：

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

说明：

• lint → 检查代码规范
• lint:fix → 自动修复可修复的 ESLint 问题

---

6. ESLint 版本兼容问题

如果你在 WebStorm 中遇到报错：

Unknown options: useEslintrc, extensions, ignorePath ...

原因是 WebStorm 内置 ESLint 插件还不完全支持 ESLint 9。 解决方法：

1. 升级 WebStorm 到 2024.3+（推荐）
2. 或把 ESLint 降级到 8.x：

pnpm add -D eslint@8

---

7. 小结

1. ESLint + Prettier 可以统一项目代码风格和规范
2. Nuxt 4 + Vue 3 + Vite + TypeScript 推荐使用 Flat Config (eslint.config.mjs)
3. WebStorm 2024.3+ 可以完美支持 ESLint 9
4. package.json 脚本 + IDE 配置可以实现自动检查和修复

---

这样，你的 Nuxt 4 项目就有完整的 TS + ESLint + Prettier + WebStorm 开发环境了！