前端代码风格自动化系列Husky Husky就是可以定义git命令的钩子的工具。在代码被提交到Git仓库之前，我们可以

Husky

Husky:给git命令添加钩子函数。

关于新版本的husky，比老版本多了一个动作。

老版本：安装 ——> 配置

新版本：安装 ——> 启用 ——> 生成 .husky相关配置

在代码被提交到Git仓库之前，我们可以做一些预检查或者格式化的操作，我们就需要Git的钩子函数，简单说就是使用Git命令后会触发的函数。

安装

npm install husky --save-dev

添加script命令

{ 
    "scripts": { 
        "prepare": "husky install" 
    } 
}

执行npm run prepare命令之后，项目根目录会出现一个.husky文件夹.

添加 hook

npx husky add .husky/pre-commit "npm run lint-staged" 
npx husky add .husky/commit-msg "npm run commitlint"

妈蛋，添加hook失败，直接在.husky添加文件pre-commit和commit-msg

//pre-commit 文件
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

添加commit-msg这个git hook来校验我们commit时添加的备注信息是否符合规范

老版本（v4.x）建议还是用老版吧，新版使用命令添加hook，成功不了。

使用老版本的 husky 时，可以在 pacaage.json 中加入相关的 hook 配置，但是新版不行了。

旧版配置package.json(v4.x):

{
    script:{
      "prepare": "husky install",
      "lint": "eslint",
      "lint-staged": "lint-staged",
      "commitlint": "commitlint --config commitlint.config.js -e -V"
    }
  "husky": {
      "hooks": {
          "pre-commit": "npm run lint-staged",//提交之前进行格式化
          "commit-msg": "npm run commitlint",//对提交备注进行验证
          "pre-push": "npm run test",//提交到远端之前的处理
          "...": "..."
      }
  }
}

husky有时配置不生效，参照这个解决方式

Commitlint

Commitlint:限制git的commit备注消息的格式。

提交规范

<type>: <subject>

注意冒号后面有空格

常用的type类别

-   upd：更新某功能（不是 feat, 不是 fix）
-   feat：新功能（feature）
-   fix：修补bug
-   docs：文档（documentation）
-   style： 格式（不影响代码运行的变动）
-   refactor：重构（即不是新增功能，也不是修改bug的代码变动）
-   test：增加测试
-   chore：构建过程或辅助工具的变动

安装

npm install --save-dev @commitlint/config-conventional @commitlint/cli

配置文件commitlint.config.js

module.exports = {
    // 继承的规则
  extends: [
    "@commitlint/config-conventional"
  ],
  // 定义规则类型
  rules: {
      // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [2, 'always', [
      'upd',// 更新某功能（不是 feat, 不是 fix）
      'feat',//新功能 feature
      'fix',// 修复 bug
      'refactor',// 重构(既不增加新功能，也不是修复bug)
      'docs',// 文档注释
      'chore',// 构建过程或辅助工具的变动
      'style',// 代码格式(不影响代码运行的变动)
      'revert',// 回退
      'perf', // 性能优化
      'test', // 增加测试
      'build' // 打包
     ]],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    // subject 大小写不做校验
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
};

配置项(rule)由name和配置数组组成，如：'name:[0, 'always', 72]'，数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为是否应用配置，可选always|never，第三位为配置项(rule)的值。

Lint-staged

Lint-staged:一个仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。 ESlint:有文件过滤配置，是对于匹配文件的全量遍历。

安装

npm install --save-dev lint-staged

明确一点：Lint-staged仅仅是文件过滤器，不会帮你格式化任何东西，对文件的处理可以交给eslint， Prettier等，通过配置就可以实现

配置你可以在单独的配置文件里面去配置eslint或Prettier，然后再在Lint-staged的配置里面去启用。

{
  "husky": { //注意： 旧版（4.x）husky配置
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": ["eslint --fix", "git add"]
  }
}

当文件变化，我们git commit它们，pre-commit钩子会启动，执行lint-staged命令，我们对于lint-staged如上文配置，对本次被commited中的所有.js文件，执行eslint --fix命令和git add,命令，前者的的目的是格式化，后者是对格式化之后的代码重新提交。

lint-staged的常用选项除了liners之外，还有ignore、concurrent 等.

{
  "lint-staged": {
    "linters": {
      "*.{js,scss}": ["some command", "git add"]
    },
    "ignore": ["**/dist/*.min.js"]
  }
}

Prettier

Prettier:格式化我们的代码

安装

npm install --save-dev prettier

配置prettierrc.js

配置文件支持多种形式：

-   在 `package.json` 中添加一个 `prettier` 对象，在内部写入配置。
-   一个 `JSON` 或 `YAML` 格式的 `.prettierrc` 文件。
-   一个 `.prettierrc.json`, `.prettierrc.yml`, `.prettierrc.yaml`, 或 `.prettierrc.json5` 文件。
-   一个 `.prettierrc.js`, `.prettierrc.cjs`, `prettier.config.js` 或 `prettier.config.cjs` 文件，文件要用 `module.exports` `exprts` 一个对象。

//prettierrc.js文件
module.exports = {
  printWidth: 100,// 一行最多 100 字符
  useTabs: false,// 关闭 tab 缩进
  tabWidth: 2,// 使用 2个tab 缩进
  semi: true,// 行尾需要有分号
  singleQuote: true,// 使用单引号
  // 对象key是否使用引号 <as-needed|consistent|preserve>
  // as-needed 仅在需要的时候使用
  // consistent 有一个属性需要引号，就都需要引号
  // preserve 保留用户输入的情况
  quoteProps: 'preserve',
  // jsx 使用单引号代替双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号 <es5|none|all>
  trailingComma: 'es5',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号 <always|avoid>
  arrowParens: 'avoid',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier 用于逐步过渡大型项目中未被格式化的代码标识
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier 用于逐步过渡大型项目中未被格式化的代码标识
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行 <css|strict|ignore>"
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf 结尾  <lf|crlf|cr|auto>
  endOfLine: 'lf',
  embeddedLanguageFormatting: 'off',
};

.prettierignore 排除不编译的文件、也可在对应文件顶部添加注释排除

eslint

eslint: 帮我们进行代码检查

安装

npm install eslint --save-dev

配置配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。

主要的配置参数包括：

Environments – 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
Globals – 脚本在执行期间访问的额外的全局变量。
extends：引用基础文件中的规则。可以指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)；也可以是字符串数组：每个配置继承它前面的配置。
plugin：插件。
parseOption：解析器选项（语言选项）。
rules：启用的规则及其各自的错误级别。该属性可以做下面的任何事情以扩展（或覆盖）规则：
- 启用额外的规则
- 改变继承的规则级别而不改变它的选项：
- 基础配置："eqeqeq": ["error", "allow-null"]
- 派生的配置："eqeqeq": "warn"
- 最后生成的配置："eqeqeq": ["warn", "allow-null"]
- 覆盖基础配置中的规则的选项
- 基础配置："quotes": ["error", "single", "avoid-escape"]
- 派生的配置："quotes": ["error", "single"]
- 最后生成的配置："quotes": ["error", "single"]

整合

使用Lint-staged找到本次git改变的内容，内容通过ESlint判断代码规范性，使用Prettier来统一代码格式，然后Husky添加git命令钩子函数，执行上面的逻辑。

eslint+husky+prettier+lint-staged提升前端应用质量

prettier 和 eslint的使用教程

前端代码风格自动化系列

代码美化神器——Prettier使用详解