Trae配置ESLint与Prettier联动提升代码质量

在Vue项目开发过程中，你是否常常遇到这样的问题：虽然已经配置了ESLint和Prettier，但保存代码时ESLint的错误提示无法自动修复，或者Prettier格式化后的代码反而被ESLint标记为错误？这通常表明这两款代码质量工具未能正确协同工作，甚至出现了规则冲突的情况。

简单来说，ESLint的核心功能是代码质量检查，例如发现未使用的变量或潜在逻辑错误；而Prettier则专注于代码格式化，统一缩进、换行等代码风格。当它们各自独立运行时，冲突就难以避免。要让它们协同工作，形成“ESLint检查代码质量，Prettier统一代码格式”的高效开发流程，可以参考以下几种经过实践验证的配置方案。

一、安装必要依赖并启用插件协同

这是目前最受推荐的配置方式，核心思路是让ESLint来“集成”Prettier的功能。主要通过两个关键的npm包实现：eslint-plugin-prettier负责将Prettier的规则转换为ESLint能够理解的规则；eslint-config-prettier则用于关闭ESLint中所有与Prettier冲突的格式化相关规则，避免规则重复或冲突。

首先，在项目根目录下执行安装命令：pnpm add -D eslint-plugin-prettier eslint-config-prettier prettier。

接着，修改你的ESLint配置文件（通常是eslint.config.js或.eslintrc.cjs）。关键步骤是在extends配置数组的最后一项，加入"plugin:prettier/recommended"。这个顺序非常重要，它能确保冲突的格式规则被正确覆盖。

最后，检查配置确保plugins中包含了"prettier"，并且在rules中显式启用这条规则："prettier/prettier": "error"。这样配置后，Prettier的格式化问题就会以ESLint错误的形式显示，并且能够被一起修复。

二、使用独立Prettier配置文件 + ESLint禁用格式规则

如果你希望职责分离更加清晰，可以采用这个方案：让Prettier完全负责代码格式化，而ESLint只专注于代码质量检查。这就好比一个负责“书写美观”，一个负责“语法正确”。

第一步，在项目根目录创建一个独立的Prettier配置文件，例如.prettierrc.json，并在其中定义你想要的代码风格规则。例如：{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}。

第二步，需要“告知”ESLint不要再去处理格式问题。最便捷的方法就是在ESLint配置的extends中引入"eslint-config-prettier"。这个配置包已经内置了关闭所有可能冲突的格式规则的指令。

这里需要注意一个细节："eslint-config-prettier"必须在extends数组的最后引入，以确保它能成功覆盖其他配置（如eslint:recommended或@vue/eslint-config-prettier）中自带的格式规则。

三、VS Code工作区级settings.json强制接管

有时候，项目级别的配置可能因为各种原因没有生效，或者团队成员的编辑器设置不一致。这时，可以直接在VS Code的工作区设置中进行强制绑定，效果立竿见影。

首先，在项目根目录下创建.vscode/settings.json文件。这个文件只对当前项目生效。

然后，写入以下配置内容：

1. 为Vue文件指定默认的格式化工具为Prettier：{"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}}

2. 开启保存时自动格式化：{"editor.formatOnSa ve": true}

3. 开启保存时自动修复ESLint可修复的问题：{"editor.codeActionsOnSa ve": {"source.fixAll.eslint": true}}

4. 为了避免Prettier在没有配置文件时意外运行，可以增加：{"prettier.requireConfig": true}

完成这些设置后，每次保存文件，VS Code都会先调用ESLint修复代码质量问题，再调用Prettier进行代码格式化，整个过程一气呵成。

四、利用husky + lint-staged实现提交前校验

以上方法主要依赖于开发者的本地编辑器环境。为了确保提交到代码仓库的每一行代码都符合规范，可以在Git提交这个环节增加一道自动化检查。这就是“Git Hooks”的作用，而husky和lint-staged是实现它的最佳组合。

首先，安装这两个开发依赖：pnpm add -D husky lint-staged。

接着，初始化husky：npx husky install。为了让新克隆项目的同事也能自动安装husky，建议在package.json的scripts里添加一行："prepare": "husky install"。

然后，创建一个pre-commit钩子，它在执行git commit命令前触发：npx husky add .husky/pre-commit "npx lint-staged"。

最后，配置lint-staged，告诉它对暂存区（即将提交）的哪些文件执行什么命令。在package.json中添加如下配置：

"lint-staged": {"*.{js,vue,ts}": ["eslint --fix", "prettier --write"]}

这样一来，当你尝试提交代码时，lint-staged会自动对本次提交涉及的Vue、JS等文件，依次执行ESLint修复和Prettier格式化。只有全部通过后，提交才会成功，从而在团队协作中牢牢守住代码质量的最后一道防线。