打造团队代码规范

打造团队代码规范

  • EditorConfig
  • Prettier
  • ESLint
  • Husky
  • Lint-staged
  • Commitizen

EditorConfig

帮助一个团队多个开发人员在使用不同IDE和编辑器开发同一个项目时，能保持同样的编码风格

Prettier

一款十分好用的代码格式化工具

通过编写.prettierrc

ESLint

一个检查代码质量和风格的工具，并且可以支持自动修复

  1. 安装
1
npm i eslint -D
  1. 配置
1
npx eslint --init

image-20210509135204307

  1. 第二步完成后，会自动生成一个.eslintrc.js文件

如有额外的规则，可以在文件中的rules进行追加

  1. vscode中下载插件
  2. 如果需要保存文件时，自动进行修复，则在vscode配置中，添加如下配置
1
2
3
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

  1. 解决prettier和ESLint的冲突

    a. 下载插件

1
2
npm install -D --save-exact prettier
npm i eslint-plugin-prettier eslint-config-prettier -D

​ b. 添加插件

1
2
3
4
5
6
7
8
9
module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

husky

husky: 一套git hook工具，可以在git提交时配合ESLint进行代码格式和质量校验

  1. 配置husky
1
npx husky-init && npm install

上述命令会自动安装husky依赖，在项目根目录创建.husky目录，目录下有一个pre-commit文件，里面有一个npm test的默认指令，它在git提交时会运行，除此之外，还在package.json的script添加一条命令husky install

  1. 修改pre-commit指令
1
eslint --fix ./src --ext .vue,.js,.ts

配置完以后，git提交时，会检索所有文件，但是我们只想检索我们修改的文件，这时候需要另一个工具lint-staged配合

lint-staged

它可以让 husky 的 hook 触发的命令只作用于 git add那些文件（即 git 暂存区的文件），而不会影响到其他文件

  1. 安装
1
npm i lint-staged -D
  1. 添加package.json
1
2
3
"lint-staged": {
  "*.{vue,js,ts}": "eslint --fix"
}
  1. 修改 .husky/pre-commit hook 的触发命令为：npx lint-staged
1
npx lint-staged

和sourceTree配合使用

正常情况下，使用sourceTree提交代码，触发husky钩子的时候，会提示报错，npx命令没有找到，此时在pre-commit文件添加一条代码就行

1
export PATH=/usr/local/bin:$PATH

规范commit提交信息

  1. 安装Commitizen
1
npm install commitizen -D
  1. 初始化项目
1
npx commitizen init cz-conventional-changelog --save-dev --save-exact
  1. 使用git cz提交