ESlint和Prettier分离式工作流，告别混乱。

先说说这两个工具到底干嘛的：

ESLint 是代码质量检查工具，主要关心你的代码会不会出问题。比如：

• 变量定义了但没用
• 可能的运行时错误
• 不好的编码习惯

Prettier 是代码格式化工具，只关心代码长得好不好看：

• 缩进用几个空格
• 单引号还是双引号
• 行末要不要分号

问题来了，很多人喜欢用 eslint-plugin-prettier 让 ESLint 来调用 Prettier，看起来很方便，实际上是个坑。每次保存时，ESLint 先检查，发现格式问题，调用 Prettier 格式化，然后再检查... 来来回回，能不慢吗？

我的解决方案：让它们各司其职

经过多次踩坑，我发现最简单有效的方法就是让 ESLint 和 Prettier 完全分开工作，谁也别管谁。

安装依赖，但要有选择性

# 基础两件套
npm install --save-dev eslint prettier
# 关键：让 ESLint 忽略 Prettier 负责的格式规则
npm install --save-dev eslint-config-prettier
# Vue/TS 项目需要的额外依赖
npm install --save-dev eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

注意：这里没有安装 eslint-plugin-prettier，这就是让两个工具打架的"罪魁祸首"。

配置 ESLint，让它专注代码质量

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "@typescript-eslint/recommended",
    "prettier", // 关键：必须放在最后，覆盖前面的格式相关规则
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    // 其他你需要的代码质量规则...
  },
};

配置 Prettier，定义你的代码风格

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "endOfLine": "lf"
}

VS Code 设置，让一切自动化

最爽的部分来了，配置好编辑器，你只需要专注写代码：

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这样设置后，每次保存文件时：

1. Prettier 先执行，把代码格式化得漂漂亮亮
2. ESLint 紧接着执行，修复能自动修复的代码质量问题

两个工具各干各的，互不干扰，速度飞快。

实际效果怎么样？

自从这样配置后，我的开发体验好了不少：

• 速度快了：保存文件几乎是瞬时的，不再有等待的烦恼
• 职责清晰：ESLint 专注代码质量，Prettier 专注代码格式，不会互相干扰
• 配置简单：配置文件一目了然，出了问题容易排查
• 团队协作友好：只要统一配置文件，整个团队的代码风格就能保持一致

小贴士

1. 记得安装 VS Code 插件：ESLint 和 Prettier 插件都要装
2. 团队统一配置：把 .vscode 目录提交到版本控制，确保团队配置一致
3. 定期更新依赖：这些工具更新比较频繁，新版本通常有性能优化
4. 大型项目考虑缓存：如果项目特别大，可以开启 ESLint 缓存

写在最后

代码工具应该是我们的助手，不是负担。合理配置 ESLint 和 Prettier，让它们各司其职，不仅能提升开发效率，还能让代码保持高质量。希望我的经验能帮到你，如果你有更好的配置方案，欢迎交流！

---

如果你觉得这篇文章有用，别忘了点个赞。有问题或者建议，欢迎在评论区讨论。