从零打造高效代码格式化工作流：VSCode + Prettier + ESLint终极配置指南
当你在团队协作中打开一个JavaScript文件，看到有的行用分号结尾、有的没有，单引号和双引号混用，缩进有2空格也有4空格——这种代码风格的不一致性不仅影响可读性，还会在代码审查时引发不必要的争论。作为现代前端开发者，配置一套自动化代码格式化工具链已成为必备技能。本文将带你从零开始，在VSCode中搭建Prettier与ESLint的完美组合，实现保存即自动格式化的高效工作流。
1. 环境准备与插件安装
在开始配置之前，确保你已经安装了最新版的Visual Studio Code。VSCode的轻量级设计和丰富的插件生态使其成为前端开发的首选编辑器。打开扩展市场（快捷键Ctrl+Shift+X），我们需要安装以下两个核心插件：
- Prettier - Code formatter：代码格式化工具，支持多种语言
- ESLint：JavaScript代码质量检查工具
安装完成后，可以在扩展面板看到它们的状态。建议同时安装Vetur插件（Vue项目必备）和ESLint Config Helper（辅助ESLint配置）。
提示：如果项目中使用TypeScript，还需安装对应的TS版本插件。React开发者可考虑添加React相关语法支持。
2. Prettier基础配置解析
Prettier的配置非常灵活，可以通过多种方式实现。最推荐的做法是在项目根目录创建.prettierrc文件，这样配置可以随项目代码一起版本控制，确保团队统一。
一个典型的配置示例如下：
{ "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true, "trailingComma": "none", "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "lf" }各参数含义对照表：
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| printWidth | number | 80 | 代码行最大长度 |
| tabWidth | number | 2 | 缩进空格数 |
| useTabs | boolean | false | 使用制表符而非空格 |
| semi | boolean | true | 语句末尾添加分号 |
| singleQuote | boolean | false | 使用单引号替代双引号 |
| trailingComma | string | "es5" | 多行时是否添加尾随逗号 |
| bracketSpacing | boolean | true | 对象字面量括号间添加空格 |
| arrowParens | string | "always" | 箭头函数参数括号规则 |
在VSCode中，你可以通过以下步骤启用Prettier：
- 打开设置（
Ctrl+,） - 搜索"default formatter"
- 为各语言选择Prettier作为默认格式化工具
- 勾选"Editor: Format On Save"选项
3. ESLint集成与规则协调
当Prettier遇到ESLint，可能会产生规则冲突。例如，ESLint可能要求使用双引号而Prettier配置为单引号。解决这种冲突的最佳方案是使用以下两个插件：
eslint-config-prettier：关闭所有与Prettier冲突的ESLint规则eslint-plugin-prettier：将Prettier作为ESLint规则运行
安装命令：
npm install --save-dev eslint-config-prettier eslint-plugin-prettier然后在.eslintrc.js中添加配置：
module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 必须放在最后 ], rules: { // 你的其他规则 } }常见冲突解决方案：
- 引号问题：统一在Prettier配置中设置
singleQuote - 分号问题：在Prettier中配置
semi，ESLint使用semi规则 - 缩进问题：Prettier的
tabWidth应与ESLint的indent规则一致
4. 高级配置与项目适配
对于复杂项目，可能需要更精细的配置。以下是几个实用技巧：
多语言支持配置： 在VSCode的settings.json中添加语言特定设置：
{ "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }Vue项目特殊处理： Vue文件需要Vetur插件配合：
{ "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "prettier": { "semi": false, "singleQuote": true } } }保存时自动修复： 启用ESLint自动修复可以进一步提升效率：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }5. 常见问题排查指南
即使配置正确，仍可能遇到各种问题。以下是几个典型场景的解决方案：
格式化不生效：
- 检查文件是否在格式化排除列表（
prettier.ignorePath） - 确认文件类型对应的格式化程序设置正确
- 查看输出面板（
Ctrl+Shift+U）中的Prettier日志
ESLint与Prettier冲突：
- 确保
eslint-config-prettier正确安装并置于extends数组最后 - 运行
npx eslint --print-config . | npx eslint-config-prettier-check检查冲突 - 在VSCode中检查哪个扩展正在提供格式化服务
性能优化： 对于大型项目，可以添加.prettierignore文件：
node_modules/ dist/ *.min.js6. 团队协作最佳实践
在团队环境中，代码风格统一尤为重要。推荐采用以下工作流：
项目初始化时创建共享配置：
touch .prettierrc .eslintrc.js .editorconfig在
package.json中添加格式化脚本：{ "scripts": { "format": "prettier --write .", "lint": "eslint --fix ." } }设置Git钩子（使用Husky）：
npx husky-init && npm install添加pre-commit钩子：
npx husky add .husky/pre-commit "npm run lint && npm run format"
对于Monorepo项目，可以在根目录配置基础规则，各子项目通过extends继承并覆盖特定规则。
