VSCode代码检查与格式化：ESLint与Prettier深度集成

正确配置ESLint与Prettier可实现代码质量与风格统一。ESLint检查逻辑错误，Prettier统一代码格式，通过安装eslint-config-prettier和eslint-plugin-prettier避免规则冲突，结合VSCode的保存自动格式化及lint-staged提交前校验，确保团队协作高效、代码规范一致。

在现代前端开发中，代码质量与风格统一至关重要。VSCode 作为主流编辑器，结合 ESLint 与 Prettier 能实现高效的代码检查与格式化。正确集成二者，不仅能提升协作效率，还能减少低级错误。

ESLint 与 Prettier 的角色分工

ESLint 主要负责代码质量检查，比如变量未使用、语法错误、潜在 bug 等。它通过规则集帮助团队遵循一致的编码规范。

Prettier 是代码格式化工具，专注于代码样式：缩进、引号、括号、换行等。它不关心逻辑问题，只确保代码外观统一。

两者功能互补，但默认规则可能冲突。例如 ESLint 要求单引号，而 Prettier 默认双引号。因此需要合理配置，避免互相干扰。

项目级配置：安装与依赖管理

在项目根目录初始化 npm 并安装必要依赖：

eslint-config-prettier 关闭所有与 Prettier 冲突的 ESLint 规则。

eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行，格式错误会在 ESLint 中提示。

创建或更新 .eslintrc.js 配置文件：

添加 .prettierrc 定义格式化偏好：

VSCode 设置：自动保存时格式化

确保 VSCode 使用项目本地的 ESLint 和 Prettier，而非全局版本。安装以下扩展：

集简云

软件集成平台，快速建立企业自动化与智能化

22

查看详情

• ESLint（由 Microsoft 提供）
• Prettier - Code formatter

在 VSCode 的 settings.json 中添加：

这样在保存文件时，ESLint 会自动修复可修复的问题，Prettier 执行格式化。

若项目有多个工作区，eslint.workingDirectories 帮助 VSCode 正确定位 ESLint 配置。

常见问题与最佳实践

有时格式化未生效，可能是默认格式化器未指定。右键编辑器 → “格式化文档” → 选择 Prettier 并设为默认。

避免全局安装 Prettier 或 ESLint，使用项目本地依赖保证团队一致性。

提交前可用 lint-staged 结合 Husky 自动检查修改文件：

这样能防止不符合规范的代码进入仓库。

基本上就这些。配置一次，长期受益。关键是让工具协同工作，而不是对抗。

以上就是VSCode代码检查与格式化：ESLint与Prettier深度集成的详细内容，更多请关注php中文网其它相关文章！