创建项目及代码格式提交规范（备注：遇见 2 个坑：yarn 问题、git cz 提交空格问题）

一、vue-cli 创建项目

vue-cli 版本应当大于 4.5.13

升级 vue-cli

1
npm update -g @vue/cli

创建项目

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
vue create vue3-admin

// 进入模板选择
Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features  // 选择手动配置
// ----------------------------------------------------------
? Check the features needed for your project:
 (*) Choose Vue version // 选择 vue 版本
 (*) Babel // 使用 babel
 ( ) TypeScript // 不使用 ts
 ( ) Progressive Web App (PWA) Support // 不使用 PWA
 (*) Router // 添加 vue-router
 (*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器
 (*) Linter / Formatter // 代码格式化
 ( ) Unit Testing // 不配置测试
 ( ) E2E Testing  // // 不配置测试
// ----------------------------------------------------------
 Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x // 选择 vue 3.0 版本
// ----------------------------------------------------------
 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由
// ----------------------------------------------------------
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
  Sass/SCSS (with node-sass)
  Less
  Stylus
// ----------------------------------------------------------
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案
  ESLint + Prettier
// ----------------------------------------------------------
? Pick additional lint features:
 (*) Lint on save //
>(*) Lint and fix on commit  // 保存时 && 提交时，都进行 lint
// ----------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 单独的配置文件
  In package.json
// ----------------------------------------------------------
 Save this as a preset for future projects? (y/N) n // 不存储预设

进入项目，然后启动项目

创建项目这里的坑:jest-worker@28.1.3: The engine “node” is incompatible with this module. Expe

解决方法： yarn config set ignore-engines true

二、ESLint 和 Prettier 解决代码格式问题

创建项目时，已经选择了 eslint，配置文件为.eslintrc.js

vscode 下载prettier插件，创建.prettierrc 文件，配置如下：

1
2
3
4
5
6
7
8
{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}

vscode 设置中，搜索Format On Save,然后勾选在保存时格式化文件。

还要解决一个问题就是 eslint 和 prettier 的冲突问题，例如 created 钩子函数后面会有一个空格，prettier 会将空格去掉

解决方法：

1
2
// .eslintrc.js  rules规则下添加
'space-before-function-paren': 'off'

三、git 提交规范

1、全局安装 commitizen

1
npm install -g commitizen@4.2.4

2、安装并配置 cz-customizable

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

配置：

1
2
3
4
5
6
// package.json
"config":{
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

3、根目录下创建.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
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文字长度默认是72
  subjectLimit: 72,
};

4、使用 git cz 代替 git commit

5、git hooks 校验提交信息

2 个工具的的使用：

  1. commitlint：用于检查提交信息
  1. husky：是git hooks工具

npm 版本大于 7.x

5.1 安装 commitlint

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

5.2 创建 commitlint.config.js(编码格式为 UTF-8)

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
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],
  },
};

5.3 安装 husky

1
2
3
4
5
6
7
8
9
10
11
12
npm install husky@7.0.1 --save-dev
// 启动hooks，生成.husky
npx husky install

// 在 `package.json` 中生成 `prepare` 指令（ **需要 npm > 7.0 版本** ）
npm set-script prepare "husky install"

// 执行 `prepare` 指令
npm run prepare
// 添加 `commitlint` 的 `hook` 到 `husky`中，并指令在 `commit-msg` 的 `hooks` 下执行 `npx --no-install commitlint --edit "$1"` 指令

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

不符合规范的将不能提交

5.4 通过 pre-commit 检测提交时代码规范

1
2
3
4
// 执行
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
 // 添加 `commit` 时的 `hook` （`npx eslint --ext .js,.vue src` 会在执行到该 hook 时运行
// 上面操作会在.husky文件下生成pre-commit

vscode 提交
源代码管理 -> stage all changes -> git cz -> 选择提交类型 -> git push

git cz

这里有个坑：

在请简要描述提交（必填） 这一步填写信息时，需要加一个空格

5.5 lint-staged 自动修复格式错误(无需安装，创建项目时自带)

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

修改 .husky/pre-commit 文件

1
2
3
4
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged