【代码提交规范自动化、前端工作流】Eslint+Prettier+husky(v7.0.1)+commitlint+lint-staged(v11.1.2)

FinnChen
956 阅读6分钟

1.前言

在小组开发过程中，每个人写代码的风格不尽相同，导致上传到仓库的代码风格百花齐放，不利于维护和阅读。受到川佬文章的启发，尝试搞一套自己的工作流。此外，在commit时候的描述也是很重要的，所以多人开发情况下，统一代码规范很有必要。

2.工具介绍

ESlint

一款配置化代码检查工具，约束你的开发规范，详见ESlint官网

Prettier

一款代码格式化工具，搭配Eslint，详见Prettier官网

Husky

一款Githook工具，让配置 git 钩子变得更简单，支持所有的git钩子。详见husky

commitlint

git commit 规范提交工具,详见commitlint官网

lint-staged

在代码commit之前，进行代码规则检查,避免不规则代码进入仓库，lint-staged能够让lint只检测暂存区的文件，速度很快。详见lint-staged

3.基础配置

强烈建议这些搭建工作在项目建立初期就开始，在后期再加入这些规范是一件很痛苦的事[😭]。

配置Eslint

新项目利用vue UI 创建项目时选择ESlint+Prettier,即可 如果项目中没有用到ESlint或Prettier，得安装两者兼容的包，此处不多赘述。 在项目根目录下建立.eslintrc.js文件，完整配置参考官网或者在仓库里，可根据需要取舍

// eslint定义值含义
// 0 禁用此规则
// 1 不符合规则即给出警告
// 2 不符合规则即报错
module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
    parserOptions: {
      parser: "babel-eslint",
    },
    rules: {
      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
      "vue/name-property-casing": ["error", "PascalCase"],
      "vue/no-v-html": "off",
      // 两个空格缩进
      "indent": [
        2,
        2,
        {
          "SwitchCase": 1,
        },
      ],
      // 单引号
      "quotes": [
        2,
        "single",
        {
          "avoidEscape": true,
          "allowTemplateLiterals": true,
        },
      ],
    ....
    ....
    ....
      // function关键字和函数名后面的空格
      // "space-before-function-paren": [2, "never"],
      // 除了null,其他用===而不是==
      "eqeqeq": ["error", "always", {
        "null": "ignore"
      }],
    //当使用第三方的SDK时，eslint会报找不到，可以加入到globals，取消对这个的检查
    globals: {
      fengmap: true,
    },
  };

同时，可建立.eslintignore文件，校验时排除哪些文件

build/*.js
src/assets
public
dist

配置Prettier

在项目根目录下建立.prettierrc.js文件，配置如下：

module.exports = {
    // 最大长度80个字符
    "printWidth": 80,
    // 行末分号
    "semi": false,
    // 单引号
    "singleQuote": true,
    // JSX双引号
    "jsxSingleQuote": false,
    // 尽可能使用尾随逗号（包括函数参数）
    "trailingComma": "none",
    // 在对象文字中打印括号之间的空格。
    "bracketSpacing": true,
    // > 标签放在最后一行的末尾，而不是单独放在下一行
    "jsxBracketSameLine": true,
    // 箭头圆括号
    "arrowParens": "avoid",
    // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
    "insertPragma": false,
    // 缩进
    "tabWidth": 2,
    // 使用tab还是空格
    "useTabs": false,
    // 行尾换行格式
    // "endOfLine": "auto",
    "HTMLWhitespaceSensitivity": "ignore"
  }

如果使用的VSCode,实现保存自动格式化，操作如下：
安装eslint，prettier，vetur插件 在vscode，setting.json中添加，即可实现保存自动格式化：

"eslint.autoFixOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true, // 是否开启vscode的eslint
    "eslint.options": { // 指定vscode的eslint所处理的文件后缀
        "extensions": [
            ".js",
            ".vue",
            ".ts",
            ".tsx"
        ]
    },
    "eslint.validate": [
        "vue",
        "html",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "vetur.format.defaultFormatter.html": "prettier",
    "prettier.endOfLine": "auto",

配置Husky

首先执行安装命令 npm install husky --save-dev

要在安装后自动启用钩子，我们需要执行npm set-script prepare "husky install"
执行之后即可在package.json中看到：

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

如果npm set-script命令不能执行，可在package.json中手动添加，也可升级npm版本至7.x，执行npx husky-init命令，快速初始化一个husky，会看到目录下生成了一个.husky文件夹

配置lint-staged

执行 npm install lint-staged -D 命令, 在package.json添加如下代码(指定检查文件，详细配置可见官网)：

"script": {...},
"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add ."
    ]
  },

配置commit规范

配置commit规范有两种方式，第一种是利用commitlint，第二种利用自定义规则(尤大用的是自定义规则)

利用commitlint

执行安装命令npm install -g @commitlint/cli @commitlint/config-conventional

在根目录新建commitlint.config.js文件，添加如下代码(这里@commitlint/config-conventional 提供了官方的规则扩展，更多配置见官网)：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 自定义规则, name: [0, 'always', 3], 数组第一位0为disable，1为warning，2为error
  // 第二位 应用为否 值为, always|never
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'udp', // 更新某项功能
        'feat', // 新功能
        'fix', // 修补bug
        'style' // 格式
      ]
    ]
  }
}

利用自定义规则

安装chalk(用于终端显示多色彩输出)，执行npm install chalk 在项目根目录新建verifyCommit.js文件，添加如下代码：

const chalk = require('chalk')
chalk.level = 1
const msgPath = process.env.HUSKY_GIT_PARAMS || '.git/COMMIT_EDITMSG'
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
const commitRE = /^[\d+]:\s.{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    chalk.red(`  描述不规范，示例\n`) +
      chalk.red(`  [修复]: xxx\n`) +
      chalk.red(`  或者\n`) +
      chalk.red(`  [新增]: xxx\n`)
  )
  process.exit(1)
}

至此，基本配置项已经完毕，接下来是实现

4.实现

实现效果示例：

1.在提交之前检查代码并格式化，利用commitlint检查commit信息，提交之后执行git pull,git push命令

2.在提交之前检查代码并格式化，利用自定义commit规则检查commit信息，提交之后执行git pull,git push命令

实现一

添加钩子，执行npx husky add .husky/pre-commit 'npx lint-staged'(注意，如果使用项目使用的是npm，此处使用的是npx，而非npm） 执行命令后会在.husky文件下生成一个pre-commit文件，内容如下：

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

npx lint-staged

执行npx husky add .husky/commit-msg "npx commitlint -e $1",执行命令后会在.husky文件下生成一个commit-msg,内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx commitlint -e $1

执行npx husky add .husky/post-commit "git pull, git push",执行命令后会在.husky文件下生成一个post-commit,内容如下：

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

git pull
git push

生成的钩子文件里的命令可以根据自己需要随意修改。

「测试：」 在App.js里随意增加东西，同时将制造一些违反eslint规则的写法，如单引号改为双引号

执行git add .,之后commit时，填写描述随意写，执行git commit -m '45566' 如图，由于描述不规范，会被终止提交

改为正确的描述，执行git commit -m "feat: '新功能'",如图：提交成功，同时，之前写的代码也会根据eslint规则格式化

实现二

添加钩子部分同实现一，唯一不同的是，生成commit-msg文件时，使用自定义规则，执行npx husky add .husky/commit-msg "npx node verifyCommit.js，在.husky文件下生成commit-msg，内容如下：

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

npx node verifyCommit.js

「测试：」 测试方法实现一，在commit时候，执行git commit -m '45566'，如图，提交信息不规范，终端终止

改为正确的描述，执行git commit -m "[新增]：好家伙",提交成功

资源导航

文中仓库地址：gitee.com/NexusFeng/e…

avatar
文章
阅读
粉丝