代码质量保证方案_ESLint与Prettier的配合使用

ESLint负责代码质量检查，Prettier专注格式化，通过eslint-config-prettier避免规则冲突；2. 安装相关依赖并配置.eslintrc.js和.prettierrc文件；3. 在VS Code中启用保存时自动格式化；4. 结合husky与lint-staged在提交前校验并修复代码，确保规范执行。

在现代前端开发中，保持代码的一致性和可维护性是团队协作的关键。ESLint 和 Prettier 是两个广泛使用的工具：ESLint 负责检测代码中的潜在问题和风格违规，Prettier 则专注于代码格式化。将它们配合使用，可以在保证代码质量的同时统一代码风格。

1. 工具分工明确

为了高效协作，需要明确 ESLint 与 Prettier 的职责边界：

• ESLint：检查语法错误、潜在 bug、代码逻辑问题以及部分代码风格（如变量命名、禁止未使用变量等）
• Prettier：统一格式化代码结构，包括缩进、引号、括号、换行、分号等视觉层面的样式

若两者在格式规则上冲突，会导致格式混乱或报错。因此，推荐使用 eslint-config-prettier 插件来关闭 ESLint 中与 Prettier 冲突的规则。

2. 安装与配置

在项目中集成 ESLint 与 Prettier 的基本步骤如下：

1. 安装依赖：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

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

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 启用 Prettier 推荐配置并自动修复
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  env: {
    browser: true,
    es2021: true
  }
};

3. 添加 .prettierrc 文件定义格式规则：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

4. 添加 .prettierignore 忽略不需要格式化的文件：

node_modules
dist
*.min.js

3. 编辑器集成

为了让开发者在编写代码时自动应用规则，建议在编辑器中配置保存时自动格式化。

以 VS Code 为例：

腾讯Effidit

腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验

65

查看详情

• 安装 ESLint 和 Prettier 扩展
• 在项目根目录的 .vscode/settings.json 中添加：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样保存文件时会优先通过 ESLint 自动修复可修复的问题，并由 Prettier 统一格式化。

4. 与 Git 集成确保提交质量

防止不符合规范的代码进入仓库，可通过 husky + lint-staged 在提交前校验：

1. 安装：

npm install --save-dev husky lint-staged

2. 启用 husky 并设置钩子：

npx husky init

3. 配置 package.json：

"lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

4. 修改 .husky/pre-commit：

#!/bin/sh
npx lint-staged

这样每次 git commit 时都会对暂存文件执行 ESLint 修复和 Prettier 格式化，不通过则阻止提交。

基本上就这些。合理配置 ESLint 与 Prettier，能显著提升团队开发效率和代码一致性，减少代码评审中的风格争议。关键是明确分工、统一配置、自动化执行。不复杂但容易忽略细节。

以上就是代码质量保证方案_ESLint与Prettier的配合使用的详细内容，更多请关注php中文网其它相关文章！