「前端项目规范化改造」

A 29, 2022·

前言

前端项目的规范一般分为代码格式规范与Git commit规范，代码格式规范一般使用ESLint,Prettier来实现，git commit规范则使用Commitizen来实现。为了能在git hooks中自动执行这2个检查，又会引入Husky、Lint-stage和commitlint。它们之间的关系如下图：

Snipaste_2022-08-08_21-40-11

本文对这几种工具的安装与联动进行了详细说明。

Prettier

Prettier 是一个流行代码格式化工具。

安装依赖

pnpm add -D prettier

script

package.json

{
  "script": {
    "format:code": "prettier --write \"src/**/*.(vue|js|ts|css|scss)\""
  }
}

配置文件

.prettierrc.js

module.exports = {
  printWidth: 80, // 换行字符串阈值
  tabWidth: 2, // 设置工具每一个水平缩进的空格数
  useTabs: false,
  semi: false, // 句末是否加分号
  vueIndentScriptAndStyle: true,
  singleQuote: true, // 用单引号
  trailingComma: 'none', // 最后一个对象元素加逗号
  bracketSpacing: true, // 对象，数组加空格
  arrowParens: 'always', // (x) => {} 是否要有小括号
  requirePragma: false, // 不需要写文件开头的 @prettier
  insertPragma: false // 不需要自动在文件开头插入 @prettier
}

ESLint

ESLint是一个可组装的JavaScript和JSX检查工具

安装依赖

pnpm add -D eslint @antfu/eslint-config

配置文件

.eslintrc

{
  "extends": "@antfu",
}

.eslintignore

# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist

Commitizen

Commitizen是一个辅助git commit填写的工具

依赖

pnpm add -D commitizen

script

package.json

{
  "script": {
    "cm": "git-cz"
  }
}

配置

package.json

{
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
}

Husky

依赖

pnpm add -D husky

script

package.json

{
  "script": {
    "prepare": "husky install"
  }
}

配置文件

添加命令后，执行pnpm prepare会生一个.husky文件夹，在此文件夹下新增commit-msg和pre-commit2个文件。目录结构：

📦.husky
┣ 📂_
┃ ┣ 📜.gitignore
┃ ┗ 📜husky.sh
┣ 📜commit-msg
┗ 📜pre-commit

commit-msg

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

npx --no-install commitlint --edit $1

pre-commit

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

npx lint-staged --allow-empty $1

如果在后续的git操作中看到如下提示：
The '.husky/commit-msg' hook was ignored because it's not set as executable
说明需要赋予husky执行权限,执行以下命令。
sudo chmod +x .husky/*

Commitlint

Commitlint 是一个git commit规范检测工具

依赖

pnpm add -D @commitlint/cli @commitlint/config-conventional @commitlint/cz-commitlint

配置

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

Lint-staged

Lint-staged用于格式化与检查处于git暂存区的文件

依赖

npm add -D lint-staged

配置

package.json

 "lint-staged": {
    "src/**/*.{js,ts,jsx,tsx}": [
      "prettier --config .prettierrc.js --write",
      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet",
      "git add"
    ],
    "*.vue": [
      "prettier --config .prettierrc.js --parser=vue --write",
      "node --max_old_space_size=8192 ./node_modules/eslint/bin/eslint.js --fix --color --cache --quiet",
      "git add"
    ],
    "*.{css,scss}": [
      "prettier --config .prettierrc.js --write",
      "git add"
    ]
  },

最终效果

在VScode中能进行代码格式校验与格式化（需要安装相应工具的VScode插件）
执行pnpm cm,能进行git commit辅助输入
执行git commit后，能够自动格式化与检查暂存区的文件，如果有格式错误，则终止commit操作