前端项目中配置自动格式化的方法
前端项目中配置自动格式化的方法
husky
https://www.npmjs.com/package/husky
Requires Node
>= 10
and Git>= 2.13.0
husky 是用来设置 git hooks 的工具,可以用来在 commit、push 之前执行某些动作。
安装
npm install husky --save-dev
配置
// package.json
{
"husky": {
"hooks": {
"pre-commit": "npm test",
"pre-push": "npm test",
"...": "..."
}
}
}
pre-commit
对应命令将在 git commit
前执行,若命令返回值不为0,则将会阻止此次提交。
commitlint
commitlint 用来规范化提交信息,提交格式(注意冒号后面有空格)如下:
<type>: <subject>
常用的type类别有:
- feat:新功能
- fix:修补bug
- docs:文档
- style: 格式(不影响代码运行的变动)
- refactor:重构(即不是新增功能,也不是修改bug的代码变动)
- test:增加测试
- chore:构建过程或辅助工具的变动
安装
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# 生成配置文件 .commitlintrc.js 或 commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlintrc.js
配置
"husky": {
"hooks": {
"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
}
}
lint-staged
编写代码时常需要格式化代码或其他操作以确保代码无误,但是若在编写代码过程中实时的进行又会占用资源且十分缓慢,实际上我们只要在提交前完成这些操作即可,lint-staged 正好就提供了这种能力。
lint-staged 可以在 commit 前,对暂存区的指定的文件进行特定操作。可以使用 glob 模式指定文件,然后设置可执行的命令或 shell 任务。注意 lint-staged 仅提供了过滤文件执行脚本的功能,其中过滤方法与命令脚本需要自行提供,并且只会对 commit 前加到暂存区的文件有效。
安装
npm install lint-staged --save-dev
配置
// package.json
{
"lint-staged": {
"*": " your-cmd "
}
}
假如你提交了 file1.ext,上述的配置就会执行 your-cmd file.ext
文件过滤
# 不包含 / 的,将忽略目录并在所有文件中进行匹配
"*.js" 将匹配所有 js 文件
"!(*test).js" 将匹配所有 js 文件,除了以 test.js 结尾的
# 包含 / 的,将会匹配目录
"./*.js" 将匹配根目录中的所有 js 文件
"foo/**/\*.js" 将匹配 foo 目录下的所有 js 文件
命令
可以执行 npm 安装的本地或全局命令,也可以执行环境中的命令。
"*.js": "eslint --fix" // 执行一条命令
"*.js": ["eslint", "prettier --write"] // 执行多条命令
注意:版本10以后不需要在命令中加
git add
了,lint-staged 已经默认集成了
example
{
"*.{js,jsx}": "eslint",
"*.js": "eslint --fix",
"*.js": "npm run my-custom-script --",
"*.{js,jsx,ts,tsx,md,html,css}": "prettier --write",
"*.css": "stylelint",
"*.scss": "stylelint --syntax=scss"
}
esLint
搞懂 ESLint 和 Prettierhttps://zhuanlan.zhihu.com/p/80574300
安装
npm i -g eslint
配置
# 可使用 init 通过选择几个问题即可配置一个配置
eslint --init
eslint [options] files
prettier
安装
npm install --save-dev prettier
配置
可参考以上内容如下配置,将会在commit前,将代码格式化。
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,json,css,md}": "prettier --write"
}
}