构成优越一致的代码范例,有利于进步代码的可读性,削减潜伏的毛病,便于团队合作开辟。本文简朴引见JS、CSS、 Git Commit 的范例东西及用法。
Lint JS
我们运用ESlint对JS举行代码范例。
1. 装置
你能够全局装置:npm install eslint -g
或许也能够在你的项目装置 npm install eslint --save-dev
装置完成后,可在敕令行搜检你的代码是不是相符范例。假如是全局装置则能够运用 eslint your-file
搜检你的文件。假如是项目内装置则运用:./node_modules/.bin/eslint your-file
。
2. 设置
经由历程eslint --init
敕令能够天生一个设置文件。你也能够本身建立.eslintrc.*
文件,或许在package.json
中经由历程eslintConfig
设置。在这里我们运用.eslintrc
文件举行设置。当你运用eslint
敕令搜检你的代码时,它会从当前目次最先一层层向上查找是不是存在.eslintrc
文件,直到找到近来的一个.eslinrc
文件,作为此次搜检的划定规矩。
你能够在ESLint官网检察一切设置项。
现在已有许多大厂公开了他们的代码范例,也有许多相对应的 ESLint 插件,我们能够在.eslintrc
中设置相对应的插件,如许就不必我们手动去增添一个个划定规矩了。
以我现在运用的Airbnb的代码范例为例,他供应了eslint-config-airbnb-base插件,因而我只须要在项目装置本插件:
npx install-peerdeps --save-dev eslint-config-airbnb-base
而且在.eslintrc
中设置上这个插件, 功德圆满!
{
"extends": ["airbnb-base"]
}
须要注重的一点是,假如你是运用全局敕令eslint
你的代码,在响应的.eslintrc
中的extends
,plugins
都须要在全局装置。不然eslint
会找不到对应的插件。
末了,假如你还想对现有的 airbnb
或许其他划定规矩举行设置,则可在.eslintrc
中的rules
中加上响应的设置。
{
"extends": ["airbnb-base"],
"rules": {
// 你的个性化设置
"rule-name": "" // 0-off, 1-warn, 2-error
}
}
另有一个比较破例的是能够运用以下体式格局,针对某些文件,从新修正响应划定规矩:
"overrides": [
{
"files": ["*-test.js","*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
3. 禁用
然则有些时刻有些处所你能够真的须要禁用某些划定规矩,eslint
供应了几种禁用体式格局:
-
/* eslint-disable [rules] */
:这行以后的一切代码禁用eslint
划定规矩。 -
/* eslint-disable-line [rules] */
: 这一行禁用eslint
划定规矩。 -
/* eslint-disable-next-line [rules] */
: 下一行禁用eslint
划定规矩。
个中[rules]
是可选的,假如没有rules
则禁用一切划定规矩,假如有rules
则禁用一切划定规矩。
如 /* eslint-disable */
则会禁用掉一切划定规矩,/* eslint-disable no-console*/
则只会禁用掉no-console
这条划定规矩。
Lint CSS
我挑选了StyleLint来范例我的 CSS
。它能够说和eslint
异常像了。
1. 装置
一样的,全局或许项面前目今装置stylelint
.
npm install stylelint -g
装置完成后,假如是全局装置则能够运用 stylelint your-css-file
搜检你的文件。假如是项目内装置则运用:./node_modules/.bin/stylelint your-css-file
。
2. 设置
能够经由历程三种体式格局对stylelint
举行设置:
-
package.json
中的stylelint
属性; -
.stylelintrc
文件 -
stylelint.config.js
文件导出一个 JS 对象
和 ESLint
一样,我们能够在extends
中指定第三方插件,rules
来设置对应的划定规矩。这里我们照样继承运用Airbnb CSS 范例。
npm install stylelint-config-airbnb
在设置文件中声明:
{ "extends": "stylelint-config-airbnb"}
注重,假如你的.stylelintrc
文件是在根目次下,则extends
的途径须要写成绝对途径,比方:
{
"extends": "/usr/local/lib/node_modules/stylelint-config-airbnb"
}
末了,运转stylelint your-css-file
就能够涌现范例搜检效果啦!stylelint
默许会支撑css
,scss
,less
所以你也不必忧郁哦~
一样,你也能够像ESLint
一样,经由历程rules
设置你本身的划定规矩。
3. 禁用
stylelint
的划定规矩也和 ESLint
一样。所以假如熟习了ESLint
, stylelint
真的但是说是无缝上手哦~
Lint Commit
在这一步我会举行两步操纵:
- 搜检前2步的
ESLint
,stylelint
是不是悉数经由历程; - 提交的
commit
信息是不是相符范例。
OK, Let’s do it!
1. 运用githooks
检测代码范例是不是经由历程
我们运用husky来治理我们的githooks
。在装置husky
之前,请确保你的项目已git init
了。
装置husky
:npm install husky --save-dev
在package.json
中定义我们须要的钩子及实行的敕令:
{
"scripts": {
"lint:es": "eslint", // lint js
"lint:css": "stylelint src/**/*.css", // lint css
"lint:all": "npm-run-all lint:es lint:css" // lint es, css
},
"husky": {
"hooks": {
"pre-commit": "npm run lint:all",
}
}
}
在这里我们离别定义了lint:es
和lint:css
两个敕令来检测代码范例。你能够离别运转这两个敕令。也能够定义一个敕令同时运转这两个敕令,我在这里运用了npm-run-all:
npm install npm-run-all --save-dev
我们定义了在pre-commit
钩子触发时会实行npm run lint:all
敕令。pre-commit
钩子会在git commit
时触发,假如lint:all
没有经由历程,则本次commit
会失利。
2. 运用commintlint搜检 commit
信息是不是相符范例
在这里,我们运用阮先生这篇文章中提到的 git
提交范例, 大抵是:
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
个中,type
可选项为:
feat:新功用(feature)
fix:修补bug
docs:文档(documentation)
style: 花样(不影响代码运转的更改)
refactor:重构(即不是新增功用,也不是修正bug的代码更改)
test:增添测试
chore:构建历程或辅助东西的更改
装置commitlint
, 以及相对应的commit
范例。和eslint
一样,commitlint
为我们供应检测功用,同时他也有差别的插件来对应差别的范例作风。你能够在这里检察人人分享出来的响应范例的设置。
npm install --save-dev @commitlint/{config-conventional,cli}
天生设置文件:
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
它也支撑多种文件花样的设置文件:
Configuration is picked up from commitlint.config.js, .commitlintrc.js, .commitlintrc.json, or .commitlintrc.yml file or a commitlint field in package.json
而且经常使用的设置项也与ESLint
很类似:
{
"extends": ['@commitlint/config-conventional'], // 扩大的划定规矩集
"rules": {
// commitmsg 的自定义划定规矩
}
}
这时刻你就能够搜检你要提交的commit
信息是不是相符范例了:
echo "foo" | npx commitlint
不过如许很鸡肋,我要先commit
一次要提交的信息,经由历程了,再用这条音讯提交一次。我们完全能够在githooks
时来处理这个题目:
{
"scripts": {
"commitmsg": "commitlint -e GIT_PARAMS"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint:all",
"commit-msg": "npm run commitmsg"
}
}
}
在这里和githooks
同时运用时须要加上GIT_PARAMS
这个环境变量。我们在commit-msg
这个钩子时挪用npm run commitmsg
来推断commit
信息是不是相符范例。
3. 运用commitizen来填写commit msg
要想记着一切的commit
范例和范例也是比较贫苦的事,commitizen
供应交互式的体式格局来协助我们填写commit msg
。
- 装置
commitizen
及其adapater
:npm install -g commitizen cz-conventional-changelog
- 全局装置
adapater
:echo '{ "path": "cz-conventional-changelog" }' > ~/.czr
- 装置完成后,运用
git cz
替代git commit -m
来填写commit msg
,会涌现一个交互式东西:
OK。完成以上三步以后我们的git
事情流变成了:
git add .
git cz
然后就会搜检我们的eslint
, stylelint
, commitlint
。如许,当你提交胜利时,你的JS
, CSS
, Commit Msg
也是完全相符范例的哦~
总结
- 搜检JS: ESlint
- 搜检CSS:StyleLint
- 搜检Commit Message: commintlint
- 三者连系,运用Git钩子治理东西:husky