前端格式化工具

husky

git hooks

Git 本身除了代码版本管理之外，还提供了 Git Hooks 钩子机制，它能够让我们在 commit、push 之前（后）执行一些自定义的操作。

husky@6.0.0

husky 是一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .git/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。 建议使用刚更新的6.0.0版本

npm set-script prepare "husky install" && npm run prepare
npx husky add .husky/pre-commit "npm test"
1
2

这样项目里出现了pre-commit脚本，在执行git commit之前，会运行npm test

ESLint 自定义ESlint规则，和package.json同一目录下

// .eslintrc.js 例子
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'@enos/eslint-config-envision',
'plugin:react-hooks/recommended'
],
rules: {
eqeqeq: 0,
'no-unused-expressions': 0,
'array-callback-return': 0,
'max-classes-per-file': 0
}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

想要直接在命令行使用eslint命令，需要全局安装eslint

npm i -g eslint
1

利用eslint修复文件

eslint --cache --fix [文件名或正则匹配]
1

prettier

用yarn安装prettier
自定义prettier规则，和package.json同一目录下

// .prettierrc 目前reporting项目使用的
{
	"printWidth": 150,
	"tabWidth": 2,
	"useTabs": false,
	"semi": true,
	"singleQuote": true,
	"quoteProps": "as-needed",
	"jsxSingleQuote": true,
	"trailingComma": "none",
	"bracketSpacing": false,
	"jsxBracketSameLine": false,
	"arrowParens": "always",
	"requirePragma": false,
	"insertPragma": false,
	"proseWrap": "preserve",
	"htmlWhitespaceSensitivity": "css",
	"endOfLine": "auto"
}

// .prettierignore prettier忽略的文件,目前reporting项目使用的
zh-CH.js
en-US.js
ja-JP.js
es-ES.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如何在命令行使用prettier

yarn prettier --write [文件名或正则匹配]
1

lint-staged

如果每次commit之前，要对项目中每一个文件进行扫描，进行prettier和eslint的格式化，那么会非常慢，这时候，lint-staged派上用场了

• lint-staged对只变更的文件进行处理

安装

yarn add lint-staged --dev
1

在package.json中设置

// package.json
...
"lint-staged": {
	"*.{js,jsx,ts,tsx,less,css}": [
		"prettier --write"
	]
},
...
1
2
3
4
5
6
7
8

运行命令

yarn lint-staged
1

相当于对项目中所有变更的文件进行了prettier --write处理

commitlint

帮助规范团队的提交信息

安装

yarn add @commitlint/{cli,config-conventional}
1

新建 commitlint.config.js 文件

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

commitlint.config.js 配置文件可以添加自己的规则，这里 @commitlint/config-conventional 提供了官方的规则扩展：

build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交
docs：文档更新
feat：新增功能
merge：分支合并 Merge branch ? of ?
fix：bug 修复
perf：性能, 体验优化
refactor：重构代码(既没有新增功能，也没有修复 bug)
style：不影响程序逻辑的代码修改(修改空白字符，格式缩进，补全缺失的分号等，没有改变代码逻辑)
test：新增测试用例或是更新现有测试
revert：回滚某个更早之前的提交
chore：不属于以上类型的其他类型
1
2
3
4
5
6
7
8
9
10
11
12

错误示例

⧗ input: fix: ES-3375 get wrong template detail in cache
✖ subject must not be sentence-case, start-case, pascal-case, upper-case [subject-case]
1
2

错误原因：ES必须改为小写

综合配置

已安装prettier, eslint(全局), husky, commitlint

// package.json
...
"scripts": {
	"prepare": "husky install",
}
"lint-staged": {
	"*.{js,jsx,ts,tsx,less,css}": [
		"prettier --write",
		"eslint --cache --fix",
		"git add"
	]
},
...
1
2
3
4
5
6
7
8
9
10
11
12
13

husky钩子脚本

// .husky/pre-commit

#!/bin/sh
# 为了使sourcetree认识 yarn 和npm 等命令
PATH=$PATH:/usr/local/bin:/usr/local/sbin

. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

exit 0
1
2
3
4
5
6
7
8
9
10
11

在.husky目录下创建commit-msg文件，在commit时，会调用该钩子，对commit message进行校验

// .husky/commit-msg

#!/bin/sh
# 为了使sourcetree认识 yarn 和npm 等命令
PATH=$PATH:/usr/local/bin:/usr/local/sbin

. "$(dirname "$0")/_/husky.sh"

yarn commitlint --edit $1
1
2
3
4
5
6
7
8
9

规则文件

// .eslintre.js 如上
// .prettierrc 如上
// .prettierignore 如上
// commitlint.config.js 如上
1
2
3
4

对于旧项目

依次运行命令

yarn prettier --write src/*
eslint --cache --fix src/*
1
2

注意点：

• 可能会有很多eslint报错，需要处理
• src下有components等文件夹不想被格式化的，可以缩小src/yourPage的范围
• 有很多css的报错，如果暂时不想处理可以在lint-staged中"*.{js,jsx,ts,tsx,less,css}"删掉less和css