Prettier + ESLint：在VS Code中实现代码的自动格式化与校验_网络技术

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 规则，避免重复报错。

基本上就这些。配置一次，长期受益。写代码更专注，团队协作也更顺畅。

# vs code # vscode # js # json # npm # 工具 # ai # 代码规范 # 常见问题 # format

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】