前端代码规范自动化：ESLint与Prettier实战指南

1. 为什么需要前端代码规范自动化刚接手一个遗留项目时最头疼的莫过于代码风格混乱——有人用双引号有人用单引号缩进有2空格有4空格未使用的变量随处可见。更糟的是这些不一致的代码在每次提交时都被带入代码库导致git blame时看到的修改全是格式调整。这种状况会显著降低团队协作效率而手动检查又容易遗漏。我在多个项目中验证过的解决方案是用ESLint做代码质量检查Prettier处理代码格式化再通过Git钩子工具Husky和lint-staged实现提交时自动校验。这套组合拳能确保代码提交前自动格式化错误语法和潜在问题被拦截团队共用同一套规范配置历史代码可以渐进式规范2. 工具链深度解析2.1 ESLint代码质量的守门员安装核心包和常用规则集npm install eslint typescript-eslint/parser typescript-eslint/eslint-plugin -D推荐的基础配置.eslintrc.jsmodule.exports { parser: typescript-eslint/parser, extends: [ eslint:recommended, plugin:typescript-eslint/recommended, prettier // 必须放在最后以覆盖冲突规则 ], rules: { typescript-eslint/no-unused-vars: [warn, { argsIgnorePattern: ^_ }], no-console: process.env.NODE_ENV production ? error : off } }关键经验TypeScript项目必须使用typescript-eslint解析器普通ES6项目可用默认解析器。规则配置建议从松到严逐步增强。2.2 Prettier风格统一的强制执行者与ESLint配合需要特别注意规则冲突处理npm install prettier eslint-config-prettier eslint-plugin-prettier -D.prettierrc配置示例{ printWidth: 100, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: es5 }避坑指南必须确保eslint-config-prettier在extends数组最后位置否则会和ESLint的格式规则冲突。2.3 Husky lint-stagedGit钩子自动化安装核心依赖npm install husky lint-staged -Dpackage.json配置示例{ scripts: { prepare: husky install, lint: eslint --ext .js,.ts src, format: prettier --write src }, lint-staged: { *.{js,ts}: [ eslint --fix, prettier --write ] } }初始化Husky钩子npx husky add .husky/pre-commit npx lint-staged3. 高级配置技巧3.1 差异化配置策略多项目场景推荐使用共享配置// eslint-config-custom/index.js module.exports { extends: [prettier], rules: { // 自定义规则 } }通过npm link或私有仓库发布后各项目只需安装并简单继承// 项目中的.eslintrc.js module.exports { extends: [custom], // 项目特有规则 }3.2 性能优化方案大型项目需要优化lint速度对TypeScript项目启用ESLint缓存// .eslintrc.js module.exports { cache: true, cacheLocation: node_modules/.cache/eslint }lint-staged中限制文件范围{ lint-staged: { src/**/*.{js,ts}: [eslint --fix] } }3.3 渐进式迁移策略对存量项目推荐分阶段实施先配置Prettier自动格式化新代码开启少量关键ESLint规则如no-unused-vars逐步增加规则严格度最后对历史代码批量格式化4. 常见问题排查指南4.1 钩子未触发问题现象提交代码时没有执行lint检查 排查步骤确认.husky目录存在pre-commit文件检查文件权限需可执行权限运行git config core.hooksPath确认指向.husky4.2 规则冲突处理典型报错Delete␍prettier/prettier 解决方案确保.editorconfig配置一致[*] end_of_line lf在.prettierrc添加{ endOfLine: auto }4.3 性能问题优化当lint过程超过10秒时检查是否对node_modules进行了lint确认ESLint缓存已开启考虑使用eslint --cache选项5. 工程化扩展方案5.1 结合CI的增强校验在GitHub Actions中添加校验步骤name: Lint on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkoutv2 - uses: actions/setup-nodev2 - run: npm ci - run: npm run lint - run: npm run build5.2 自定义规则开发针对项目特殊需求编写规则示例// rules/no-relative-import.js module.exports { meta: { type: problem, docs: { description: 禁止跨模块相对路径引用 } }, create(context) { return { ImportDeclaration(node) { if (node.source.value.startsWith(../../)) { context.report({ node, message: 请使用绝对路径导入其他模块代码 }); } } }; } };这套工具链经过多个大型项目验证实施后代码规范问题减少约80%代码评审时间缩短50%。关键在于根据团队实际情况调整规则严格度既保证代码质量又不影响开发效率。