配置Prettier与ESLint协同工作可提升代码质量与团队协作效率。首先安装Prettier和ESLint扩展及依赖，通过.eslintrc.js引入plugin:prettier/recommended避免规则冲突，并在.prettierrc中定义格式化规则；接着在VSCode的settings.json中设置保存时自动格式化与修复，确保编辑器行为一致；最后将配置文件提交版本控制，配合lint、format脚本及Husky+lint-staged实现提交前自动化检查，保障项目级一致性。
在现代开发流程中，保持代码风格统一和质量达标至关重要。VSCode 作为主流编辑器，通过集成代码格式化与质量检查工具，能大幅提升开发效率与协作体验。关键在于合理配置 Prettier、ESLint 等工具，并确保它们协同工作。
1. 核心工具选择与安装
实现高质量代码管理，需结合格式化工具与静态分析工具：
- Prettier：专注于代码格式化，支持 JavaScript、TypeScript、HTML、CSS、JSON 等多种语言，消除代码风格争议。
- ESLint：用于检测代码质量问题与潜在错误，支持自定义规则，常配合 Airbnb 或 Standard 风格指南使用。
- 在 VSCode 中安装对应扩展：Prettier - Code formatter 和 ESLint，然后在项目根目录初始化配置文件。
项目初始化命令示例：
npm init -y npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
2. 配置 ESLint 与 Prettier 协同工作
避免格式化与 linting 规则冲突，需正确整合两者：
- 创建 .eslintrc.js 文件，启用
plugin:prettier/recommended，它会关闭 ESLint 中与 Prettier 冲突的规则。 - 示例配置：
module.exports = {
extends: [
'eslint:recommended',
'plugin:prettier/recommended' // 启用 Prettier 并自动修复
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
env: {
node: true,
es6: true
}
};- 添加 .prettierrc 定制格式规则，如：
{
"semi": false,
"singleQuote": true,
"tabWidth": 2
}3. VSCode 编辑器设置自动执行
让格式化与检查在保存时自动运行，提升开发流畅性：
- 打开 VSCode 设置（settings.json），添加以下配置：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "typescript"]
}- 这样在保存文件时，ESLint 会先修复可自动处理的问题，Prettier 再统一格式化代码。
- 若使用 TypeScript，确保安装
@typescript-eslint/parser和相关插件以获得完整支持。
4. 项目级一致性保障
团队协作中，应确保所有成员使用相同规则：
- 将 .eslintrc.js、.prettierrc、.editorconfig 提交到版本控制。
- 添加 npm 脚本，便于统一执行检查：
"scripts": {
"lint": "eslint src/**/*.{js,ts}",
"format": "prettier --write src/**/*.{js,ts}"
}- 结合 Husky 与 lint-staged，在提交代码前自动校验与格式化，防止不合规代码入库。
基本上就这些。配置一次，长期受益。关键是让工具无缝融入日常编码，而不是成为负担。
