基于ESLint-Stylelint-Prettier-Vetur-Husky-Commintlint-Lint-staged打造规范的git工作流-CSDN博客

本文链接：https://blog.csdn.net/qq_29101285/article/details/137994453

前言

基于ESLint + Stylelint + Prettier + Vetur + Husky + Commintlint + Lint-staged打造规范的Git检查工作流

IDE工具支持 Vscode (IDE配置详见：问题帮助 - 配置工作区)

prettier 配置

Vscode IDE 安装插件: Prettier - Code formatter
Vscode IDE 安装插件: Vetur (vue3选用volar)

npm 配置预设

cnpm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org

以下按需执行：

cnpm i node-sass@8.0.0 --registry https://registry.npm.taobao.org （注：避免node-saas安装不成功，默认版本@8.0.0）

环境版本 node @14.19.0+

package.json scripts配置

{

“scripts”: {
“lint”: “vue-cli-service lint --fix” // 本地检查(附带一定代码自动修复功能)
“lint:report”: “eslint ./src -f json -o report.json --ext .js,.vue,.css,.scss || exit 0” // SonarLint集成，必须配置，否则Jenkins构建运维集成SonarLint进行拦截，引起构建失败
},

“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”,
“prepare-commit-msg”: “commitlint -E HUSKY_GIT_PARAMS”

},
“lint-staged”: {
“*.{html,js,jsx,vue,css,saas,scss}”: [
“stylelint --fix”,
“vue-cli-service lint”,
“git commit”
]
},

}

依赖包安装

npm install -D husky lint-staged (当前版本使用@lastest)
npm install -D @commitlint/cli @commitlint/config-conventional (当前版本使用@lastest)
npm i -D prettier (当前版本使用@1.19.1)
npm i -D eslint-plugin-prettier (当前版本使用@3.1.4)
npm i -D @vue/eslint-config-prettier (当前版本使用@6.0.0)

注：

 1）避免安装安装前，删除相关目录文件：node_modules、package.lock.json、yarn.lock

 2）初始化husky, 执行npx husky 或husky install

Git提交规范

提交类型

类型	描述
feat	新增功能
fix	bug 修复
docs	文档更新
test	新增测试用例或是更新现有测试
perf	性能, 体验优化
revert	回滚某个更早之前的提交
refactor	重构代码(既没有新增功能，也没有修复 bug)
build	主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交
ci	主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle 等)的提交
merge	分支合并 Merge branch into
style	仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑
chore	不属于以上类型的其他类型

提交模型

scope 指 commit 的范围（哪些模块进行了修改）
subject 指 commit 的简短描述
body 指 commit 主体内容（长描述）
footer 指 commit footer 信息
提交示例

git commit -m ‘feat: 增加 xxx 模块 xxx 功能修复’
git commit -m ‘fix: 修复 xxx 模块 xxx 功能修复’

问题帮助

Vscode配置工作区

2. 由于集成Prettier，存在任务合并冲突情况，合并前以主干线上分支（master）为基版，合并解决冲突
3. 执行npm run lint 自动修复会破坏代码结构，因结构化比较大，存在增加/减少多括号、代码合并冲掉缺失等，需检查提示后手动修复
4. 提交代码husky自定义的钩子失效（处理中）