用 eslint 和 prettier 让跨 IDE 协作更舒服
内容提要
文章介绍如何用 ESLint 和 Prettier 统一跨 IDE 的代码格式：安装相关插件和 npm 包，配置 .eslintrc.js 与 .prettierrc.js，开启保存自动格式化，并用 husky 做提交检查。ESLint 负责 JS 代码质量，Prettier 负责 Vue 模板等格式，二者配合可解决 VSCode 与 JetBrains 的缩进差异。
延伸解读
为什么仅靠 ESLint 不够
文章指出，ESLint 主要针对 JavaScript 代码质量，对 Vue 文件中的模板部分缩进并不处理。而 VSCode 与 JetBrains 在 HTML 标签换行缩进上存在差异，若只依赖 ESLint，模板格式无法统一。因此需要引入 Prettier 专门负责模板等格式，两者配合才能解决跨 IDE 的协作问题。
配置冲突的处理思路
当 Prettier 与 ESLint 规则冲突时，文章建议不必额外引入兼容工具，因为 Prettier 配置项较少，手动调整 ESLint 规则即可。例如默认 ESLint 对 switch 的缩进与 Prettier 不同，而 Prettier 没有细控 switch 缩进的选项，此时应修改 ESLint 的 indent 规则来迁就 Prettier，避免增加维护负担。
渐进式接入提交检查
对于已存在但未使用格式化工具的项目，文章建议不要立即开启提交检查，而应渐进式修改。使用 husky 可以在提交前运行 ESLint 检查，失败则阻止提交。具体做法包括初始化 husky、在 package.json 添加 lint 命令，并在 pre-commit 文件中加入 npm run lint，从而逐步提升代码质量。
团队配置共享的便捷方式
文章提到，团队可以所有项目共用一套 ESLint 和 Prettier 配置，直接复制配置文件即可跳过生成步骤。更便捷的方式是通过 npm 包管理配置，例如在 .prettierrc.js 中展开 require('@company/prettier-config') 并覆盖个别选项。这样能确保不同项目间格式统一，减少重复配置工作。
Q&A
为什么跨 IDE 协作需要同时使用 ESLint 和 Prettier？
ESLint 主要负责 JavaScript 代码质量检查，但无法处理 Vue 文件模板部分的缩进；Prettier 则能统一 Vue 模板等格式。两者配合可以解决 VSCode 与 JetBrains 系 IDE 在缩进上的差异，确保所有开发者格式一致。
如何安装和配置 ESLint 与 Prettier 以统一代码格式？
首先在 IDE 中安装 ESLint 和 Prettier 插件，然后通过 npm 安装核心包：npm install --save-dev eslint eslint-plugin-vue prettier。接着初始化配置：运行 npx eslint --init 生成 .eslintrc.js，使用 Prettier 官网 playground 生成 .prettierrc.js。最后在 IDE 设置中配置保存时自动格式化。
如何设置保存时自动格式化代码？
在 WebStorm 中，可以在设置里搜索保存时的行为，勾选 ESLint 和 Prettier。在 VSCode 中，可以在 settings.json 中添加："editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true。
ESLint 和 Prettier 规则冲突时该如何解决？
可以手动调整 ESLint 规则以兼容 Prettier。例如，默认 ESLint 规则在格式化 switch 语句时与 Prettier 不同，但 Prettier 没有控制 switch 缩进的规则，因此需要修改 ESLint 的 indent 规则：indent: [2, 2, { SwitchCase: 1 }]。通常不需要额外安装兼容工具，手动调整即可。
如何使用 husky 在提交前检查代码质量？
首先运行 npx husky-init 初始化并安装 husky 依赖，然后在 package.json 的 scripts 中添加 lint 命令，例如："lint": "node ./node_modules/eslint/bin/eslint.js --ext .vue,.js src"。最后在 .husky 文件夹的 pre-commit 文件中添加 npm run lint，这样提交前会自动运行 ESLint，失败则无法提交。
如何让团队共享同一套 ESLint 和 Prettier 配置？
可以将配置文件复制到各个项目，或者通过 npm 包管理共享配置。例如，创建一个公司级的 Prettier 配置包，然后在项目的 .prettierrc.js 中这样使用：module.exports = { ...require("@company/prettier-config"), semi: false, }。ESLint 配置也可以采用类似方式。
