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. 在项目中安装依赖（推荐本地安装）：

其中：

• eslint-config-prettier：关闭 ESLint 中与 Prettier 冲突的规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，有问题会显示在 ESLint 提示中

配置 ESLint 与 Prettier 协同工作

在项目根目录创建或修改 .eslintrc.js 或 .eslintrc.json：

这个配置会自动启用 Prettier，并避免规则冲突。

Cutout.Pro抠图

AI批量抠图去背景

66

查看详情

你也可以单独创建 .prettierrc 文件来定义格式化偏好：

设置 VS Code 实现保存时自动格式化

打开 VS Code 设置（Ctrl + ,），搜索 “format on save”，勾选 Editor: Format On Save。

或者在 settings.json 中添加：

说明：

• defaultFormatter 指定 Prettier 为默认格式化工具
• formatOnSave 保存时自动格式化
• codeActionsOnSave 会触发 ESLint 自动修复可修复的问题

注意：如果项目中有多个 formatter，建议在项目级 .vscode/settings.json 中设置，避免影响其他项目。

处理常见问题

格式化未生效？
检查文件类型是否被识别正确，确认 Prettier 是否设为默认 formatter，查看输出面板中的 ESLint 或 Prettier 日志。

ESLint 报错但无法自动修复？
部分规则（如命名、逻辑错误）不能自动修复，需手动调整。可通过 npx eslint . --fix 尝试批量修复。

Prettier 和 ESLint 规则冲突？
确保已启用 eslint-config-prettier，它会关闭所有与格式相关的 ESLint 规则，避免重复报错。

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

以上就是Prettier + ESLint：在VS Code中实现代码的自动格式化与校验的详细内容，更多请关注php中文网其它相关文章！