团队协作必备：手把手教你配置VSCode的Prettier与ESLint，告别代码风格争论
团队协作必备：手把手教你配置VSCode的Prettier与ESLint，告别代码风格争论
在多人协作的前端项目中，代码风格一致性往往成为团队效率的隐形杀手。当你在Pull Request中看到同事用双引号而你习惯单引号，当缩进空格数引发无休止的争论，当每次代码评审都沦为格式修正大会——是时候用工程化手段终结这些低效讨论了。
1. 环境准备：构建标准化开发基础
1.1 初始化项目配置
在项目根目录创建.editorconfig文件，这是跨编辑器的基础约定：
root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true提示：虽然VSCode能直接读取这些配置，但安装EditorConfig插件可以获得实时反馈
1.2 核心工具安装
通过npm安装必要依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier这里包含三个关键组件：
- ESLint：代码质量检查工具
- Prettier：代码格式化工具
- 配置插件：解决两者规则冲突
2. 配置ESLint：定义代码质量红线
2.1 创建ESLint配置文件
新建.eslintrc.js文件，推荐使用JavaScript格式以便添加注释：
module.exports = { env: { browser: true, es2021: true }, extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 必须放在最后 ], parserOptions: { ecmaVersion: 12, sourceType: 'module' }, rules: { 'no-console': 'warn', 'eqeqeq': ['error', 'always'] // 更多自定义规则... } };2.2 配置保存时自动修复
在VSCode设置中（settings.json）添加：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"] }3. 集成Prettier：自动化格式处理
3.1 创建Prettier配置文件
新建.prettierrc文件定义团队风格：
{ "semi": false, "singleQuote": true, "printWidth": 100, "trailingComma": "none", "bracketSpacing": true }3.2 配置快捷键与自动格式化
在VSCode快捷键设置中绑定：
[ { "key": "ctrl+alt+f", "command": "editor.action.formatDocument", "when": "editorTextFocus" } ]4. 团队协作方案：确保配置同步
4.1 版本控制配置
在.gitignore中确保不忽略配置文件：
# 保留配置文件 !.eslintrc.js !.prettierrc !.editorconfig4.2 添加初始化脚本
在package.json中添加：
"scripts": { "setup": "npm install && npm run lint:fix", "lint": "eslint .", "lint:fix": "eslint . --fix" }5. 高级技巧：处理特殊场景
5.1 覆盖特定文件规则
在项目根目录创建.eslintignore：
**/*.min.js dist/5.2 多技术栈配置方案
对于混合项目，可以扩展配置：
// .eslintrc.js module.exports = { overrides: [ { files: ["**/*.ts"], extends: ["plugin:@typescript-eslint/recommended"] } ] }6. 常见问题排查指南
当遇到格式化不生效时，按以下步骤检查：
- 确认VSCode已安装ESLint和Prettier插件
- 检查右下角状态栏显示的格式化程序
- 查看Output面板中ESLint的输出日志
- 验证配置文件是否在项目根目录
注意：如果同时安装了多个格式化插件，需在文件类型上右键选择默认格式化程序