集成ESLint与Prettier的VSCode代码质量保障方案

首先安装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. 项目本地安装依赖：

推荐将这些工具作为开发依赖安装到项目中，避免全局版本不一致带来的问题。

配置 ESLint 与 Prettier 协同工作

默认情况下，ESLint 和 Prettier 可能会因规则冲突而报错。使用 eslint-config-prettier 禁用所有与格式化相关的 ESLint 规则，再通过 eslint-plugin-prettier 把 Prettier 作为 ESLint 的“规则”执行，确保二者统一。

创建或更新项目根目录下的 .eslintrc.js 文件：

该配置启用了 ESLint 推荐规则，并通过 plugin:prettier/recommended 自动整合 Prettier，避免规则冲突。

同时，在项目根目录创建 .prettierrc 文件定义格式偏好：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

配置 VSCode 实现保存时自动修复

为了让编辑器在保存文件时自动格式化并修复可修复的 ESLint 问题，需调整 VSCode 设置。

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

或者在 .vscode/settings.json 中添加：

这样，保存文件时会优先由 ESLint 修复问题（如引号、分号等），再交由 Prettier 进行结构化格式化，流程清晰且无冲突。

忽略不需要检查的文件

某些文件如构建产物、第三方库不应参与 lint 与格式化。可通过以下文件排除：

• .eslintignore：指定 ESLint 忽略的路径
• .prettierignore：指定 Prettier 忽略的路径

示例内容：

基本上就这些。这套方案已在多个团队项目中验证，能有效保障代码质量与风格统一，配置一次，长期受益。

以上就是集成ESLint与Prettier的VSCode代码质量保障方案的详细内容，更多请关注php中文网其它相关文章！