前端代码规范：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/