📌 前端项目的代码质量管理🎯 代码质量管理最佳实践：ESLint + Prettier 在前端项目中，保持良好的代码

🎯 代码质量管理最佳实践：ESLint + Prettier

在前端项目中，保持良好的代码质量是至关重要的，而最佳实践通常是结合 ESLint 和 Prettier 来共同实现代码质量管理。

🔎 ESLint vs Prettier

1. ESLint（代码检查与修复）

ESLint 是一个 代码检查和修复工具，它可以帮助我们找出并修复代码中的问题，如：

🛠 语法错误（如变量未定义、未使用变量、错误的操作符等）
🌟 代码风格问题（如是否使用分号、缩进方式、引号风格等）
🧐 最佳实践（如避免 console.log、使用 === 而不是 ==、避免隐式全局变量等）
🔒 安全问题（如防止 XSS、SQL 注入等）

2. Prettier（代码格式化）

Prettier 是一个 代码格式化工具，它关注代码的美观性和可读性，主要用于：

🎨 统一代码风格（例如：单引号 vs 双引号、缩进空格 vs tab、行尾分号等）
📝 格式化代码（如调整换行、对齐对象属性、格式化 HTML/CSS/JSX/TS 代码等）
🌈 保证代码一致性，减少团队成员因代码风格问题而发生的争论

3. ESLint + Prettier 配合使用

实际上，仅使用 ESLint 也可以实现代码质量检查和修复，但 ESLint 的格式化能力较弱，而 Prettier 经过专门的格式化规则研究，使代码更加整洁易读。因此，最佳实践是：

eslint --fix && prettier --write

这样可以先用 ESLint 修复代码质量问题，再用 Prettier 进行格式化。

🚫 Prettier 无法修复的 ESLint 规则

虽然 Prettier 处理格式化问题非常强大，但它不会修改代码逻辑，因此以下 ESLint 规则 Prettier 无法修复：

no-unused-vars：禁止未使用的变量，Prettier 无法删除无用变量。
no-undef：禁止使用未定义的变量，Prettier 不能修复此问题。
eqeqeq：要求使用 === 或 !==，避免 == 和 !=，Prettier 不会自动更改。
no-implicit-globals：禁止隐式全局变量，Prettier 不能修复。
no-console：禁止 console.log，Prettier 不会删除 console 语句。
consistent-return：要求函数具有一致的返回值，Prettier 无法修复不一致的 return。
no-duplicate-imports：禁止重复导入，Prettier 不会删除重复的 import 语句。
no-alert：禁止使用 alert()、confirm()、prompt()，Prettier 无法删除这些调用。

总结：Prettier 只能修复代码格式相关的问题，而涉及代码逻辑、最佳实践和安全问题时，必须依靠 ESLint。

⚙️ ESLint 关键配置解析

为了让 ESLint 更好地工作，我们需要关注以下几个关键配置：

1. rules（规则集）

规则可以分为 错误检查（error checking）和 代码风格（stylistic issues）。

规则格式如下：

{
  "rules": {
    "no-unused-vars": "error", // 禁止未使用的变量
    "eqeqeq": "warn", // 强制使用 ===
    "semi": ["error", "always"] // 强制使用分号
  }
}

2. extends（继承规则集）

继承官方或社区的规则，减少手写规则的工作量。

例如：

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

3. parser & parserOptions（解析器）

parser: 配置解析器，如 @babel/eslint-parser（解析 ES6+ 语法）或 @typescript-eslint/parser（解析 TypeScript）。

parserOptions: 指定 JavaScript 版本、模块化等。

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  }
}

4. plugins（插件）

扩展 ESLint 的能力，例如 React、Vue、TypeScript。

例如：

{
  "plugins": ["react", "@typescript-eslint"]
}

📚 ESLint 常见规则分类

1. 通用规则

no-unused-vars：禁止未使用的变量
eqeqeq：强制使用 ===
no-console：禁止 console.log

2. React 相关

react/jsx-uses-react：防止 React 变量未使用（React 17+ 可忽略）
react/jsx-no-undef：JSX 组件必须已定义

3. Vue 相关

vue/no-unused-components：禁止未使用的组件
vue/attribute-hyphenation：HTML 属性强制使用短横线命名

4. TypeScript 相关

@typescript-eslint/no-unused-vars：禁止未使用的变量
@typescript-eslint/explicit-module-boundary-types：要求导出函数必须声明返回值类型

5. 安全相关

no-eval：禁止使用 eval()
no-implied-eval：禁止使用隐式 eval()
security/detect-object-injection：防止对象注入攻击

🔒 最佳实践：husky + lint-staged（Git Hook 代码质量管理）

为了在代码提交前确保代码质量，通常会使用 husky 和 lint-staged。

1. husky（Git Hook 管理工具）

可以在 pre-commit、pre-push 等阶段执行代码检查。
安装：
```
npx husky-init && npm install
```

2. lint-staged（仅检查修改的文件）

避免 ESLint 运行整个项目，提高效率。

配置 package.json：

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

🏁 总结

ESLint 负责代码质量检查，Prettier 负责代码格式化。
结合 eslint --fix 和 prettier --write 实现代码质量自动修复。
使用 husky + lint-staged 在 Git Hook 中执行代码检查，确保提交代码质量。
通过 extends、parser、plugins 和 rules 进行合理的 ESLint 配置。

这样可以保持代码风格统一，提高代码可维护性！🚀