React 項(xiàng)目配置代碼提交規(guī)范 ESLint、Pretttier、Husky、CommitLint

前言

團(tuán)隊(duì)開(kāi)發(fā)的成員越來(lái)越多，項(xiàng)目都是由多個(gè)人進(jìn)行開(kāi)發(fā)和維護(hù)，每個(gè)人的代碼書(shū)寫(xiě)習(xí)慣和風(fēng)格又不盡相同，commit 的提交log 也是亂七八糟，為以后的開(kāi)發(fā)和維護(hù)增添了很多困難，所以規(guī)范和約束在多人協(xié)作下，就顯得尤為重要。

本文將以React 項(xiàng)目為例，在項(xiàng)目中配置 eslint + pretttier + husky + commitLint 代碼提交規(guī)范

1、創(chuàng)建項(xiàng)目

npx create-react-app my-app --template typescript

完成之后如下圖這個(gè)樣子

2、配置 Eslint

2.1 安裝依賴包

pnpm install eslint -D

2.2 安裝成后 生成配置文件

// 按指示一路回車(chē)即可 
npx eslint --init 

2.3 配置.eslintrc.js, 直接用下方的eslintrc替換自動(dòng)生成的即可，可避免很多坑

這里會(huì)出現(xiàn)一個(gè) ‘module’ is not defined報(bào)錯(cuò)所以在配置中加入 node: true

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true, // 解決 'module' is not defined報(bào)錯(cuò)。
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react'],
  rules: {},
};

2.4 使用eslint命令,在package的script中添加，fix表示可自動(dòng)修復(fù)簡(jiǎn)單的問(wèn)題。

"scripts": {
   "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx}\""
}

OK,到這里，我們可以先來(lái)測(cè)試一下，寫(xiě)一行未使用的代碼，執(zhí)行 npm run lint，然后就可以看到如下報(bào)錯(cuò)，提示userName 未引用

2.5 設(shè)置忽略文件 .eslintignore

dist/*
node_modules/*
*.json
public

3、配置 prettier 格式化代碼

3.1 安裝依賴裝包

pnpm install prettier -D

3.2 安裝 Prettier - Code formatter 插件

3.3 配置.prettierrc.js文件

重啟 vscode 后，我們?cè)?.prettierrc.js 文件中配置的代碼風(fēng)格才會(huì)生效

module.exports = {
  // 一行的字符數(shù)，如果超過(guò)會(huì)進(jìn)行換行，默認(rèn)為80
  printWidth: 100,
  // 行位是否使用分號(hào)，默認(rèn)為true
  semi: true,
  // 字符串是否使用單引號(hào)，默認(rèn)為false，使用雙引號(hào)
  singleQuote: true,
  // 一個(gè)tab代表幾個(gè)空格數(shù)，默認(rèn)為2
  tabWidth: 2,
  // 是否使用尾逗號(hào)，有三個(gè)可選值"<none|es5|all>"
  trailingComma: "none",
};

在 packages.json 中的 script 配置命令

  "scripts": {
    "format": "prettier --write \"src/**/*.+(js|ts|jsx|tsx)\"",
  }

運(yùn)行該命令，會(huì)將我們項(xiàng)目中的文件都格式化一遍，后續(xù)如果添加其他格式的文件，可在該命令中添加，例如：.less后綴的文件

3.4、設(shè)置 .prettierignore 忽略文件

node_modules/**
dist/**
public/**
doc/**

3.5、解決ESLint與Prettier的沖突

ESLint

• 目的：ESLint 主要用于發(fā)現(xiàn)代碼中的問(wèn)題，如潛在的錯(cuò)誤、不一致的編碼風(fēng)格、未使用的變量等。
• 可配置性：ESLint 允許自定義規(guī)則，使其可以強(qiáng)制實(shí)施特定的編碼標(biāo)準(zhǔn)和最佳實(shí)踐。

Prettier

• 目的：Prettier 主要用于自動(dòng)格式化代碼，以保持代碼風(fēng)格的一致性。
• 風(fēng)格規(guī)則：Prettier 有一套默認(rèn)的風(fēng)格規(guī)則，例如縮進(jìn)、行寬、引號(hào)等，并且這些規(guī)則不太可配置。

沖突原因

• 沖突通常發(fā)生在兩個(gè)工具對(duì)某些代碼風(fēng)格規(guī)則有不同的處理方式。例如，ESLint 可能要求使用單引號(hào)，而 Prettier 默認(rèn)使用雙引號(hào)。
• 當(dāng)這兩個(gè)工具同時(shí)運(yùn)行時(shí)，它們可能會(huì)對(duì)代碼的同一部分提出不同的修改建議，從而造成沖突。

安裝依賴包

pnpm install eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier 基于 prettier 代碼風(fēng)格的 eslint 規(guī)則，即eslint使用pretter規(guī)則來(lái)格式化代碼。

eslint-plugin-prettier 禁用所有與格式相關(guān)的 eslint 規(guī)則，解決 prettier 與 eslint 規(guī)則沖突，確保將其放在 extends 隊(duì)列最后，這樣它將覆蓋其他配置

3.6 增加 .vscode 配置 settings.json 自動(dòng)完成格式化

// settings.json
{
  // 保存的時(shí)候自動(dòng)格式化
  "editor.formatOnSave": true,
  // 默認(rèn)格式化工具選擇prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

配置完成之后，我們保存代碼的時(shí)候就可以自動(dòng)完格式化了

4、配置 husky

4.1、安裝并初始化husky

// 初始化husky。 
// 1將prepare腳本添加到package 
// 2、根目錄創(chuàng)建.husky文件夾，包含pre-commit鉤子
pnpm install husky -D

npx husky-init

4.2 安裝并配置lint-staged

只檢查通過(guò)git add添加到暫存區(qū)的文件，避免每次檢查都把整個(gè)項(xiàng)目的代碼都檢查一遍，從而提高效率

pnpm install lint-staged -D

4.3 配置packages.json 命令

// 設(shè)置lint-staged；提交時(shí)prettier代碼格式化，eslint檢查修復(fù)
{
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
      "eslint --fix"
    ]
  },
}

4.4 修改.husky/pre-commit文件，使提交時(shí)能執(zhí)行lint-staged鉤子

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

pnpm exec lint-staged

// 刪除npm test

5、 配置 commit-msg

commitlint 檢查提交消息是否符合常規(guī)提交格式，用于在每次提交時(shí)生成符合規(guī)范的commit消息。

5.1 安裝commit-msg

pnpm install @commitlint/config-conventional @commitlint/cli --save-dev

5.2 添加 commitlint.config.js 配置文件

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    // type 類(lèi)型定義
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新功能 feature
        "fix", // 修復(fù) bug
        "docs", // 文檔注釋
        "style", // 代碼格式(不影響代碼運(yùn)行的變動(dòng))
        "refactor", // 重構(gòu)(既不增加新功能，也不是修復(fù)bug)
        "perf", // 性能優(yōu)化
        "test", // 增加測(cè)試
        "chore", // 構(gòu)建過(guò)程或輔助工具的變動(dòng)
        "revert", // 回退
        "build", // 打包
      ],
    ],
    // subject 大小寫(xiě)不做校驗(yàn)
    // 自動(dòng)部署的BUILD ROBOT的commit信息大寫(xiě)，以作區(qū)別
    "subject-case": [0],
  },
};

@commitlint/config-conventional 這是一個(gè)規(guī)范配置,標(biāo)識(shí)采用什么規(guī)范來(lái)執(zhí)行消息校驗(yàn), 這個(gè)默認(rèn)是Angular的提交規(guī)范

5.3 執(zhí)行以下命令添加commitlint鉤子

npx husky add .husky/commit-msg "npm run commitlint"

5.4 在packages.json 配置

 "scripts": {
    "commitlint": "commitlint --config commitlint.config.js -e -V"
  },

按上面步驟修改完，我們?cè)谔峤淮a時(shí)候，如果隨便寫(xiě)一個(gè)提交message將會(huì)報(bào)錯(cuò)，不允許提交，如下所示：

試試提交代碼

5.5 正常提交

git commit -m 'feat: 測(cè)試一下'

6、自定義代碼提交規(guī)則

自定義提交規(guī)則可以根據(jù)團(tuán)隊(duì)開(kāi)發(fā)規(guī)范來(lái)進(jìn)行額外配置，目前我所在的團(tuán)隊(duì)提交規(guī)則是，會(huì)把每個(gè)需求的產(chǎn)品文檔鏈接關(guān)聯(lián)到每一個(gè)feature，這樣后續(xù)要是有問(wèn)題，也方便找到對(duì)應(yīng)的產(chǎn)品文檔.

配置如下

主要就增加了plugin 和 三個(gè)rule 規(guī)則

'must-add-document-url": [2, "always"]', // 加入自定義規(guī)則
'body-max-line-length': [2, 'always', 200], // body最大內(nèi)容行數(shù)
'header-max-length': [2, 'always', 200], // header 最大長(zhǎng)度

module.exports = {
 extends: ["@commitlint/config-conventional"],
 rules: {
   // type 類(lèi)型定義
   "type-enum": [
     2,
     "always",
     [
       "feat", // 新功能、新特性feature
       "fix", // 修復(fù) bug
       "docs", // 文檔修改
       "style", // 代碼格式(不影響代碼運(yùn)行的變動(dòng))
       "refactor", // 代碼重構(gòu)
       "perf", // 優(yōu)化相關(guān)，比如提升性能、體驗(yàn)
       "test", // 測(cè)試用例修改
       "chore", // 其他修改, 比如改變構(gòu)建流程、或者增加依賴庫(kù)、工具等
       "revert", // 回滾上一個(gè)版本
       "build", // 編譯相關(guān)的修改，例如發(fā)布版本、對(duì)項(xiàng)目構(gòu)建或者依賴的改動(dòng)
     ],
   ],
   // subject 大小寫(xiě)不做校驗(yàn)
   // 自動(dòng)部署的BUILD ROBOT的commit信息大寫(xiě)，以作區(qū)別
   "subject-case": [0],
   "must-add-document-url": [2, "always"], // 加入自定義規(guī)則
   'body-max-line-length': [2, 'always', 200], // 加入自定義規(guī)則
   'header-max-length': [2, 'always', 200], // 加入自定義規(guī)則
 },
 plugins: [
   {
     rules: {
       "must-add-document-url": ({ type, body }) => {
         const ALIYUN_DOCUMENT_PREFIX = "https://devops.aliyun.com";

         // 排除的類(lèi)型
         const excludeTypes = ["chore", "refactor", "style", "test"];
         if (excludeTypes.includes(type)) {
           return [true];
         }

         return [
           body && body.includes(ALIYUN_DOCUMENT_PREFIX),
           `提交的內(nèi)容中必須包含云效相關(guān)文檔地址`,
         ];
       },
     },
   },
 ],
};

然后再來(lái)測(cè)試一下

git commit -m "feat: 測(cè)試自定義提交規(guī)則"，然后就提示需要云效的文檔鏈接

正確提交

feat: 測(cè)試自定義提交規(guī)則 ｜

https://devops.aliyun.com/xxxxxx

正常提交上來(lái)了

7、總結(jié)

本文從實(shí)戰(zhàn)出發(fā)，為一個(gè)React 項(xiàng)目添加了eslint + prettier + husky + lint-staged項(xiàng)目規(guī)范以保證項(xiàng)目的質(zhì)量、統(tǒng)一格式、風(fēng)格。希望大家能從中學(xué)到知識(shí)。代碼已經(jīng)上傳到github上, 點(diǎn)擊這里即可查看。

如果你覺(jué)得本文對(duì)你有些許幫助的話，記得點(diǎn)個(gè)贊哦??！??

原文 https://juejin.cn/post/7353208973880344626

參考文章

# 代碼提交規(guī)范-ESLint+Prettier+husky+Commitlint

commitlint 從0到1 (git commit 校驗(yàn)工具)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852011.html

到了這里，關(guān)于React 項(xiàng)目配置代碼提交規(guī)范 ESLint、Pretttier、Husky、CommitLint的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！