前端代码规范：husky+ lint-staged+pre-commit

工具介绍

这些配置文件共同构成了一个现代前端项目（通常是基于 Node.js/Git 的项目）中的代码质量和提交规范体系。它们各自负责不同的职能，并通过 Git Hooks 相互协作。

工具安装

npm install -D husky lint-staged @commitlint/cli @commitlint/config-conventional

执行 husky install 初始化创建 .husky 目录。

相关配置

配置文件	负责工具	作用/职能	所属 Git Hook	关系
.husky/ 目录	Husky	管理和激活 Git Hooks。它是整个流程的启动器。	全部 hooks	驱动者：定义了何时运行 lint-staged 和 commitlint。
.lintstagedrc.json	lint-staged	定义提交前需要运行哪些命令。它只对“暂存区”的文件生效。	pre-commit	执行者：接收 Husky 的指令，运行 Linters/Formatters。
.eslintrc.json	ESLint	定义 JavaScript/TypeScript 代码的校验规则。	pre-commit (通过 lint-staged)	规则制定者：为 lint-staged 中调用的 eslint 提供校验标准。
.commitlintrc.json	Commitlint	定义 Git 提交信息的校验规则。	commit-msg	规范制定者：为 commit-msg Hook 中调用的 commitlint 提供校验标准。

详细关系与流程

整个流程通常围绕两个核心的 Git Hooks 运行：pre-commit (提交前) 和 commit-msg (提交信息生成后)。

流程一：代码校验与格式化 (pre-commit)

这个流程保证只有符合规范的代码才能被提交。

1. 用户操作： 开发者修改文件并执行 git commit。
2. Husky 启动 (.husky/pre-commit): Git 触发 pre-commit Hook，Husky 执行其中定义的命令，通常是 npx lint-staged 或 npm run lint:staged。
3. lint-staged 接管 (.lintstagedrc.json):
   • lint-staged 读取 .lintstagedrc.json 配置文件。
   • 它根据配置（例如："*.{js,ts}": ["eslint --fix"]）找出所有已暂存（staged）的 JS/TS 文件。
   • 它针对这些文件执行相应的命令 (eslint --fix)。
4. ESLint 执行 (.eslintrc.json):
   • ESLint 运行时，它会读取 .eslintrc.json，根据其中的规则（如禁止使用 var、要求使用驼峰命名法等）对代码进行检查和修复。
5. 结果： 如果 ESLint 发现无法自动修复的错误，lint-staged 脚本会失败，Commit 也会失败。如果成功，代码被格式化和修复，并最终完成提交。

流程二：提交信息规范检查 (commit-msg)

这个流程保证 Commit 信息符合团队或项目的规范。

1. 用户操作： 开发者提交代码（Commit message 已经编写）。
2. Husky 启动 (.husky/commit-msg): Git 触发 commit-msg Hook，Husky 执行其中定义的命令，通常是 npx commitlint --edit $1。
3. Commitlint 接管 (.commitlintrc.json):
   • commitlint 读取 .commitlintrc.json 配置文件。
   • 它根据配置（例如：要求 Commit type 必须是 fix, feat, docs 之一）来校验用户输入的 Commit message。
4. 结果： 如果 Commit message 不符合规范，Commitlint 脚本会失败，Commit 也会被中断，用户必须修改 Commit 信息才能继续。

总结：谁调用谁

文件	被谁调用/读取	目的
.husky/	被 Git 引擎调用	启动整个流程
.lintstagedrc.json	被 Husky 调用的 lint-staged 工具读取	决定运行哪些 Linters
.eslintrc.json	被 lint-staged 调用的 ESLint 工具读取	提供代码规则
.commitlintrc.json	被 Husky 调用的 commitlint 工具读取	提供 Commit 规则

配置文件示例

.husky/commit-msg

#!/bin/sh
npx --no-install commitlint --edit "$1"

.husky/pre-commit

#!/bin/sh
npx lint-staged

.lintstagedrc.json

{"*.(js|jsx|css)": ["eslint --fix"]
}

.commitlintrc.json

{"extends": ["@commitlint/config-conventional"]
}

.eslintrc.json 和 .eslintignore

可根据项目情况和开发者习惯配置。

.eslintrc.json

{"env": {"browser": true,"es6": true,"mocha": true,"jest": true,"node": true},"globals": {"dashjs": true,"WebKitMediaSource": true,"MediaSource": true,"WebKitMediaKeys": true,"MSMediaKeys": true,"MediaKeys": true},"parser": "babel-eslint","rules": {"no-caller": 2,"no-console": 2,"no-undef": 2,"no-unused-vars": 2,"no-use-before-define": 0,"object-curly-spacing": ["error", "always"],"strict": 0,"semi": 2,"no-loop-func": 0,"no-multi-spaces": "error","keyword-spacing": ["error",{"before": true,"after": true}],"quotes": ["error","double",{"allowTemplateLiterals": true}],"indent": ["error",2,{"SwitchCase": 1}]},"ignorePatterns": ["releases/**/*"],"overrides": [{"files": ["tests/**/*"],"env": {"jest": true}}]
}

.eslintignore

# node_modules
node_modules/# build
build/# dist
dist/
docs/