1.引言

工作中，我們是否經(jīng)常遇到以下情況：

• 我們是否發(fā)現(xiàn)接手其他同事的代碼非常痛苦，比如：縮進(jìn)，換行等等代碼風(fēng)格這些一度讓人渾身難受
• 某個(gè)同事提了經(jīng)常提語(yǔ)法報(bào)錯(cuò)的代碼，語(yǔ)法報(bào)錯(cuò)只能用肉眼一個(gè)個(gè)review代碼，完全沒(méi)有提示
• 同事每個(gè)人寫的commit風(fēng)格都不一樣，也有偷懶的，一個(gè)單詞搞定的，但是也不描述本次更改是屬于什么范疇？比如：是加功能？是代碼優(yōu)化？還是修復(fù)bug？還是修改webpack配置？還是修改工具鏈等等
• 如果是monorepo的倉(cāng)庫(kù)，里面有很多項(xiàng)目，commit一頓亂寫，完全不管改的哪個(gè)項(xiàng)目，是不是很崩潰？

關(guān)于代碼語(yǔ)法檢查、代碼格式化、commit注釋規(guī)范、代碼編譯等等這些工作量繁雜且巨大的苦力活，除非你不想把人當(dāng)馬用，那還是交給機(jī)器去做，是嗎？

前端領(lǐng)域早已不是以前的純js、jquery 時(shí)代，模塊化、工程化也成為了前端領(lǐng)域的追求，這樣才能保證前端程序的可讀性，可維護(hù)性，健壯性等等

2.背景

前端工程化已經(jīng)發(fā)展了有些年月了，大量提高效率的包如雨后春筍般涌出。所以作為小前端的我也忍不住去探索一番，畢竟誰(shuí)也不想瘋狂加班，被當(dāng)作馬使，也想下早班開啟簡(jiǎn)單開心的生活

本文旨在記錄探索前端基本工程化的實(shí)踐過(guò)程，方便自己以后翻閱，請(qǐng)輕噴(ps: 這篇文章聚焦代碼檢查，代碼美化，commit規(guī)范，其中有借助chatgpt)

項(xiàng)目基本技術(shù)選型為：react + ts，所以將以此為基礎(chǔ)展開前端工程化基本配置

3.Git鉤子：husky

husky 是一個(gè)用于在 Git 鉤子中運(yùn)行命令的工具，它能夠在代碼提交或推送等特定事件中自動(dòng)觸發(fā)指定的命令。通過(guò) husky，你可以在代碼提交前、提交后、推送前等場(chǎng)景下運(yùn)行腳本，以進(jìn)行代碼風(fēng)格檢查、單元測(cè)試、構(gòu)建等操作

安裝如下：

1. 下載husky的npm包
2. 初始化husky
3. 配置npm install時(shí)自動(dòng)初始化husky

用快捷命令完成上面的安裝步驟

# npm
npx husky-init && npm install

# yarn
yarn dlx husky-init --yarn2 && yarn

#pnpm
pnpm dlx husky-init && pnpm install

4.文件過(guò)濾工具：lint-staged

lint-staged是一個(gè)用于在 git 暫存文件上運(yùn)行指定命令的工具。它可以幫助你在提交代碼前，只對(duì)即將提交的文件進(jìn)行代碼風(fēng)格檢查、格式化、靜態(tài)分析等操作，以便在代碼提交之前保持代碼的質(zhì)量和一致性

基本使用如下：

1. 安裝依賴

# npm
npm install lint-staged --save-dev

#yarn 
yarn add lint-staged --dev

#pnpm
pnpm add lint-staged --save-dev

2. 修改package.json文件如下：

{
  "scripts": {
    "lint": "eslint src"
  },
  "lint-staged": {
    "src/**/*.{ts,tsx}": [
      "npm run lint", // 運(yùn)行自定義的 lint 腳本
      "git add" // 添加修復(fù)后的文件到暫存區(qū)
    ]
  }
}

以上配置表示：對(duì)于 src 目錄下的所有后綴為 ts 和 tsx 的文件，在提交前會(huì)運(yùn)行 npm run lint 命令來(lái)進(jìn)行語(yǔ)法檢查，然后將修復(fù)后的文件添加到暫存區(qū)

實(shí)際開發(fā)時(shí)，lint-staged 一般會(huì)配合 pre-commit 鉤子進(jìn)行 commit 之前的動(dòng)作，所以我們替換 pre-commit 鉤子內(nèi)容如下：

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

npx lint-staged

5.commit注釋規(guī)范：commitlint

commitlint 是一個(gè)用于規(guī)范化 Git 提交消息的工具。它幫助團(tuán)隊(duì)確保每個(gè)提交消息都符合統(tǒng)一的規(guī)范，以提高代碼倉(cāng)庫(kù)的可讀性和可維護(hù)性

這里直接展示commitlint搭配husky一起使用

1. 安裝相關(guān)依賴

# npm
  npm install @commitlint/cli @commitlint/config-conventional --save-dev

  # yarn
  yarn add @commitlint/cli @commitlint/config-conventional --dev

  # pnpm
  pnpm add @commitlint/cli @commitlint/config-conventional --save-dev

2. 使用 husky 增加 commit-msg 鉤子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

3. 在package.json文件里面commitlint信息，默認(rèn)使用commitlint提供的11注釋類型(ps: 你可以自定義，比如下方的ui、version)

{
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ],
    "rules": {
      "type-enum": [
        2,
        "always",
        [
          "build",
          "chore",
          "ci",
          "docs",
          "feat",
          "fix",
          "perf",
          "refactor",
          "revert",
          "style",
          "test",
          "ui",
          "version"
        ]
      ]
    }
  }
}

commitlint提供的11注釋類型解釋如下：

• build: 編譯相關(guān)的修改, 例如：發(fā)布版本、項(xiàng)目構(gòu)建工具改動(dòng)等(例如：glup、rollup、webpack、vite、turbo等工具)
• chore: 雜項(xiàng)修改(例如：改變構(gòu)建流程、增加依賴庫(kù)等)
• ci: 持續(xù)集成相關(guān)修改(例如: github-action、gitlab-ci/cd等)
• docs: 文檔修改
• feat: 新增功能
• fix: 修復(fù)bug
• perf: 優(yōu)化(例如: 提升性能、體驗(yàn)等)
• refactor: 代碼重構(gòu)
• revert: 回滾版本
• style: 代碼格式修改
• test: 測(cè)試用例修改

6.代碼檢查

代碼檢查借助了eslint, typescript-eslint

eslint是一個(gè)用于檢查和修復(fù) JavaScript 代碼錯(cuò)誤、風(fēng)格和質(zhì)量問(wèn)題的工具。它可以幫助開發(fā)人員和團(tuán)隊(duì)在編碼過(guò)程中遵循一致的編碼規(guī)范，提高代碼可讀性、可維護(hù)性和質(zhì)量

typescript-eslint是一個(gè)用于對(duì) TypeScript 代碼進(jìn)行檢查和修復(fù)的工具。它基于eslint，提供了一套規(guī)則和插件，可以檢查和修復(fù) TypeScript 代碼中的錯(cuò)誤、風(fēng)格和質(zhì)量問(wèn)題

綜上所訴，需要開發(fā)環(huán)境下安裝如下包：

1. eslint
2. eslint-plugin-react-hooks
3. eslint-plugin-react-refresh
4. @typescript-eslint/parser
5. @typescript-eslint/eslint-plugin

# npm
npm install eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

# pnpm
pnpm add eslint eslint-plugin-react-hooks eslint-plugin-react-refresh @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

eslint基本使用步驟如下：

1. 安裝eslint：在項(xiàng)目根目錄下運(yùn)行命令 npm install eslint --save-dev 或 yarn add eslint --dev 或 pnpm add eslint --save-dev，將eslint作為開發(fā)依賴安裝到項(xiàng)目中
2. 初始化eslint配置文件：在項(xiàng)目根目錄下運(yùn)行命令 eslint --init，根據(jù)提示選擇配置選項(xiàng)，配置文件（通常為.eslintrc或.eslintrc.json）將會(huì)自動(dòng)生成
3. 添加規(guī)則和插件：在生成的配置文件中，可以根據(jù)項(xiàng)目需要添加或修改規(guī)則，以及引入需要的插件
4. 運(yùn)行eslint：在命令行中運(yùn)行 eslint yourfile.js 或 eslint . ，其中yourfile.js為需要檢查的文件名或目錄。eslint將會(huì)根據(jù)配置文件對(duì)代碼進(jìn)行檢查，并輸出錯(cuò)誤或警告信息
5. 自動(dòng)修復(fù)：運(yùn)行 eslint --fix yourfile.js 或 eslint --fix . 可以嘗試自動(dòng)修復(fù)一部分可修復(fù)的問(wèn)題

typescript-eslint基本使用步驟如下：

1. 安裝typescript-esLint：在項(xiàng)目根目錄下運(yùn)行以下命令

#npm 
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

# yarn
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

#pnpm
pnpm add @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2. 配置eslint和@typescript-eslint插件：在生成的eslint配置文件中，需要指定解析器為@typescript-eslint/parser，并使用@typescript-eslint/eslint-plugin提供的規(guī)則和插件

eslint配置文件如下(以.eslintrc為例)：

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    '@typescript-eslint/ban-ts-comment': 'off'
  }
}

以下為結(jié)合 lint-staged 配置的代碼檢查命令：

{
  "scripts": {
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "lint:fix": "eslint . --ext ts,tsx --fix",
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ]
  }
}

7.代碼美化：prettier

prettier是一個(gè)代碼格式化工具，它可以自動(dòng)調(diào)整代碼的格式，使其符合統(tǒng)一的風(fēng)格規(guī)范

基本使用如下：

1. 安裝依賴

# npm 
npm install prettier --save-dev

# yarn
yarn add prettier --dev

#pnpm
pnpm add prettier --save-dev

2. 配置prettier，可以使用 .prettierrc 文件或 package.json 文件中的 prettier 字段，下面以 package.json 為例：

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  }
}

實(shí)際應(yīng)用時(shí)會(huì)在 commit 之前進(jìn)行美化代碼，以下為結(jié)合 lint-staged 配置的代碼檢查+代碼美化命令：

{
  "prettier": {
    "trailingComma": "all",
    "arrowParens": "always",
    "printWidth": 120
  },
  "lint-staged": {
    "*.(ts|tsx)": [
      "eslint --quiet"
    ],
    "*.(ts|tsx|json|html)": [
      "prettier --write"
    ]
  }
}