首先安装VSCode的ESLint和Prettier扩展，并在项目中本地安装eslint、prettier及相关插件；接着通过.eslintrc.js配置extends为'eslint:recommended'和'plugin:prettier/recommended'，确保ESLint与Prettier协同工作；然后创建.prettierrc文件定义semi、singleQuote、trailingComma等格式规则；再在.vscode/settings.json中设置editor.formatOnSave为true，并启用codeActionsOnSave以实现保存时自动修复；最后通过.eslintignore和.prettierignore排除node_modules、dist等无需检查的文件；该方案可实现保存时自动格式化与错误修复，保障团队代码风格统一与质量提升。
在现代前端开发中，保持代码风格统一和高质量是团队协作的关键。通过集成 eslint 与 prettier 到 vscode，可以实现保存时自动格式化、语法检查、错误提示等能力，大幅提升开发效率和代码可维护性。下面是一套实用且被广泛采用的配置方案。
安装必要的扩展与依赖
要让 ESLint 和 Prettier 协同工作，首先需要在项目中安装相关工具，并在 VSCode 中启用对应插件。
1. 安装 VSCode 扩展：
- ESLint（由 Microsoft 提供）
- Prettier - Code formatter
这两个扩展可在 VSCode 扩展市场搜索安装。安装后，编辑器能实时显示 lint 错误并支持 Prettier 格式化。
2. 项目本地安装依赖：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier推荐将这些工具作为开发依赖安装到项目中，避免全局版本不一致带来的问题。
配置 ESLint 与 Prettier 协同工作
默认情况下，ESLint 和 Prettier 可能会因规则冲突而报错。使用 eslint-config-prettier 禁用所有与格式化相关的 ESLint 规则，再通过 eslint-plugin-prettier 把 Prettier 作为 ESLint 的“规则”执行，确保二者统一。
创建或更新项目根目录下的 .eslintrc.js 文件：
module.exports = {extends: [
'eslint:recommended',
'plugin:prettier/recommended' // 启用 Prettier 推荐配置
],
env: {
browser: true,
es2021: true,
},
parserOptions: {
ecmaVersion: 12,
},
};
该配置启用了 ESLint 推荐规则，并通过 plugin:prettier/recommended 自动整合 Prettier，避免规则冲突。
同时，在项目根目录创建 .prettierrc 文件定义格式偏好：
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
配置 VSCode 实现保存时自动修复
为了让编辑器在保存文件时自动格式化并修复可修复的 ESLint 问题，需调整 VSCode 设置。
打开 VSCode 设置（Ctrl + ,），搜索 format on save，勾选 Editor: Format On Save。
或者在 .vscode/settings.json 中添加：
{"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样，保存文件时会优先由 ESLint 修复问题（如引号、分号等），再交由 Prettier 进行结构化格式化，流程清晰且无冲突。
忽略不需要检查的文件
某些文件如构建产物、第三方库不应参与 lint 与格式化。可通过以下文件排除：
- .eslintignore：指定 ESLint 忽略的路径
- .prettierignore：指定 Prettier 忽略的路径
示例内容：
node_modulesdist
build
*.min.js
基本上就这些。这套方案已在多个团队项目中验证，能有效保障代码质量与风格统一，配置一次，长期受益。
