ESlint+Prettier+husky实现规范化

2024年08月08日 1.7k 字大概 8 分钟

本文介绍使用ESlint+Prettier+husky实现前端代码规范以及git提交规范

ESLint + Prettier 代码规范化

# 安装eslint
npm i eslint -g
# 安装prettier
npm i prettier eslint-config-prettier -D
# 安装husky
npm i husky -D

初始化eslint：

1	`eslint --init`

接下来根据你的需要选择，完成后会生成.eslintrc.js文件。

在ESLint > 9.0.0版本中，直接使用extends属性会出现Config (unnamed): Key "extends": This appears to be in eslintrc format rather than flat config format.。这是因为从 ESLint v9.0.0 开始，平面配置文件格式将成为默认的配置文件格式。新版反而简单了，直接import就可以了：

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from 'eslint-config-prettier'


export default [
  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
  eslintConfigPrettier

];

然后手动添加一个`prettierrc文件配置prettier：

{
  "printWidth": 160,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "singleAttributePerLine": false,
  "endOfLine": "auto"
}

配置完成后，在package.json添加：

"scripts": {
    "lint": "eslint <your code file path>",
    "prettier": "prettier --write ."
}

然后使用命令来测试：

# eslint 检查
npm run lint
# prettier 自动格式化
npm run prettier

Husky + commitlint / Commitizen Git提交规范化

代码规范

安装husky：

1	`npm install --save-dev husky`

初始化：

1	`npx husky init`

安装lint-staged，处理默认进行的是全量检查的耗时问题以及历史问题。

1	`npm i lint-staged -D`

配置package.json

{
  // ... 省略 ...
  "lint-staged": {
    " <your code file path>.{js,ts,vue}": [  # 文件类型自选
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit文件

1	`npm run lint-staged`

以上操作会在git提交前将代码规范化。接下来处理commit信息规范化。

commit信息规范

首先来看commit信息规范化的格式。每次提交，Commit message 都包括三个部分：Header，Body 和 Footer，为了方便我们只保留Header，其他详情可以看参考连接。

1	`<type>(<scope>): <subject>`

type表示提交类型，值有以下几种：
- feat - 新功能 feature
- fix - 修复 bug
- docs - 文档注释
- style - 代码格式(不影响代码运行的变动)
- refactor - 重构、优化(既不增加新功能，也不是修复bug)
- perf - 性能优化
- test - 增加测试
- chore - 构建过程或辅助工具的变动
- revert - 回退
- build - 打包
scope用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
subject是 commit 目的的简短描述，不超过50个字符。
- 以动词开头，使用第一人称现在时，比如change，而不是changed或changes
- 第一个字母小写
- 结尾不加句号（.）

commitlint

首先是commitlint

// commitlint
// 项目目录下安装
npm i commitlint --save-dev
npm i @commitlint/config-conventional --save-dev

新建对应配置文件commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // type 类型定义
    'type-enum': [2, 'always', [
      "feat", // 新功能 feature
      "fix", // 修复 bug
      "docs", // 文档注释
      "style", // 代码格式(不影响代码运行的变动)
      "refactor", // 重构(既不增加新功能，也不是修复bug)
      "perf", // 性能优化
      "test", // 增加测试
      "chore", // 构建过程或辅助工具的变动
      "revert", // 回退
      "build" // 打包
    ]],
    // subject 大小写不做校验
    // 自动部署的BUILD ROBOT的commit信息大写，以作区别
    'subject-case': [0]
  }
};

commitizen

安装：

// 全局安装，推荐
npm install commitizen -g
// 项目目录下安装
npm install commitizen --save-dev
commitizen init cz-customizable --save --save-exact

然后在package.json中根据你的项目情况添加配置

"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"  # 这里根据实际情况修改
  }
}

在项目目录下，新建配置文件.cz-config.js

'use strict';

module.exports = {
  types: [
    {value: 'feat',     name: 'feat:     新功能'},
    {value: 'fix',      name: 'fix:      修复'},
    {value: 'docs',     name: 'docs:     文档变更'},
    {value: 'style',    name: 'style:    代码格式(不影响代码运行的变动)'},
    {value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
    {value: 'perf',     name: 'perf:     性能优化'},
    {value: 'test',     name: 'test:     增加测试'},
    {value: 'chore',    name: 'chore:    构建过程或辅助工具的变动'},
    {value: 'revert',   name: 'revert:   回退'},
    {value: 'build',    name: 'build:    打包'}
  ],
  // override the messages, defaults are as follows
  messages: {
    type: '请选择提交类型:',
    // scope: '请输入文件修改范围(可选):',
    // used if allowCustomScopes is true
    // customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    // body: '请输入详细描述(可选，待优化去除，跳过即可):',
    // // breaking: 'List any BREAKING CHANGES (optional):\n',
    // footer: '请输入要关闭的issue(待优化去除，跳过即可):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  allowCustomScopes: true,
  // allowBreakingChanges: ['feat', 'fix'],
  skipQuestions: ['body', 'footer'],
  // limit subject length, commitlint默认是72
  subjectLimit: 72
};

这里附上提交常用的emoji，更多见Git提交时的emoji表情使用指南_emoji符号大全 git-CSDN博客

emoji	emoji代码	commit 说明
🎨 (调色板)	`:art:`	改进代码结构/代码格式
⚡️ (闪电) 🐎 (赛马)	`:zap:` `:racehorse:`	提升性能
🔥 (火焰)	`:fire:`	移除代码或文件
🐛 (bug)	`:bug:`	修复 bug
🚑 (急救车)	`:ambulance:`	重要补丁
✨ (火花)	`:sparkles:`	引入新功能
♻️ （回收）	`:recycle:`	重构代码
🚀 (火箭)	`:rocket:`	部署功能
💄 (口红)	`:lipstick:`	更新 UI 和样式文件
🎉 (庆祝)	`:tada:`	初次提交
✅ (白色复选框)	`:white_check_mark:`	更新测试
🔒 (锁)	`:lock:`	修复安全问题
🍎 (苹果)	`:apple:`	修复 macOS 下的问题
🐧 (企鹅)	`:penguin:`	修复 Linux 下的问题
🏁 (旗帜)	`:checkered_flag:`	修复 Windows 下的问题
🤖（机器人）	`:robot:`	修复 Android 下的问题
🍏 (绿苹果)	`:green_apple:`	修复 iOS 下的问题
🔖 (书签)	`:bookmark:`	发行/版本标签
🚨 (警车灯)	`:rotating_light:`	移除 linter 警告
🚧 (施工)	`:construction:`	工作进行中
👷 (工人)	`:construction_worker:`	添加 CI 构建系统
💚 (绿心)	`:green_heart:`	修复 CI 构建问题
⬆️ (上升箭头)	`:arrow_up:`	升级依赖

至此我们基本完成了前端项目规范。

参考：

Vue3 + Vite + Ts 项目配置代码格式化及校验 eslint + prettier + standard - 掘金 (juejin.cn)

eslint版本9.0之后配置方法_eslint9-CSDN博客

快速开始 | Husky (typicode.github.io)

超详细的Git提交规范引入指南 - 掘金 (juejin.cn)

Commit message 和 Change log 编写指南 - 阮一峰的网络日志 (ruanyifeng.com)