GitHook 工具 —— husky（格式化代码）

代码风格

为什么要统一代码格式风格？

1. 团队开发，每个人编辑器不同，编码方式不同，导致代码格式不同，代码难看，难以维护
2. 保持代码可读性，团队成员之间的代码更加易读

使用的工具？

1. husky：Git hooks 工具
   • 对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序
2. lint-staged：检测文件插件
   • 只检测git add . 中暂存区的文件，对过滤出的文件执行脚本
3. prettier：代码格式化工具
   • 代码风格管理
4. eslint：插件化JavaScript代码检测工具
   • 编码规范

安装与使用

husky

npm install husky@4.2.5 --save-dev（v5暂时不能用）
or
yarn add husky@4.2.5 -D

// 在package.json 中添加以下代码
"husky": {
  "hooks": {
      // 提交commit时触发
    "pre-commit": "lint-staged",
      // 检测commit的message时触发
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
},

lint-staged

npm install lint-staged --save-dev
or
yarn add lint-staged -D

// 在package.json 中添加以下代码
"lint-staged": {
    // 匹配暂存区所有的js，vue文件，并执行命令
  "*.{js, vue}": [
    "prettier --write",
    "eslint --cache --fix",
    "git add"
  ]
},

eslint

1. eslint-plugin-vue
   • vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南）
2. eslint-plugin-prettier
   • 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint在后面
3. eslint-config-prettier
   • 让所有可能与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
4. @babel/eslint-parser
   • 该解析器允许你使用Eslint校验所有babel code
   • 仅支持最新的最终ECMAScript标准，不支持实验性语法
   • 该编译器会将code解析为Eslint能懂的EsTree（ES2021语法等等）

npm install --save-dev eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser
or
yarn add -D eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser

// 在根目录新建 .eslintrc.js，并添加以下代码
module.exports = {
  root: true,
  parserOptions: {
    parser: '@babel/eslint-parser',  // 解析器
    sourceType: 'module',
    ecmaVersion: 12
  },
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',  // plugin-vue
    'eslint:recommended',  // eslint
    'plugin:prettier/recommended'  // plugin-prettier
  ],

  rules: {
    'prettier/prettier': 'error'
  }
}

prettier

npm install --save-dev prettier
or
yarn add prettier -D

// 在根目录新建 .prettierrc.json 并添加以下代码
{
  "singleQuote": true,  // 使用单引号
  "semi": false,  // 不使用分号
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "none",
  "tabWidth": 2
}

editorconfig

• 定义文件代码规范，保持一致的编码样式

// 在根目录创建 .editorconfig 文件，添加以下代码
root = true

[*]
# 设置字符集
charset = utf-8
# 缩进风格
indent_style = space
# 缩进空格
indent_size = 2
# 结尾换行
end_of_line = crlf
# 文件末尾换行符
insert_final_newline = true
# 删除代码前后空格
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

commit 规范

commitlint

• 每次提交时，检测git commit -m “message”中message的内容是否符合规范

npm install --save-dev @commitlint/config-conventional @commitlint/cli
or
yarn add @commitlint/config-conventional @commitlint/cli -D

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js
// 在根目录创建的commitlint.config.js 中添加以下代码
module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 检测规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'docs',
        'style',
        'refactor',
        'perf',
        'test',
        'chore',
        'revert',
        'build'
      ]
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72]
  }
}

commitizen
git commit 的 message 提交标准

npm install --save-dev commitizen cz-customizable
npm install -g commitizen
or
yarn add commitizen cz-customizable -D
yarn global add commitizen

// 在package.json 中添加以下代码
// 这里用的自定义commitizen，使用git-cz执行命令
"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  }
}

总结

代码规范能够很好地提升编码效果，提升团队的代码维护性，并且对后续代码扩展有着良好效果。因此，在编码过程中需要考虑代码扩展性和维护性，代码规范是不可缺少的。