ESLint
Commitizen
Git Hooks
(--forece 强制安装)`

vue create （项目文件名）

选择 ’Manually celect features‘ //手动配置

选择需要的配置项

选择vue3项目

是否选择镜像

选择scss

选择eslint+Standard config //使用eslint标准代码格式化方案

后，两个都选，保存时提交，都进行eslint

选择 In dedicated config files //单独配置文件

是否存储预设 //N /选择否

完成后等待片刻，创建基础项目框架

安装插件prettier

配置格式化

git cz提交

commitizen

commitizen用git进行提交规范，方便多人共同开发时，代码格式的统一

安装依赖 commitizen

npm install -g commitizen@4.2.4

安装依赖 cz-customizable

npm i cz-customizable@6.3.0 --save-dev

添加以下配置到 package.json 中

 "config": {"commitizen": {"path": "node_modules/cz-customizable"}}

项目根目录下创建 .cz-config 自定义提示文件

module.exports = {// 可选类型types: [{ value: 'feat', name: 'feat:新功能' },{ value: 'fix', name: 'fix:修复' },{ value: 'docs', name: 'docs:文档变更' },{ value: 'style', name: 'style:代码格式(不影响代码运行的变动)' },{ value: 'refactor',name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},{ value: 'perf', name: 'perf:性能优化' },{ value: 'test', name: 'test:增加测试' },{ value: 'chore', name: 'chore:构建过程或辅助工具的变动' },{ value: 'revert', name: 'revert:回退' },{ value: 'build', name: 'build:打包' }],// 消息步骤messages: {type: '请选择提交类型:',customScope: '请输入修改范围(可选):',subject: '请简要描述提交(必填):',body: '请输入详细描述(可选):',footer: '请输入要关闭的issue(可选):',confirmCommit: '确认使用以上信息提交？(y/n/e/h)'},// 跳过问题skipQuestions: ['body', 'footer'],// subject文字长度默认是72subjectLimit: 72
}

现在就可以使用 git cz 替换 git commit -m “提交信息”

阻止commit 提交

安装依赖

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

创建 commit.config.js文件

echo "module.exports = {extends: ['@commitlint/config-conventional']}" >commitlint.config.js

打开 commitlint.config.js ，增加配置项

module.exports = {// 继承的规则extends: ['@commitlint/config-conventional'],// 定义规则类型rules: {// type 类型定义，表示 git 提交的 type 必须在以下类型范围内'type-enum': [2,'always',['feat', // 新功能 feature'fix', // 修复 bug'docs', // 文档注释'style', // 代码格式(不影响代码运行的变动)'refactor', // 重构(既不增加新功能，也不是修复bug)'perf', // 性能优化'test', // 增加测试'chore', // 构建过程或辅助工具的变动'revert', // 回退'build' // 打包]],// subject 大小写不做校验'subject-case': [0]}
}

git Hooks

安装依赖

npm install husky@7.0.1 --save-dev

创建文件 .husky 文件夹

npx husky install

创建commit-msg文件和pre-commit文件

在commit-mag中配置

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx --no-install commitlint --edit ""

在pre-commit中配置

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx lint-staged

在package.json 中生成 prepare 指令

npm set-script prepare "husky install"

添加 commitlint 的 hook 到 husky 中，并指令在commit-msg 的 hooks 下

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

至此不规范的代码将不再可提交

提交时自动进行eslint格式规范

安装依赖

cnpm install --save-dev prettier husky lint-staged eslint

在项目根目录新建一个 .prettierrc 文件。内容为

{// 代码换行长度"printWidth": 200,// 代码缩进空格数"tabWidth": 2,// 使用制表符缩进而不是空格缩进"useTabs": true,// 代码结尾是否加分号"semi": false,// 是否使用单引号"singleQuote": true,// 对象大括号内两边是否加空格 { a:0 }"bracketSpacing": true,// 单个参数的箭头函数不加括号 x => x"arrowParens": "avoid"
}

不允许拥有注释，保存时删除注释

关闭摸一下eslint校验

找到.esilnerc.js文件

在文件里的 rules 里添加

代码不规范时vue项目也会报错，如果修改.eslinerc.js 需要重启项目

如果不在esliners.js里关闭可百度||翻译解决

vue3项目的创建和git提交规范，eslint ，cz，hooks相关推荐

vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结
vue3+vite配置项目运行前eslint检查以及git提交前eslint检查的方案总结 1.需求背景最近在新项目搭建过程中有这样一个需求:由于是团队协同开发,所以在开发是代码规范是一个很重要的环 ...
从0到1开发实战手机站（二）：Git提交规范配置
生活不能随意过,代码也不能随意写. 前一篇文章我们已经把项目搭建好了,那是不是马上就开始写页面了呀? NO! 无论在哪家公司,都会有相应的代码规范.新入职的员工往往第一步就要接受代码规范的学习. 既然 ...
git分支管理和git提交规范
一.git分支管理最基本的一般情况下的分支管理如下(有些公司会比较复杂,分支管理会根据不同项目而定): master分支:生产环境分支,一般用于存放正式环境上的代码,每次发版到正式时才更新,其他时间 ...
Git基础：第七、八章 Git提交规范Github/Gitee(github资料附录表)
文章目录第七章 Git提交规范 7.1 Commit Message 7.1.1 自动化校验commit message 7.2 Author & Committer 7.3 Changed ...
【git】(task4)git提交规范和github说明
学习总结学习datawhale的git教程.Pull Requests:PR,是github中将修改过的代码分支合并到目标分支的操作.commit是git的最小工作单元,在github的仓库中,PR ...
Git 提交规范-Java程序员收藏必备
你可能会忽略的 Git 提交规范规范是建立在程序开发者与程序阅读者一个沟通的桥梁,是一个团队必须要严格遵守的约定 --动力节点Java学院一.为什么需要规范? 无规矩不成方圆,编程也一样. 如果你 ...
超详细的Git提交规范引入指南
最近公司的前端团队分了组,我根据兴趣加入了基础设施建设组,负责做一些方便和规范开发的东西.第一个产出是增加了Git的提交规范,之前参与开源项目时接触到的,感觉很有意思,也很实际,用得到. 参考资料: ...
一个维护版本日志整洁的Git提交规范
1 关于提交日志规范良好的Commit Message有利于代码审查,能更快速查找变更记录,并且可以直接生成Change log. Commit Message的写法规范:conventional- ...
对不同的项目设置不同的git提交用户名和清除贡献者信息和历史提交记录
对不同的项目设置不同的git提交用户名在项目目录下的(存在.git文件夹,如果不存在.git文件夹说明没有初始化git仓库,此目录下打开cmd输入git init一下就好了,但是要注意这时此目录应该 ...

vue3项目的创建和git提交规范，eslint ，cz，hooks

git cz提交

commitizen用git进行提交规范，方便多人共同开发时，代码格式的统一

阻止commit 提交

git Hooks

提交时自动进行eslint格式规范

vue3项目的创建和git提交规范，eslint ，cz，hooks相关推荐

最新文章

热门文章