第五篇：《代码质量体系：ESLint、Prettier、TypeScript 与 Git Hooks》

代码质量不是靠“自觉”来保障的而是靠体系化的工具链来兜底的。一个成熟的工程化项目代码在进入代码库之前至少要经过三层质量防线开发时的实时检查、提交时的自动格式化与 Lint、CI 时的全面验证。本文系统讲解现代前端代码质量体系的核心工具——ESLint代码检查、Prettier代码格式化、TypeScript类型安全以及 Husky lint-stagedGit Hooks 自动化并给出团队级配置的最佳实践帮你构建一道从“编辑器”到“代码库”的完整质量防线。一、代码质量的三层防线代码质量保障不是单一工具能完成的而是需要多个工具在软件交付的不同阶段协同工作。完整的代码质量体系通常包含三个层次二、ESLint代码的“语法警察”ESLint 早已成为现代前端工程化中不可或缺的一环。它不仅仅是一个代码风格检查工具更是一位不知疲倦的“代码质量守护者”通过静态分析在编码阶段就发现潜在的错误和不规范的写法。2.1 ESLint 的工作原理ESLint 的工作流程可以概括为三个核心步骤解析将源代码字符串解析成抽象语法树AST。AST 是代码的结构化表示每个节点都代表了代码中的一个结构如变量声明、函数调用、if 语句等。遍历ESLint 会“深度优先”地遍历这棵 AST访问每一个节点。规则应用在遍历过程中ESLint 会将配置的规则应用到对应的 AST 节点上。每条规则都是一个监听特定节点类型的“监听器”。ESLint 的强大之处在于其 基于 AST 的插件化架构——无论是官方规则还是社区插件它们的核心都是对 AST 节点的分析和操作。2.2 ESLint 9 的扁平化配置Flat Config从 ESLint 9 开始配置方式从传统的 .eslintrc.* 转向了新的 扁平化配置Flat Config 配置文件为 eslint.config.js 或 eslint.config.mjs。扁平化配置的核心变化采用纯 JavaScript 数组对象逻辑更扁平加载更快速对 ESM 原生支持更好不再支持 .eslintignore改用 ignores 字段ESLint 9 Flat Config 示例// eslint.config.jsimportjsfromeslint/jsimporttsfromtypescript-eslint/eslint-pluginimporttsParserfromtypescript-eslint/parserimportreactfromeslint-plugin-reactexportdefault[// 1. 忽略文件{ignores:[dist/**,node_modules/**,*.config.js]},// 2. 基础推荐规则js.configs.recommended,// 3. TypeScript 配置{files:[**/*.ts,**/*.tsx],languageOptions:{parser:tsParser,parserOptions:{project:./tsconfig.json}},plugins:{typescript-eslint:ts},rules:{...ts.configs.recommended.rules,typescript-eslint/no-explicit-any:warn,typescript-eslint/explicit-function-return-type:off}},// 4. React 配置{files:[**/*.jsx,**/*.tsx],plugins:{react},rules:{...react.configs.recommended.rules,react/react-in-jsx-scope:off}}]2.3 常用规则集三、Prettier代码格式化的“独裁者”Prettier 是一个“有主见”的代码格式化工具。它的核心理念是 “消灭代码风格争论” ——通过自动格式化让团队不再需要讨论“分号要不要加”“括号换行还是不换行”这类琐碎问题。3.1 Prettier 的配置// .prettierrc.jsmodule.exports{semi:true,// 语句末尾加分号singleQuote:true,// 使用单引号tabWidth:2,// 缩进 2 个空格trailingComma:es5,// 多行时末尾加逗号ES5 兼容printWidth:100,// 每行最大字符数bracketSpacing:true,// 对象括号内加空格jsxSingleQuote:false,// JSX 中使用双引号arrowParens:avoid// 箭头函数单个参数不加括号}3.2 ESLint Prettier 的协作ESLint 和 Prettier 的职责需要明确分工Prettier负责代码格式缩进、引号、换行、空格ESLint负责代码质量未使用变量、危险语法、类型问题为了避免两者冲突需要安装 eslint-config-prettiernpminstall--save-dev eslint-config-prettier javascript // eslint.config.js - 确保 prettier 配置放在最后exportdefault[//... 其他配置{rules:{// 关闭与 Prettier 冲突的规则...prettierConfig.rules}}]四、TypeScript工程化的“类型安全基石”2025 年TypeScript 已经在实质上“赢了”。40% 的受访者如今完全使用 TypeScript 开发2024 年为 34%2022 年为 28%而仅使用纯 JavaScript 的受访者仅占 6%。420 万个 GitHub 仓库在使用 TypeScript。4.1 TypeScript 的工程化价值TypeScript 的工程化价值远超“防止报错”4.2 TypeScript 工程化配置json// tsconfig.json{“compilerOptions”: {“target”: “ES2020”,“module”: “ESNext”,“lib”: [“ES2020”, “DOM”, “DOM.Iterable”],“strict”: true,“esModuleInterop”: true,“skipLibCheck”: true,“forceConsistentCasingInFileNames”: true,“resolveJsonModule”: true,“isolatedModules”: true,“noEmit”: true,“jsx”: “react-jsx”,“moduleResolution”: “bundler”,“allowImportingTsExtensions”: true,“noUnusedLocals”: true,“noUnusedParameters”: true,“noFallthroughCasesInSwitch”: true},“include”: [“src/**/*”],“exclude”: [“node_modules”, “dist”]}五、Git Hooks提交时的自动质量门禁ESLint 和 Prettier 在编辑器中可以实时提示但无法强制团队成员使用。Git Hooks 在代码提交时自动运行检查确保不符合规范的代码无法进入代码库。5.1 HuskyGit Hooks 管理工具Husky 让 Git Hooks 的配置变得极其简单。它通过 prepare 脚本在 npm install 时自动安装 Git Hooks。# 安装 Huskynpminstall--save-dev husky# 初始化 Husky创建 .husky 目录npx husky init5.2 lint-staged只检查暂存文件lint-staged 只对 Git 暂存区中的文件进行检查和格式化避免了每次提交都对整个项目进行 linting显著提升了执行效率。json// package.json{“lint-staged”: {“.{js,jsx,ts,tsx}: [“eslint --fix”,“prettier --write”],.{css,scss,json,md}”: [“prettier --write”]}}5.3 完整的 Git Hooks 配置# 创建 pre-commit hookechonpx lint-staged.husky/pre-commit# 创建 commit-msg hook验证 commit message 格式echonpx commitlint --edit \$1.husky/commit-msg javascript // commitlint.config.js module.exports{extends:[commitlint/config-conventional]}Commit Message 规范Conventional Commitstext():类型feat 新功能fix 修复 Bugdocs 文档更新style 代码格式不影响代码运行refactor 重构perf 性能优化test 测试相关chore 构建/工具链相关六、团队级配置管理为了保证团队内所有项目的代码风格统一最佳实践是创建一个内部的共享配置包例如 my-company/eslint-config。6.1 共享配置包结构textmy-company/eslint-config/├── index.js # 主配置├── react.js # React 项目配置├── vue.js # Vue 项目配置├── node.js # Node.js 项目配置└── package.json6.2 在项目中使用共享配置// eslint.config.jsimportmyCompanyConfigfrommy-company/eslint-configexportdefault[...myCompanyConfig,// 项目特定覆盖{rules:{no-console:off// 该项目允许使用 console}}]七、小结完整的代码质量体系是一套从“编辑器”到“代码库”的多层防线ESLint第一道防线 基于 AST 的代码质量检查ESLint 9 采用扁平化配置。Prettier辅助防线 自动格式化代码消灭风格争论。TypeScript类型防线 编译时类型检查2025 年 40% 的开发者完全使用 TypeScript。Husky lint-staged提交防线 在 Git commit 时自动运行检查和格式化只检查暂存文件效率与质量兼得。Commitlint提交信息防线 规范 Commit Message便于变更追溯和自动化发版。团队级配置封装共享的 ESLint/Prettier 配置包确保团队内所有项目风格统一。