在编译器中 编写代码时 就会采用 .editorconfig 文件中的规范。
#[采用的相对路径以这个文件开始]
root = true
#匹配所有文件
#缩进采用tab、大小为4、编码utf-8、删除行尾空格、最后一行是空白行 、文件最大行223行
[*]
indent_style = tab
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 233
#.prettierrc采用的规则
[.prettierrc]
indent_style = space
indent_size = 2
#.yml .yaml .json 文件采用的规则
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2
#由于root=true ,test文件夹和.editorconfig文件应在同一文件夹内
#test/cases/parsing/bom/ 文件下的bomfile.css bomfile.js
[test/cases/parsing/bom/bomfile.{css,js}]
charset = utf-8-bom
#所有markdown文件的规则
[*.md]
trim_trailing_whitespace = false
执行这个配置文件,需要在 vscode 中安装 editorconfig for vscode 插件。
格式化代码时 的规范
安装 prettier 开发时依赖
在.prettierrc文件中写规范
{
"useTabs": false,
"singleQuote": true,
"overrides": [
{
"files": "*.vue",
"options": {
"parser": "vue"
}
}
],
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "none",
"semi": true
}
在保存项目中单个文件时,就会采用配置文件,但是一个一个文件去保存就比较慢,需要一个指令。
在 package.json中写"prettier": "prettier --write ."
在命令行中执行 npm run prettier
如果项目中右一些文件不需要在格式化的时候修改,可以写在.prettierignore中
也需要vscode 中下载 prettier 插件。
语法检查工具,编码不规范的地方下面右下划线。因为 prettier 是格式化代码用的,所以需要格式化成 eslint 规定的语法格式,就需要 prettier 和 eslint的规范统一。
// .eslintrc.js
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
'plugin:prettier/recommanded'
]
需要在项目代码提交之前做代码规范的验证,husky 是 git hook 工具,帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push
如果你的 Vue 项目已经安装了 husky,但是在提交代码时没有执行 pre-commit 中的指令,有可能是以下原因导致的:
你没有在项目根目录下创建 .husky/pre-commit 文件。在这个文件中,你需要定义要在提交代码之前执行的指令。例如:
#!/bin/sh
npm run lint
这个文件的内容表示在执行 git commit 命令之前,先执行 npm run lint 命令进行代码检查。
.husky/pre-commit 文件没有执行权限。你可以使用以下命令为文件添加执行权限:
chmod +x .husky/pre-commit
你在提交代码时使用了 --no-verify 参数。这个参数可以跳过 husky 的钩子函数,导致 pre-commit 中的指令没有被执行。如果你需要强制提交代码而不执行 pre-commit 中的指令,可以使用 git commit --no-verify 命令。
如果你已经检查了以上内容,仍然无法执行 pre-commit 中的指令,可以尝试卸载 husky 并重新安装。具体操作如下:
在项目根目录下,运行以下命令卸载 husky:
npm uninstall husky
删除 .git/hooks 目录下的所有文件。
重新安装 husky:
npm install husky --save-dev
在项目根目录下,运行以下命令初始化 husky:
npx husky-init && npm install
这个命令会重新创建 .husky 目录,并在其中添加一些必要的文件。
在 .husky/pre-commit 文件中定义要执行的指令。
运行以下命令为 .husky/pre-commit 文件添加执行权限:
chmod +x .husky/pre-commit
现在,重新提交代码,看看 pre-commit 中的指令是否被正确执行了。
commitizen 工具
插件安装:npm i commitizen -D
安装cz-conventional-changelog,并且初始化cz-conventional-changelog:
npx commitizen init cz-conventional-changelog --save-dev --save-exact
执行上面的指令之后,在package.json中会进行配置:
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
提交代码需要使用 npx cz,但是在执行这个指令之前需要先执行 git add
第一步是选择type,本次更新的类型
feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing tests or correcting existing tests
翻译
| Type | 作用 |
| -------- | ------------------------------------------------------------ |
| feat | 新增特性 (feature) |
| fix | 修复 Bug(bug fix) |
| docs | 修改文档 (documentation) |
| style | 代码格式修改(white-space, formatting, missing semi colons, etc) |
| refactor | 代码重构(refactor) |
| perf | 改善性能(A code change that improves performance) |
| test | 测试(when adding missing tests) |
| build | 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等) |
| ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等 |
| chore | 变更构建流程或辅助工具(比如更改测试环境) |
| revert | 代码回退 |
Select the type of change that you're committing: feat: A new feature
第二步选择本次修改的范围(作用域)
What is the scope of this change (e.g. component or file name): (press enter to skip) project init
第三步选择提交的信息
Write a short, imperative tense description of the change (max 80 chars):
(20) this is project init
第四步提交详细的描述信息
Provide a longer description of the change: (press enter to skip)
this is a longer description
第五步是否是一次重大的更改
Are there any breaking changes? No
第六步是否影响某个open issue
Does this change affect any open issues? No