vue 项目中添加git hooks以及添加eslint和stylelint
vue 项目中添加git hooks以及添加eslint和stylelint
项目基本依赖：“vue-cli”:“3.5.3” “core-js”: “^2.6.5” “vue”: “^2.6.10” “babel-eslint”: “^10.0.1”
“eslint”: “^5.16.0”
“eslint-plugin-vue”: “^5.0.0”
编辑器：vscode
优先安装vscode插件：eslint 和 stylelint 以配合下面配置项起到作用
使用效果
使用步骤
注意：使用前确保 vue.config.js 里的 lintOnSave 已设置为 true
1.安装以下依赖
npm i -D @commitlint/[email protected] @commitlint/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected]
2.package.json 文件中添加以下配置
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"commit": "git-cz"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
},
上面 package.json 配置说明（不要复制下面 json，json 不支持注释）
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",// vue-cli 自带的lint检查
"commit": "git-cz" // 提交命令
},
"husky": {
"hooks": {
"pre-commit": "lint-staged", //git commit 执行这个命令，这个命令再调起 lint-staged
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS" //提交检查
}
},
"config": {
"commitizen": {
"path": "node_modules/cz-customizable" //定制项目的提交说明
}
},
"lint-staged": {
// 检查文件
"src/**/*.{js,vue}": [
"vue-cli-service lint",// 提交之前检查并修复代码
"git add"
]
},
3.在项目根目录下新建 commitlint.config.js 文件配置如下
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
// 提交主题类型
'type-enum': [
2,
'always',
[
'feat',
'perf',
'fix',
'docs',
'style',
'refactor',
'test',
'chore',
'revert',
'build',
'ci'
] // 主题含义见 /.cz-config.js
],
'subject-full-stop': [0, 'never'], // 主题句号
'subject-case': [0, 'never'] // 主题案例
}
};
4.在项目根目录下新建 .cz-config.js 文件配置如下（注意：不要省略文件名前的点 " . "）
module.exports = {
// 修改主题选择
types: [
{ value: 'build', name: 'build: 构建打包' },
{ value: 'feat', name: 'feat: 添加新功能' },
{ value: 'fix', name: 'fix: Bug修复' },
{
value: 'docs',
name: 'docs: 变更的只有文档，比如README.md等'
},
{
value: 'style',
name: 'style: 空格, 分号等格式修复（注意不是 css 修改）'
},
{ value: 'ci', name: 'ci ci配置，脚本文件等更新' },
{
value: 'refactor',
name: 'refactor: 代码重构（即不是新增功能，也不是修改bug的代码变动）'
},
{ value: 'test', name: 'test: 添加一个测试，包括单元测试、集成测试等' },
{ value: 'perf', name: 'perf: 优化相关，比如提升性能、体验' },
{ value: 'chore', name: 'chore: 改变构建流程、或者增加依赖库、工具等' },
{ value: 'revert', name: 'revert: 代码回退' }
],
// 修改文件范围选择
// scopes: [
// { name: 'components' },
// { name: 'assets' },
// { name: 'views' },
// { name: 'api' },
// { name: 'utils' },
// { name: 'other' },
// ],
// 选择对应的主题后的选择
// scopeOverrides: {
// fix: [
// { name: 'merge' },
// { name: 'style' },
// { name: 'e2eTest' },
// { name: 'unitTest' }
// ]
// },
// 构建对话
messages: {
type: '选择一种你的提交类型(必选):',
scope: '选择一个更改范围(可选):',
// used if allowCustomScopes is true
customScope: '自定义更改范围(可选):',
subject: '短说明(必填):\n',
body: '长说明，使用"|"换行(可选)：\n',
breaking: '非兼容性说明 (可选):\n',
footer: '关联关闭的issue，例如：#31, #34(可选):\n',
confirmCommit: '确定提交说明?'
},
// 是否允许自定义更改范围
allowCustomScopes: true,
// 允许中断的改变
allowBreakingChanges: ['feat', 'fix'],
// 修改主题描述字数限制
subjectLimit: 100,
// 选择跳过的步骤(不用填，不用选，直接跳过)
skipQuestions: ['body', 'breaking', 'footer']
};
5.在项目根目录下新建 .eslintrc.js 文件配置如下(自己可以参考官网修改)
eslint 中文网 http://eslint.cn/docs/rules/
eslint-config-vue 配置 https://github.com/vuejs/eslint-config-vue/blob/master/index.js
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true
},
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// add your custom rules here
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'vue/max-attributes-per-line': [
2,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false
}
}
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'vue/html-self-closing': 'off',
'arrow-spacing': [
2,
{
before: true,
after: true
}
],
'block-spacing': [2, 'always'],
'brace-style': [
2,
'1tbs',
{
allowSingleLine: true
}
],
camelcase: [
0,
{
properties: 'always'
}
],
'no-undef': 2,
'no-undef-init': 2,
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none'
}
],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
semi: [2, 'never'],
'semi-spacing': [
2,
{
before: false,
after: true
}
],
'space-before-blocks': [2, 'always'],
'spaced-comment': [
2,
'always',
{
markers: [
'global',
'globals',
'eslint',
'eslint-disable',
'*package',
'!',
','
]
}
],
'template-curly-spacing': [2, 'never'],
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [
2,
'always',
{
objectsInObjects: false
}
],
'array-bracket-spacing': [2, 'never']
}
};
6.在项目根目录下新建 update.sh 文件配置如下
#!/usr/bin/env bash
success="更新成功"
fail="更新失败"
# 确保脚本抛出遇到的错误
set -e
# 参数检验
if [ $# -gt 0 ] ; then
echo fail: $fail;
exit 1
fi
git add .
npm run commit
# 捕获异常
if [ $? = 0 ] ; then
git push # 确保执行过默认分支操作 git push -u origin master 或者 git push -u origin dev 等
echo success:$success
else
echo fail: $fail;
exit 1
fi
6.使用
项目根目录下启动 git-bash （vscode 默认 bash 改成 git-bash）
运行以下命令,
对于可选的项目直接按 enter 键跳过
./update.sh
7.项目添加配置 Stylelint
公司项目使用的scss ，下面以scss为例
a.安装以下包
stylelint： 必须安装
stylelint-config-standard： 是官方推荐的插件
stylelint-order： 是规范样式的顺序的
stylelint-scss：stylelint的SCSS特定linting规则的集合
npm i stylelint stylelint-config-standard stylelint-order stylelint-scss -D
b. 在项目根目录下新建.stylelintrc文件（或其他支持的文件格式）
更多配置请查看官网
{
"defaultSeverity": "error",
"extends": [
"stylelint-config-standard"
],
"plugins": [
"stylelint-scss",
"stylelint-order"
],
"rules": {
"order/order": [
"declarations",
"custom-properties",
"dollar-variables",
"rules",
"at-rules"
],
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"float"
],
"media-feature-name-no-vendor-prefix": true,
"at-rule-no-vendor-prefix": true,
"selector-no-vendor-prefix": true,
"property-no-vendor-prefix": true,
"value-no-vendor-prefix": true,
"rule-empty-line-before": null,
"no-missing-end-of-source-newline": null,
"selector-pseudo-class-no-unknown": null,
"font-family-no-missing-generic-family-keyword": null,
"no-descending-specificity": null,
"declaration-empty-line-before": null,
"declaration-block-trailing-semicolon": null,
"selector-combinator-space-before": null,
"selector-combinator-space-after": null,
"block-closing-brace-newline-before": null,
"at-rule-no-unknown": null,
"property-case": null,
"property-no-unknown": null
}
}
c. 在项目根目录下新建.stylelintignore文件 (默认忽略node_modules文件夹)
*.min.css
# 其他类型文件
*.js
*.jpg
*.woff
# 测试和打包目录
/test/
/dist/
d.配置package.json
“scripts” 字段下添加 stylelint 命令
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build --mode production",
"build:dev": "vue-cli-service build --mode dev",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0",
"lint": "vue-cli-service lint",
"stylelint": "stylelint **/*.{html,vue,css,sass,scss} --fix",
"commit": "git-cz"
}
}
“lint-staged” 字段改为如下
{
"lint-staged": {
"src/**/*.{js,vue}": [
"npm run lint",
"git add"
],
"**/*.{html,vue,css,sass,scss}": [
"npm run stylelint",
"git add"
]
}
}
e.使用，同上
运行
./update.sh
参考链接
1.https://github.com/okonet/lint-staged
2.https://github.com/typicode/husky
3.https://github.com/conventional-changelog/commitlint
4.https://blog.csdn.net/weixin_33890526/article/details/91393527
5.https://juejin.im/post/5afc5242f265da0b7f44bee4#heading-9
6.https://segmentfault.com/a/1190000009546913
7.https://juejin.im/post/5c31c9a16fb9a049f8197000