# 代码质量

EditorConfig 是地基，Prettier 是自动装修队，ESLint 是质检员，三者协同构建标准化、工业级的代码生产流水线。

工作流程：

EditorConfig (opens new window) 确保基础格式 → Prettier (opens new window) 自动美化代码 → ESLint (opens new window) 检查逻辑质量
通常搭配 husky (opens new window) + lint-staged (opens new window) 在 Git 提交前自动执行格式化与检查

避免冲突：

需关闭 ESLint 中与 Prettier 冲突的格式规则（通过 eslint-config-prettier (opens new window)）
典型分工：Prettier 管格式，ESLint 管代码质量

开发体验优化：

VS Code 安装对应插件后，可实现保存时自动格式化（Prettier） + 实时错误提示（ESLint）

# 一、EditorConfig

EditorConfig (opens new window) 通过标准化配置文件实现跨编辑器的基础代码风格一致性。

定义基础代码风格规则（如缩进 2 空格、UTF-8 编码、换行符类型等）
通过 .editorconfig 文件配置规则，被主流编辑器原生支持
不涉及代码逻辑或复杂格式化，仅处理基础格式

# .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf

# 二、Prettier

Prettier (opens new window) 采用强约定式代码格式化方案，通过 AST 解析重构技术实施标准化代码风格。

自动根据配置将代码格式化为统一风格
支持多种语言（JS/TS/CSS/HTML/Markdown 等）
通过 .prettierrc (opens new window) 文件配置规则，与编辑器插件配合实现保存时自动格式化
专注外观一致性，不检查代码质量

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

# 三、ESLint

ESLint (opens new window) 是专业的 ECMAScript/JavaScript 静态代码分析工具，具备精准的代码模式识别与质量预警能力。

通过 .eslintrc.js (opens new window) 等配置文件定义规则
检查代码逻辑问题（如变量作用域、类型错误）
支持自定义或扩展规则（如 Airbnb (opens new window) 规范、TypeScript 规则）
可自动修复部分问题（需通过 --fix (opens new window) 或编辑器插件）

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  rules: {
    'no-console': 'error',
    'react-hooks/rules-of-hooks': 'error'
  }
}

# Reference