前端工程化，搭建專案（eslint + preitter + husky + lint-staged + commitlint + com...）

limoonrise發表於2024-11-20
前端EsLintMIT

基本介紹

本文主要描述手動搭建 vite 專案，並且透過 eslint、preitter、husky、lint-staged、commitlint、commitizen 來進行專案約束規範。

建立專案

首先建立專案資料夾，並初始化 package.json

# 初始化專案，新增 package.json
npm init

# 手動安裝 vite
npm i vite -D

並在根目錄建立一個像這樣的 index.html 檔案：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DEMO</title>
  </head>
  <body>
    <p>Demo</p>
    <script src="./index.ts" type="module"></script>
  </body>
</html>

可以看到 script 中引入了 index.ts，終端中執行 vite，就可以訪問到 index.html 頁面。

後續配置的規範和這個html頁面沒啥關係，只是習慣就整個建立了

eslint

是什麼

ESLint 是一個可配置的 JavaScript linter。它可以幫助你發現並修復 JavaScript 程式碼中的問題。問題可以是任何事情，從潛在的執行時錯誤到不遵循最佳實踐，再到樣式問題。

ESLint 是完全外掛化的。每條規則都是一個外掛，你可以在執行時新增更多。你還可以新增社群外掛、配置和解析器來擴充套件 ESLint 的功能。

配置

# 下載 eslint 9
npm i eslint -D
# 初始化
npx eslint --init

# 或者直接執行
npm init @eslint/config@latest

執行完 npx eslint --init 後，又有相關的初始化配置選項。例如：

這裡每個選項的意思都比較清晰，按需選擇即可。
程式執行完後可以發現在根目錄下生成 eslint.config.mjs 檔案，裡面包括內容

// eslint.config.mjs
import globals from 'globals'
import pluginJs from '@eslint/js'
import tseslint from 'typescript-eslint'

export default [
  { files: ['**/*.{js,mjs,cjs,ts}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended
  // 新增新增內容：這裡我們可以新增自己的 rules
  {
    rules: {
      semi: ['error', 'never'],    // 語句後不帶分號
      'no-unused-vars': 'error',   // 沒有使用的引數
      'no-undef': 'error'          // 沒有定義引數
    }
  },
  {
    ignores: ['node_modules/']   // 忽略目錄
  }
]

rules 相關要更改規則的嚴重性，請將規則 ID 設定為以下值之一：

  • "off" 或 0 - 關閉規則
  • "warn" 或 1 - 開啟規則作為警告（不影響退出程式碼）
  • "error" 或 2 - 開啟規則作為錯誤（觸發時退出程式碼為 1）

現在 npm i 安裝的 eslint 都是9的版本，目前我這邊使用9版本後使用 .eslintrc 和 .eslintignore 配置在執行 eslint 檢測的時候會提示已經不支援相關配置了。如果還是想使用之前的配置方式，安裝 8 版本的即可（npm i eslint@8 -D）

eslint8 的配置
安裝相關依賴

npm i eslint@8 @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

// .eslintrc
{
    "parser": "@typescript-eslint/parser",
    
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
    ],
    
    "plugins": ["@typescript-eslint"],

    "rules": {
        // 相關規則
    }
}

.eslintignore 配置裡直接寫忽略的資料夾和檔案

node_modules
*.md

執行

在執行前，建立一個index.ts檔案，輸入測試內容

function a() {
    console.log('eslint')
}

配置完後，可以直接在終端執行 npx eslint 檢測的檔案 執行，不過一般在 package.json 進行配置使用。

{
    // ... 其他配置
    
    "scripts": {
        // ... 已有的配置
        // 新增，--fix 表示自動修復問題
        "lint": "eslint \"**/*.{ts,js}\" --fix"
        
        // eslint8 配置
        // "lint": "eslint ./ --ext .ts,.js,.json"
    }
}

終端執行 npm run lint


說明 eslint 起到作用了

pretter

是什麼

Prettier 是一個“有態度”的程式碼格式化工具，可以格式化程式碼，但不具備程式碼檢查功能，它可以透過解析程式碼並使用自己的規則重新列印它，並考慮最大行長來強制一致的樣式，並在必要時包裝程式碼，如今，它已成為解決所有程式碼格式問題的優選方案，支援多種語言，可以將 ESLint 和 Prettier 結合使用，提高程式碼質量。

配置

下載相關依賴

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier 和 eslint-pulgin-prettier 外掛是為了解決 prettier 和 eslint 衝突的。

在根目錄新增新檔案 .prettierrc

// .prettierrc
{
    "semi": false,
    "tabWidth": 2,
    "singleQuote": true,
    "printWidth": 100,
    "trailingComma": "none"
}

然後再 eslint.config.mjs 配置中進行相關配置

// 其他引入
import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default [
    // 其他配置
    eslintConfigPrettier,
    eslintPluginPrettierRecommended,
    // ...
]

eslintrc 中的配置

// .eslintrc
{
  "extends": [
    // 其他內容
    "prettier"
  ],

  "plugins": [
      // 其他外掛
      "prettier"
  ],

  "rules": {
    "prettier/prettier": "error", // 開啟 prettier 外掛提供的規則，該外掛從 ESLint 內執行 Prettier
    // 其他 rules
  }
}

執行

配置相關 scripts

{
    // ... 其他配置
    
    "scripts": {
        // ... 已有的配置
        // eslint
        "lint": "eslint \"**/*.{ts,js}\" --fix",
        // 新增配置
        "format": "prettier --write ."
    }
}

我們就可以進行測試了，在終端執行 npm run format


這是我們可以在 index.ts 中的程式碼語句中輸入;再執行，會發現;會被清除

husky

已下操作涉及到 git 的使用

是什麼

‌husky 是一個用於管理Git鉤子的工具，它可以在程式碼提交、程式碼推送等Git操作前或後執行預定義的指令碼。透過husky，可以在團隊專案中強制執行程式碼規範、程式碼檢查、單元測試等操作，以確保團隊程式碼的質量和一致性‌

配置

首先我們來安裝 husky 等相關依賴

npm install husky -D

# 安裝完後執行
npx husky init

在npx husky init之前，我們要先進行 git 初始化，終端執行 git init

執行完後會看到根目錄下會新建一個 .husky 資料夾，裡面也會有個自動建立的檔案 pre-commit
修改 pre-commit 中的內容

// pre-commit
npm run format

設定之後，我們在提交 git commit -m "test: 測試pre-commit"，會發現husky會攔截程式碼日誌提交，在進行了 npm run format 後再進行。

lint-staged

是什麼

通常 husky 與 lint-staged 搭配使用，lint-staged 用於僅對新增到了暫存區的檔案校驗，避免了不必要的每次提交時全域性校驗。

配置

安裝

npm i lint-staged -D

下載後可以直接在 package.json 中配置

{
    "scripts": {
        // ...
        // 新增
        "lint:lint-staged": "lint-staged"
    },
    "lint-staged": {
        "**/*.{ts,js}": [
          "npm run lint",
          "npm run format"
        ]
    },
}

這個配置可以在提交資訊的時候記進行 eslint 檢測和格式化程式碼。
pre-commit 檔案中修改提交執行的指令

npm run lint:lint-staged

commitlint

是什麼

CommitLint 是一個幫助你規範化提交資訊的工具。

配置

# 下載相關依賴
npm i @commitlint/cli @commitlint/config-conventional commitizen cz-conventional-changelog -D

# 初始化配置
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.mjs

在 commitlint.config.js 中新增相關配置

export default {
  extends: ['@commitlint/config-conventional'],
  // 規則
  rules: {
    // 範圍不能為 0
    // 'scope-empty': [2, 'never'],
    // subject 大小寫不驗證
    'subject-case': [0],
    // git 型別必須是以下型別
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新增功能
        'fix', // 修復異常
        'docs', // 更新文件
        'style', // 程式碼格式（不影響功能，例如空格、分號等格式修正）
        'refactor', // 程式碼重構（不包括 bug 修復、功能新增）
        'perf', // 效能最佳化
        'test', // 測試用例
        'build', // 構建流程，外部依賴更改
        'ci', // 修改 CI 配置，指令碼
        'revert', // 回滾
        'chore' // 對構建過程或輔助工具和庫的更改（不影響原始檔、測試用例）
      ]
    ]
  }
}

配置完後，我們要透過huksy來進行攔截。在 .husky資料夾中新建 commit-msg 檔案

// commit-msg
npx --no -- commitlint --edit "$1"

完成到這裡，我們提交資訊的時候已經可以進行相關檢測了。但是每次輸入資訊的時候都要按照相關要求輸入會很麻煩，如果可以像初始化一樣能夠有選項提示，就更好了。

上面安裝依賴中的commitizen和cz=conventional-changelog就是為了實現這一步的
根目錄下建立 .czrc 檔案

// .czrc
{
  "path": "cz-conventional-changelog"
}

設定 scripts

{
    // ... 其他配置
    
    "scripts": {
        // ... 已有的配置
        "lint": "eslint \"**/*.{ts,js}\" --fix",
        "format": "prettier --write .",
        "lint:lint-staged": "lint-staged",
        // 新增
        "cz": "cz"
    }
}

然後我們在進行 git add .後，可以執行 npm run cz 來代替 git commit操作


而後我們透過 git log 檢視日誌，可以看到是有相關記錄的

相關文章