写这篇文章的目的很明确，最近学习了代码规范的一些知识点，然后记录下来，以便后续查阅。
代码规范在我看来其实是很虚的，只要开发的同事之间约定好一些规范，大家严格按照这套规范来实行，那也不需要搭建什么代码规范的辅助工具了。
但是，人的精力和耐心是有限的，我们只能通过一些被动的“强制手段”，来限制大家。
B话不多说了，整活。
本文的实例代码 💻 下载地址。

初始化一个项目

代码规范是针对开发流程的，并不针对前端框架的选择，你甚至可以用原生JS开发，都是可以使用这套规范的。在此，笔者使用Vue CLI作为搭建这套代码规范的载体。（你也可以使用React相关的技术搭建）。
首先在命令行工具内输入vue -V，看看本地的Vue CLI工具的版本是多少，笔者如下：
image.png

注意，4.5.13这个版本，初始化 Vue 项目，Vue 的版本是3.0.0，而最新的3.2.x版本里，才可以使用script setup能力。

接下来找一个空的文件夹，通过Vue CLI初始化一个项目，如下所示：

  1. vue create vue-demo

选择 Manually select features，自定义选择，选项如下：
image.png

注意，这里 ESLint 的规范使用 Starndard 规范，通过修改 .eslintrc.js 文件的 rules 属性，来控制你需要的规则。

通过npm run serve指令启动项目，我们尝试修改views/Home.vue文件如下：

  1. name: "Home", // 将单引号改成双引号

控制台会报错如下所示：
image.png
红色箭头出表示规则的属性值，这里是quotes表示引号的问题，必须使用单引号，这里是严格的报错，不符合规范便提示错误。我们可以通过修改.eslintrc.js中的rules属性，来控制报错的等级，如下所示：

  1. // .eslintrc.js
  2. module.exports = {
  3.   root: true, // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  4.   // env 表示启用 ESLint 检测的环境
  5.   env: {
  6.     node: true, // 在 node 环境下启动 ESLint 检测
  7.   },
  8.   // ESLint 中基础配置需要继承的配置
  9.   extends: [
  10.     'plugin:vue/vue3-essential',
  11.     '@vue/standard'
  12.   ],
  13.   // 解析器
  14.   parserOptions: {
  15.     parser: 'babel-eslint'
  16.   },
  17.   // 需要修改的启用规则及其各自的错误级别
  18.   /**
  19.    * "off" 或 0 - 关闭配置
  20.    * "warn" 或 1 - 开启规则，使用警告级别的错误：warn（不会导致程序退出）
  21.    * "error" 或 2 - 开启规则，使用错误级别的错误：error（当被触发的时候，程序会退出）
  22.    */
  23.   rules: {
  24.     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  25.     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  26.     'quotes': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  27.     // 这里添加 quotes 属性规则，关闭该配置
  28.   }
  29. }

重新启动项目，双引号的错误提示就不会再报错：
image.png
以此类推，当你想要某些规则不被严格执行的时候，就在rules属性中添加需要的配置。

prettierrc

程序员都是“懒人”，我现在想要在保存的时候自动执行格式化，而不是手动去修改。
首先我们需要安装VSCode插件，如下所示：
image.png
安装完成后，在根目录新建一个.prettierrc文件，如所示：

  1. {
  2.   "semi": false, // 清理句末的分号
  3.   "singleQuote": true, // 严格单引号
  4.   "trailingComma": "none" // 多行对象下，最后一行尾部去除逗号
  5. }

重启VSCode后，打开views/Home.vue，右键选择如下：
image.png
点击后，双引号便会被格式化为单引号。
如果你的VSCode中装有多个规则，请先选择使用...格式化文档，选择如下所示：
image.png
通过它来格式化代码。
笔者希望通过保存操作，直接格式化当前脚本的代码。首先，找到VSCode左下角的设置图标，点击“设置”，搜索如下所示：
image.png
勾选上上图中的箭头选项，每次保存的时候，便会自动格式化代码。如下所示：
Kapture 2022-05-26 at 09.57.01.gif

默认执行的是项目根目录下的 .prettierrc 文件，建议每个项目都设置一下。

git commit 提交规范

开发项目的过程中，免不了出现多人合作的情况。这种情况下，每个人提交的代码差异性很大，有可能会出现交叉修改互相代码的情况。此事，git commit提交信息的规范，显得尤为重要。
目前市面上比较流行的提交规范如下链接：
https://www.conventionalcommits.org/zh-hans/v1.0.0/
上述位约定式的提交规范，看起来非常麻烦的样子。需要引入一个插件解决这个提交的问题。
Commitizen工具，简称是cz。首先我们要全局安装它：

  1. npm i -g commitizen@4.2.4 // 姑且安装笔者指定的版本，避免不必要的麻烦，下面就不赘述了。

在项目内安装插件：

  1. npm i cz-customizable@6.3.0 -D

并在package.json配置执行的路径如下：

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

紧接着，在项目根目录下新建配置文件.cz-config.js，把配置参数写入：

  1. module.exports = {
  2.   // 可选类型
  3.   types: [
  4.     { value: 'feat', name: 'feat: 新功能' },
  5.     { value: 'fix', name: 'fix: 修复' },
  6.     { value: 'docs', name: 'docs: 文档变更' },
  7.     { value: 'style', name: 'style: 代码格式（不影响代码运行的变动）' },
  8.     {
  9.       value: 'refactor',
  10.       name: 'refactor: 重构（既不是增加features，也不是修复bug）'
  11.     },
  12.     { value: 'pref', name: 'pref: 性能优化' },
  13.     { value: 'test', name: 'test: 增加测试' },
  14.     { value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },
  15.     { value: 'revert', name: 'revert: 回退' },
  16.     { value: 'build', name: 'build: 打包' },
  17.   ],
  18.   messages: {
  19.     type: '请选择提交类型',
  20.     customScope: '请输入修改范围（可选）:',
  21.     subject: '请简要描述提交（必填）:',
  22.     body: '请输入详细描述（可选）:',
  23.     footer: '请输入要关闭的issue（可选）:',
  24.     confirmCommit: '确认使用以上信息提及？(y/n)'
  25.   },
  26.   // 跳过问题
  27.   skipQuestions: ['body', 'footer'],
  28.   subjectLimit: 72
  29. }

接下来便可以通过 git cz指令，代替之前的git commit指令，输入git cz周玲，提示如下表示成功：
image.png

husky + commitlint

你不能保证每个开发者本地都配置了commitizen，所以需要在他执行git commit -m 'xxx'的时候，提醒他要按照规范提交代码。
首先安装需要的依赖，安装到开发环境下：

  1. yarn add @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4 -D

在根目录新建检查提交需要的配置，新建文件commitlint.config.js内容如下：

  1. module.exports = {
  2.   // 继承的规则
  3.   extends: ['@commitlint/config-conventional'],
  4.   // 定义规则类型
  5.   roles: {
  6.     // type 的类型定义：表示 git 提交的type必须在以下的类型中
  7.     'type-enum': [
  8.       // 当前验证的错误级别
  9.       2,
  10.       // 在上面情况下进行验证
  11.       'always',
  12.       // 范型里面的内容是什么
  13.       ['feat', 'fix', 'docs', 'style', 'refactor', 'pref', 'test', 'chore', 'revert', 'build']
  14.     ],
  15.     // subject 大小写不做校验
  16.     'subject-case': [0]
  17.   }
  18. }

上面的配置大致是，在任何情况下，提交的内容没有上面数组中的内容，表示为“不规范”，给予“错误级别”的提醒。
再结合husky，在开发环境下安装husky：

  1. yarn add husky -D

然后再执行npx husky install，会在根目录生成.husky文件夹。再执行指令npm set-script prepare "husky"，目的是在package.json文件下添加一条script属性，如下：
image.png
然后执行npm run prepare，再执行如下指令，让husky去跑commit检测规范：

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

上述指令的目的，是在.husky文件夹下新建一个commit-msg文件，写入npx --no-install commitlint --edit "$1"指令。
随后我们尝试提交一下代码，如下所示表示成功检测到不符合commit的提交规范：
image.png
我们需要通过git cz去完成提交。
image.png

husky + eslint

ESLint + Prettier 的校验代码规范模式，只能在本地执行。如果有些同学本地没有安装这些插件，提交代码的话，会把线上的代码搞得一团糟。所以，这里通过husky结合eslint，在提交代码的时候，进行校验。如果不符合eslint规范，则报错。
再添加一个husky的勾子，执行如下指令，在.husky文件夹下添加新的文件pre-commit：

  1. npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

上述指令的意思就是在提交之前，验证一下js和vue结尾的文件。
笔者故意将代码格式写错，如下所示：
image.png
提交代码git cz，会出现如下报错：
image.png
这就是在提交代码的时候，对代码规范进行检测。
光检测还不算完事，我已经懒到想让插件帮我自动修复这些出现警告的代码，通过lint-staged自动修复它们。
首先安装插件：

  1. yarn add lint-staged@9.5.0 -D

修改package.json如下所示：

  1. "gitHooks": {
  2.     "pre-commit": "lint-staged"
  3.   },
  4.   "lint-staged": {
  5.     "src/**/*.{js,vue}": [
  6.       "eslint --fix",
  7.       "git add"
  8.     ]
  9.   }

紧接着修改./husky/pre-commit如下：

  1. #!/bin/sh
  2. . "$(dirname "$0")/_/husky.sh"
  4. npx lint-staged

当提交代码后，会先检测代码是否符合eslint规范，如果不符合，会被自动修复。
Kapture 2022-06-08 at 14.58.15.gif