项目搭建规范
搭建项目
安装脚手架
npm i -g @vue/cli
创建脚手架
vue create vue-ts-cms
输入完如上命令会出现如下命令行交互选项
选择手动配置
勾选 Babel、TypeScript、CSS Pre-processors、Linter / Formatter
Router、Vuex 手动进行安装
选择 v3 版本
不使用 class 风格的 component
使用 Babel 处理 TypeScript
使用 Less 预处理器
使用 ESLint + Prettier
保存时对其进行 Lint
配置生成到单独文件
不用保存预设到项目
代码规范
集成 editorconfig 配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格
# http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
VSCode 需要安装一个插件:EditorConfig for VS Code
使用 prettier 工具
Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定
安装prettier
bashnpm i prettier -D
配置
.prettierrc
文件:- useTabs:使用tab缩进还是空格缩进,选择 false
- tabWidth:tab 是空格的情况下,是几个空格,选择 2 个
- printWidth:当行字符的长度,推荐 80,也有人喜欢 100或者 120
- singleQuote:使用单引号还是双引号,选择 true,使用单引号
- trailingComma:在多行输入的尾逗号是否添加,设置为 none
- semi:语句末尾是否要加分号,默认值 true,选择 false 表示不加
json{ "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": true, "trailingComma": "none", "semi": false }
创建
.prettierignore
忽略文件/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*
VSCode 需要安装一个插件:Prettier - Code formatter
在 package.json
中配置一个 scripts:
{
"prettier": "prettier --write ."
}
使用 ESLint 检测
VSCode 需要安装一个插件:ESLint
此时会出现 ESLint 和 Prettier 冲突问题:
- 需要安装如下插件解决
npm i eslint-plugin-prettier eslint-config-prettier -D
配置 eslint extends:
module.exports = {
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'plugin:prettier/recommended'
]
}
husky 和 eslint
虽然我们已经要求项目使用 eslint 了,但是不能保证组员提交代码之前都将 eslint 中的问题解决掉了:
- 我们需要在组员执行
git commit
命令的时候对其进行校验,如果不符合 eslint 规范,那么自动通过规范进行修复
那么如何做到这一点呢?可以通过 Husky 工具:
- husky 是一个 git hook 工具,可以帮助我们触发 git 提交的各个阶段:pre-commit、commit-msg、pre-push
使用自动配置命令进行安装
npx husky-init && npm i
这里会做三件事:
安装 husky 相关的依赖
在项目目录下创建
.husky
文件在
package.json
中添加一个脚本
接下来,我们需要去完成一个操作:在进行 commit 时,执行 lint 脚本
- 执行 git commit 的时候会自动对代码进行 lint 校验
git commit 规范
代码提交风格
通常我们的 git commit 会按照统一的风格来提交,这样可以快速定位每次提交的内容,方便之后对版本进行控制
但是如果每次手动来编写这些是比较麻烦的事情,我们可以使用一个工具:Commitizen
- Commitizen 是一个帮助我们编写规范 commit message 的工具
安装 Commitizen
bashnpm i commitizen -D
安装 cz-conventional-changelog
bashnpx commitizen init cz-conventional-changelog --save-dev --save-exact
在
package.json
中会自动生成如下配置json{ "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } }
这个时候我们提交代码需要使用 npx cz
:
选择 type(本次更新的类型)
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 代码回退 选择本次修改的范围(作用域)
选择提交的信息
提交详细的描述信息
是否是一次重大的更改
是否影响某个 open issue
我们也可以在 scripts 中构建一个命令来执行 cz:
代码提交验证
我们按照 cz 来规范了提交风格,但是依然有同事通过 git commit
按照不规范的格式提交应该怎么办呢?我们可以通过 commitlint 来限制提交
安装
@commitlint/config-conventional
和@commitlint/cli
bashnpm i @commitlint/config-conventional @commitlint/cli -D
在根目录创建
commitlint.config.js
文件,配置 commitlintjsmodule.exports = { extends: ['@commitlint/config-conventional'] }
使用 husky 生成 commit-msg 文件,验证提交信息:
bashnpx husky add .husky/commit-msg
注意:在 Windows 下不要直接执行
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
在
.husky/commit-msg
文件中加入如下命令bashnpx --no-install commitlint --edit