Vue 项目工程化配置

创建项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
vue create vue-admin

? Please pick a preset: Manually select features

? Check the features needed for your project:
◉ Choose Vue version // vue3
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x

? Use history mode for router? (Requires proper server setup for index fallback in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)

? Pick a linter / formatter config: Standard

? Pick additional lint features:
◉ Lint on save
❯◉ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

代码格式化

如果是通过上述方式创建项目则默认在根目录存在 .eslintrc.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/vue3-essential", "@vue/standard"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
quotes: "warn",
},
};

代码自动格式化

使用 prettier 配置格式化规则使项目代码自动格式化并满足 eslint 需求

安装依赖

1
yarn add prettier -D

配置规则

1
2
3
4
5
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}

Webstorm配置Prettier

规范 git 提交

安装依赖

1
2
yarn add cz-customizable -D
yarn add commitizen -D

配置 cz-customizable

在 package.json 中添加配置

1
2
3
4
5
"config": {
"commitizen": {
"path": "node_modules/cz-customizable" // 依赖安装位置
}
}

配置提示文件

在项目根目录创建文件.cz-config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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: 打包",
},
{
value: "",
name: "",
},
],
// 消息步骤
messages: {
type: "请选择提交类型:",
customScope: "请输入修改范围(可选):",
subject: "请简要描述提交(必填):",
body: "请输入详细描述(可选):",
footer: "请输入要关闭的issue(可选):",
confirmCommit: "确认使用以上信息提交(y/n/e/h)",
},
// 跳过问题
skipOption: ["body", "footer"],
// subject文字长度默认是72
subjectLimit: 72,
};

校验提交

安装依赖

1
2
3
yarn add @commitlint/config-conventional @commitlint/cli -D
yarn add husky -D
yarn husky install

配置规则

在 script 中添加脚本

1
"prepare": "husky install"

创建 shell 脚本

1
2
# 检查提交信息
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

在项目根目录创建 commitlint.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
extends: ["@commitlint/config-conventional"],
// 定义规则
roles: {
// type的类型定义
"type-enum": [
// 当前验证的错误级别
2,
"always",
// 泛型内容
[
"feat",
"fix",
"docs",
"style",
"refactor",
"perf",
"test",
"chore",
"revert",
"build",
],
],
// subject 不做大小写校验
"subject-case": [0],
},
};

使用 lint-staged 自动修复错误

1
2
3
4
5
6
7
// package.json
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}

使用 husky 在提交前触发 lint-staged

1
2
yarn husky add .husky/test "git add .
yarn lint-staged"

以上配置会在提交发生错误时自动尝试修复并提交