目录
3)commitlint提交规范,推荐使用config-conventional 配置去写 commit
前言:最近在搭项目框架的时候完整的配置了一遍流程,记录下来防止下次配置的时候忘记了
一、prettier
1)作用
格式化工具,可以在各种编辑器找到实现它的插件,如vscode,atom,webstom等,用它统一代码格式化的规则,在代码提交前做代码格式化,防止不同的人开发由于编辑器格式化的规则不同导致代码冲突
2)使用
- 安装依赖:yarn add prettier -D
- 在项目下创建文件.prettierrc.js
module.exports = {
tabWidth: 2,// tab缩进大小,默认为2
useTabs: false,// 使用tab缩进,默认false
semi: true,// 使用分号, 默认true
singleQuote: true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
trailingComma: 'all',
// 行尾逗号,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
bracketSpacing: true,
// 对象中的空格 默认true
// true: { foo: bar }
// false: {foo: bar}
jsxBracketSameLine: false,
// JSX标签闭合位置 默认false
// false: <div
// className=""
// style={{}}
// >
// true: <div
// className=""
// style={{}} >
arrowParens: 'avoid',
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
};
二、Eslint
1)作用
代码检查工具,eslint也可以负责一部分代码格式检查的工作,但是有prettier检查代码格式就可以了,所以只让eslint对代码错误进行检查即可
2)使用
- 安装eslint、eslint-config-prettier(关闭所有不必要或可能跟prettier产生冲突的规则,即prettier和eslint规则产生冲突时去prettier的规则) yarn add eslint eslint-config-prettier -D
- 在项目下创建.eslintrc.js
module.exports = {
root: true,// 标识当前配置文件为eslint的根配置文件,让其停止在父级目录中继续寻找
env: { //运行环境
node: true,
browser: true, // 浏览器环境
},
parser: 'babel-eslint'
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],//规则继承
parserOptions: {//解析器配置项
"sourceType": "module",//指定JS代码来源的类型,script(script标签引入) | module(es6的 module模块),默认为script。为什么vue的会使用script呢?因为vue是通过babel-loader编译的,而babel编译后的代码就是script方式
"ecmaVersion": 6, // 支持的ES语法版本,默认为5
"experimentalObjectRestSpread": true, //启用对对象的扩展
"jsx": true, //启用jsx语法
"globalReturn":true, //允许return在全局使用
},
rules: {},//自定义规则
// 定义额外的全局
globals: {
process: true,
},
plugins: [ //插件
'vue'
],
overrides: [
{
'files': ['bin/*.js', 'lib/*.js'],
'excludedFiles': '*.test.js',
'rules': {
'quotes': [2, 'single']
}
}
] //针对特定文件进行特定的eslint检测
}
三、husky
1)作用
GitHook工具(下一篇会详细介绍GitHook)husky会在你提交前,调用pre-commit钩子,执行lint-staged,如果代码不符合prettier配置的规则,会进行格式化;然后再用eslint的规则进行检查,如果有不符合规则的且无法自动修复的,就会停止提交。
什么?lint-staged是什么?
lint-staged能够让lint只检测暂存区的文件,即当前提交的文件,这样可以加快速度
2)使用
1、yarn add husky lint-staged -D
2、在根目录下生成.husky目录 npx husky install
3、然后在.husky目录下生成pre-commit
npx husky add .husky/pre-commit
4、最后修改这个文件内容
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run pre-commit
5、修改package.json
"gitHooks": {
"pre-commit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
}
},
"lint-staged": {
"*.{js,jsx,vue}": [ //文件后缀匹配根据自己实际需求写
"prettier --write ./src",
"eslint --fix .src"
]
}
配置完后再改动文件,提交就可以对改动的代码进行校验了
四、commitlint
1)作用
在代码提交前,对commit提交的信息说明进行校验,如果不符合规范则不给提交
2)使用
1、npm install --save-dev @commitlint/config-conventional @commitlint/cli
2、生成配置文件commitlint.config.js或.commitlintrc.js
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
3、配置package.json
配置说明:在当前项目执行git commit -m '提交说明' 时,会去触发commit-msg事件钩子并通知husky,从而执行commitlint -E HUSKY_GIT_PARAMS命令,若检验不通过,则不给提交
3)commitlint提交规范,推荐使用config-conventional 配置去写 commit
提交格式:
git commit -m <type>[optional scope]: <description>
- <type>常用的type类型:
build | 编译相关的修改,例如发布版本、对项目构建或者依赖的改动 |
chore | 其他修改, 比如改变构建流程、或者增加依赖库、工具等 |
ci | 持续集成修改 |
docs | 文档修改 |
feat | 新特性、新功能 |
fix | 修改bug |
perf | 优化相关,比如提升性能、体验 |
refactor | 代码重构 |
revert | 回滚到上一个版本 |
style | 代码格式修改, 注意不是 css 修改 |
test | 测试用例修改 |
- 示例:
git commit -m 'fix: 修改xxxbug'