001 前端工程化之统一代码规范

一、git hooks

通过 git init 创建.git>hooks文件夹中有一系列hooks钩子，此时只需要关注pre-commit.sample，即提交前触发的钩子，如果熟悉shell编程，我们可以在pre-commit.sample文件中编写想要做的事情，但是绝大多数前端并不熟悉，所以我们需要使用工具：husky。

1、安装

yarn add husky @commitlint/cli @commitlint/config-conventional -D

2、配置

目前最新版本为7.0.4，需要注意的是老版本的husky配置与新版本配置方法差异很大。

package.json中添加脚本, 此脚本命令会生成 .husky/ 文件夹，此后生成的git hooks命令都会放在这里。多人合作开发时必须添加该脚本，此脚本会在yarn install 时自动触发。

```js

"script":{

    ...

    "prepare": "husky install"

}

```

创建git hooks，运行一下俩条命令，.husky目录下会生成两个文件： pre-commit 、commit-msg

npx husky add .husky/pre-commit "yarn lint-staged"

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

pre-commit：在提交前触发lint-staged，双引号中的yarn lint-staged可以替换为任意提交前想要运行的脚本;

commit-msg: 规范提交时添加的信息，格式为： :

type（自定义）：

feat： 新增页面或功能

fix:  bug修复

style:  样式修改

docs:  文档改动

perf:  性能提升改动

refactor:  不影响功能的代码重构(既不修复错误也不添加功能)

test:  添加或修改测试用例

ci:  对 CI 配置文件和脚本的更改

3、添加commitlint.config.js文件(与package.json同级)，配置commitlint，不配置husky不生效，内容：

```js

module.exports = { extends: ['@commitlint/config-conventional'] }

```

二、prettier 和 lint-staged

prettier为前端常用的代码格式化工具；lint-staged可以使lint只对git暂存区的文件进行检测，而无需检测整个项目，提高速度

1、安装

yarn add prettier lint-staged -D

2、配置lint-staged

package.json文件中配置， prettier --write 命令为检查并修改格式

```js

"lint-staged": {

    "*.{ts,tsx,js,jsx}": [

      "prettier --write",

      "eslint"

    ]

  }

```

3、配置prettier

添加 .prettierrc.js 文件(与package.json同级)

```js

module.exports = {

    // 一行最多 100 字符

    printWidth: 100,

    // 使用 4 个空格缩进

    tabWidth: 4,

    // 不使用缩进符，而使用空格

    useTabs: false,

    // 行尾是否需要有分号

    semi: false,

    // 使用单引号

    singleQuote: true,

    ....

  }

```