前端代码规范配置

前端代码规范配置

涉及到了eslint、prettier、husky、lint-staged等工具包的使用。

代码规则校验

使用eslint定义代码风格

安装eslint并在.eslintrc.js文件中配置。

npm i eslint -D

这个代码风格可以使用公司团队内的规范，如果没有可以在github中找到一些主流的规则，比如说eslint-config-google或者eslint-config-alloy。

这里使用eslint-config-alloy（需要通过npm引入）

module.exports = {
  extends: [
    'alloy'
  ]
}

虽然配置了eslint但是每次都需要手动执行eslint xxx命令去校验代码中是否存在错误、不规范的写法。如果使用vscode这个编辑器的话可以直接安装Eslint这个插件，这样在编写代码的时候就会实时监测代码中存在的异常并标红，不需要执行eslint xxx命令。

自动格式化

prettier是一个代码格式化工具，可以通过自定义规则来重新规范项目中的代码，去掉原始的代码风格，确保团队的代码使用统一相同的格式。

安装prettier并在.prettierrc.js文件中进行配置。

npm i prettier -D

具体配置看团队，以下仅为示例：

module.exports = {
  useTabs: true,
	tabWidth: 2,
	printWidth: 80,
	trailingComma: 'all'
}

配置好后执行npx prettier --check .可以查看当前所有文件是否符合配置，执行npx prettier --write .则可以直接在原文件上格式化。在vscode上也存在prettier插件，安装后在保存文件的时候就会根据根目录下的.prettierrc.js配置自动执行prettier进行格式化。

解决prettier和eslint冲突

在代码格式化时采用Perttier规则，而我们代码校验使用的是ESLint，如果同一个规则配置不一致，往往就会出现冲突问题；

安装eslint-config-prettier插件配置集，把其配置到.eslintrc.*规则的尾部。执行ESLint命令，会禁用那些和Prettier配置有冲突的规则。
安装eslint-plugin-prettier插件，先使用Prettier对代码进行格式化，再并对不一致的地方进行标记；
这两个包配合使用，可以达到运行 eslint --fix 时，采用Prettier的配置规则来格式化文件。

.eslintrc.js文件最终变成：

module.exports = {
  plugins: ["prettier"],
  extends: ["alloy", "plugin:prettier/recommended"],
};

提交校验

虽然通过eslint、prettier可以控制代码风格，但是配置依旧容易被篡改，这个时候需要做一些防范措施。

在提交代码时校验代码

安装husky、lint-staged，可以在提交代码的时候校验暂存区里的代码，只有通过校验的代码才允许提交，通过还可以规范commit的注释。

安装：

cnpm i husky lint-staged -D

执行npx husky install创建.husky目录并指定该目录为git hooks所在的目录。

添加git hooks，husky支持git的所有钩子，示例只使用pre-commit、commit-msg

创建pre-commit钩子

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

可以看到.husky目录下生成commit-msg、pre-commit两个文件。

在这两个文件中都只是配置了一个指令，比如说pre-commit就是一个npx lint-staged用于检查暂存区的文件。

在package.json中配置lint-staged。

{
  "lint-staged": {
    "*.js": [
      "prettier --write ."
      "eslint --cache"
    ]
  },
}

校验commit

而commit-msg这里可以自定义一套git提交规范（比如说vuejs/core），也可以使用commitlint

vuejs/core的代码提交规范:

import chalk from 'chalk'
import { readFileSync } from 'fs'
import path from 'path'

const msgPath = path.resolve('.git/COMMIT_EDITMSG')
const msg = readFileSync(msgPath, 'utf-8').trim()

const commitRE =
  /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
      `invalid commit message format.`
    )}\n\n` +
      chalk.red(
        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
      ) +
      `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
      `    ${chalk.green(
        `fix(v-model): handle events on blur (close #28)`
      )}\n\n` +
      chalk.red(`  See .github/commit-convention.md for more details.\n`)
  )
  process.exit(1)
}

使用commitlint

安装

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

新建commitlint.config.js

以下是示例，可以自行配置

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "style",
        "refactor",
        "perf",
        "test",
        "build",
        "chore",
        "revert",
      ],
    ],
    "subject-max-length": [1, "always", 150],
  },
};