代码规范约定

0. Initialize

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HlUUqOJ1-1631704152516)(未命名.assets/image-20210915092350411.png)]

1. Editorconfig

.editorconfig，编辑器配置

# 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

2. Prettier

1、安装

项目和 VSCode 都装一下

npm install prettier -D

2、配置

.prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3、忽略

.prettierignore

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4、测试

package.json

{
  "scripts": {
    "prettier": "prettier --write ."
  }
}

3. ESLint

解决 ESLint 和 Prettier 的冲突，创建项目时如果选择了 Prettier，会自动安装下面插件

npm i eslint-plugin-prettier eslint-config-prettier -D

融合写法，.eslintrc.js

module.exports = {
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
};

4. Husky

npx husky-init && npm install

上面脚本至少会做 3 件事情

1、安装

npm i husky -D

2、创建 .husky 文件夹

npx huksy install

3、在 package.json 中添加脚本

{
  "scripts": {
    "prepare": "husky install"
  },
}

配置钩子，.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint

5. Git Commit Rules

1、安装 Commitizen

npm install commitizen -D

2、安装并初始化 cz-conventional-changelog

npx commitizen init cz-conventional-changelog -D

3、以后提交代码，使用 npx cz

4、package.json 中配置 cz 方便使用

{
  "scripts": {
    "commit": "cz"
  },
}

5、代码提交验证

如果我们按照 cz 来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？我们可以通过 commitlint 来进行限制

a，安装 @commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

b，在根目录创建 commitlint.config.js 文件，配置 commitlint

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

c，使用 husky 生成 commit-msg 文件，验证提交信息

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

即

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit