求助：如何在Nuxt 3中配置Prettier与ESLint实现保存自动修复

一、依赖清理与安装 #

先卸载可能引发冲突的旧依赖，安装官方推荐的组合包：

# 卸载冲突包
npm uninstall @nuxtjs/eslint-config @nuxtjs/eslint-module eslint-plugin-prettier eslint-config-prettier

# 安装核心依赖
npm install -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @nuxt/eslint-config

注：@nuxt/eslint-config已整合Vue官方风格指南、Nuxt专属规则，@vue/eslint-config-prettier会自动禁用ESLint中与Prettier冲突的规则，彻底避免格式打架。

二、配置文件编写 #

1. 根目录创建 .eslintrc.cjs：

module.exports = {
  root: true,
  extends: [
    '@nuxt/eslint-config',
    '@vue/eslint-config-prettier'
  ],
  rules: {
    // 可根据项目需求自定义规则，比如关闭组件名多单词校验
    'vue/multi-word-component-names': 'off'
  }
}

2. 根目录创建 .prettierrc：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "es5"
}

3. 根目录创建 .prettierignore：

node_modules
.nuxt
.output
dist

三、Nuxt 项目配置更新 #

在 nuxt.config.ts 中启用ESLint模块：

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint-module'
  ],
  eslint: {
    lintOnStart: false,
    fix: true // 开发阶段自动修复可修正问题
  }
})

四、VS Code 关键配置（解决保存闪回核心） #

1. 必需插件：
   • ESLint（微软官方）
   • Prettier - Code formatter（Prettier官方）
2. 打开VS Code设置（快捷键Ctrl+,），点击右上角「打开设置(JSON)」，添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.requireConfig": true, // 强制使用项目根目录的Prettier配置
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue",
    "json"
  ],
  // 指定各类文件的默认格式化工具
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注：该配置确保ESLint修复与Prettier格式化的执行顺序，避免互相覆盖导致的闪回问题。

五、闪回问题额外排查点 #

• 检查项目中是否存在多个ESLint/Prettier配置文件（如同时有.eslintrc.js和.eslintrc.cjs），保留一个即可。
• 执行VS Code命令面板（Ctrl+Shift+P）中的「Developer: Reload Window」，清除缓存后重启编辑器。
• 确认ESLint和Prettier插件未被禁用，可在VS Code插件面板中检查状态。

六、配置验证 #

在项目根目录执行以下命令，手动验证修复效果：

# 检查ESLint问题
npx eslint . --ext .vue,.js,.ts

# 自动修复ESLint可修复问题
npx eslint . --ext .vue,.js,.ts --fix

# 检查Prettier格式合规性
npx prettier --check .

# 全局格式化所有文件
npx prettier --write .

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