Prettier 和 ESLint 结合可在 VS Code 中实现代码规范与美观。1. 安装 Prettier 与 ESLint 扩展；2. 项目中安装 eslint、prettier、eslint-config-prettier、eslint-plugin-prettier 依赖；3. 配置 .eslintrc.js 使用 plugin:prettier/recommended，避免规则冲突；4. 创建 .prettierrc 定义格式化选项；5. 在 VS Code 设置中启用 formatOnSave，并指定 Prettier 为默认格式化工具，同时开启 codeActionsOnSave 自动修复 ESLint 问题；6. 推荐在项目级 .vscode/settings.json 中配置，防止影响其他项目；7. 若格式化未生效，检查文件类型识别与默认 formatter 设置，查看日志排查；8. 部分 ESLint 错误无法自动修复需手动处理；9. 确保引入 eslint-config-prettier 以消除规则冲突。配置完成后，保存即格式化，提升开发效率与团队协作一致性。
想在 VS Code 中让代码既规范又美观？Prettier 和 ESLint 结合使用是目前最主流的方案。Prettier 负责代码格式化，ESLint 负责代码质量校验，两者分工明确。配合 VS Code 的保存自动修复功能，可以实现保存即格式化、自动修复问题的效果。
安装必要的扩展和依赖
先确保你在项目中正确安装并配置了 Prettier 和 ESLint。
1. 安装 VS Code 扩展：
- Prettier - Code formatter
- ESLint
这两个扩展可在 VS Code 插件市场中直接搜索安装。
2. 在项目中安装依赖（推荐本地安装）：
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier其中：
- eslint-config-prettier：关闭 ESLint 中与 Prettier 冲突的规则
- eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，有问题会显示在 ESLint 提示中
配置 ESLint 与 Prettier 协同工作
在项目根目录创建或修改 .eslintrc.js 或 .eslintrc.json：
module.exports = { extends: [ "eslint:recommended", "plugin:prettier/recommended" // 启用 Prettier 推荐配置 ], rules: { // 可自定义额外规则 } };
这个配置会自动启用 Prettier，并避免规则冲突。
你也可以单独创建 .prettierrc 文件来定义格式化偏好：
{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2 }设置 VS Code 实现保存时自动格式化
打开 VS Code 设置（Ctrl + ,），搜索 “format on save”，勾选 Editor: Format On Save。
或者在 settings.json 中添加：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }说明：
- defaultFormatter 指定 Prettier 为默认格式化工具
- formatOnSave 保存时自动格式化
- codeActionsOnSave 会触发 ESLint 自动修复可修复的问题
注意：如果项目中有多个 formatter，建议在项目级 .vscode/settings.json 中设置，避免影响其他项目。
处理常见问题
格式化未生效？
检查文件类型是否被识别正确，确认 Prettier 是否设为默认 formatter，查看输出面板中的 ESLint 或 Prettier 日志。
ESLint 报错但无法自动修复？
部分规则（如命名、逻辑错误）不能自动修复，需手动调整。可通过 npx eslint . --fix 尝试批量修复。
Prettier 和 ESLint 规则冲突？
确保已启用 eslint-config-prettier，它会关闭所有与格式相关的 ESLint 规则，避免重复报错。
基本上就这些。配置一次，长期受益。写代码更专注，团队协作也更顺畅。
