非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

前端項目程式設計規範化配置

下述例子主要是從代碼規範化以及 git 送出規範化兩方面進行配置。内容很多，請做好心理準備

一、代碼檢測工具 ESLint

在我們通過 vue create “項目名” 時，我們可以通過手動配置的方式，來配置 ESLint 來對代碼進行檢測。
? Pick a linter / formatter config: 
  ESLint with error prevention only // 僅包含錯誤的 ESLint
  ESLint + Airbnb config // Airbnb 的 ESLint 延伸規則
  ESLint + Standard config // 标準的 ESLint 規則
           

當我們配置了标準的 ESLint 規則後，在項目根目錄下會生成 .eslintrc.js 檔案

// ESLint 配置檔案遵循 commonJS 的導出規則，所導出的對象就是 ESLint 的配置對象
// 文檔：https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  // 表示目前目錄即為根目錄，ESLint 規則将被限制到該目錄下
  root: true,
  // env 表示啟用 ESLint 檢測的環境
  env: {
    // 在 node 環境下啟動 ESLint 檢測
    node: true
  },
  // ESLint 中基礎配置需要繼承的配置
  extends: ["plugin:vue/vue3-essential", "@vue/standard"],
  // 解析器
  parserOptions: {
    parser: "babel-eslint"
  },
  // 需要修改的啟用規則及其各自的錯誤級别
  /**
   * 錯誤級别分為三種：
   * "off" 或 0 - 關閉規則
   * "warn" 或 1 - 開啟規則，使用警告級别的錯誤：warn (不會導緻程式退出)
   * "error" 或 2 - 開啟規則，使用錯誤級别的錯誤：error (當被觸發的時候，程式會退出)
   */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

當我們配置好 ESLint 規範後，就可以控制好自己的代碼格式規範，但出現不符合規範的代碼格式時，在運作階段，ESLint 會在控制台輸出提示資訊。

但由此也暴露了一些問題，我們并不清楚 ESLint 有哪些規範，當我們出現不符合 ESLint 代碼規範時，我們并不知道該怎麼解決，那該怎麼辦？

接下來：要介紹的另外一個插件就是為了解決上訴問題的。

二、代碼格式化 Prettier

Prettier 的作用：既可以保證

ESLint

規則校驗，又可以讓開發者無需關注格式問題來進行順暢的開發

如何使用：

步驟一：在 vsCode 中安裝 prettier 插件

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

步驟二：在項目根目錄下建立 .prettierrc 檔案（該檔案為 prettier 預設配置檔案），并寫入配置規則

{
  // 不尾随分号
  "semi": false,
  // 使用單引号
  "singleQuote": true,
  // 多行逗号分割的文法中，最後一行不加逗号
  "trailingComma": "none"
}

步驟三：在 vsCode 設定中，搜尋 save ，勾選 Format On Save （目的：儲存時對代碼進行檢測）

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

到這裡就基本配置結束了，但這裡會有一個問題，如果我們電腦的

VSCode

中安裝了多個代碼格式化工具時，可能會出現

prettier

無法對代碼進行格式化

解決方法：

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

prettier

與

ESLint

有幾個地方會出現沖突（需要同步一下）：

VSCode 而言，預設一個 tab 等于 4 個空格，而 ESLint 希望一個 tab 為兩個空格

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

定義方法名和後面的小括号之間，得有一個空格！

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

出現這種情況可以修改

ESLint

的配置檔案（.eslintrc.js）将這個報錯資訊給關閉掉

rules: {
    // 該規則表示關閉《方法名後增加空格》的規則
    'space-before-function-paren': 'off'
 }

tips: 至此我們整個的

perttier

和

ESLint

的配合使用就算是全部完成了。到這裡，代碼規範化已經配置好了。接下來就是：git 送出規範化

三、約定式送出規範

我們在開發過程中，最常用的項目管理工具主要是 Git 工具。而約定式送出就是針對執行

git commit -m "描述資訊"

時對 ”描述資訊“ 進行規範化。

對于

Git

送出規範來說，不同的團隊可能會有不同的标準

目前使用最多的規範： Conventional Commits specification（約定式送出）

tips:

下面就已上述的規範進行 Git 送出進行規範化處理

四、 Commitizen

commitizen

倉庫名為 cz-cli ，它提供了一個

git cz

的指令用于代替

git commit

，進而對 Git 送出進行規範化處理

當你使用 commitizen 進行代碼送出（git commit）時， commitizen 會送出你在送出時填寫所有必需的送出字段！

注：接下的所有操作建議 npm >= 7

重要的事情說三遍！！！！！

1、由于我們平常要經常要使用到 Commitizen 來規範送出代碼，建議全局安裝：

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

2、進入到項目中，安裝 cz-customizable（局部，局部，局部）

npm i [email protected] --save-dev

3、添加下面配置資訊到 package.json 中

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
}

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

4、在項目根目錄下建立 .cz-config.js 自定義提示檔案

module.exports = {
  // 可選類型
  types: [
    { value: 'feat', name: 'feat: 🚀 新功能', emoji: '🚀' },
    { value: 'fix', name: 'fix: 🧩 修複', emoji: '🧩' },
    { value: 'docs', name: 'docs: 📚 文檔變更', emoji: '📚' },
    { value: 'style', name: 'style: 🎨 代碼格式(不影響代碼運作的變動)', emoji: '🎨' },
    {
      value: 'refactor',
      name: 'refactor: ♻️ 重構(既不是增加feature，也不是修複bug)',
      emoji: '♻️'
    },
    { value: 'perf', name: 'perf: ⚡️ 性能優化', emoji: '⚡️' },
    { value: 'test', name: 'test: ✅ 增加測試', emoji: '✅' },
    { value: 'chore', name: 'chore: 🔨 建構過程或輔助工具的變動', emoji: '🔨' },
    { value: 'revert', name: 'revert: ⏪️ 回退', emoji: '⏪️' },
    { value: 'build', name: 'build:📦️ 打包', emoji: '📦️' }
  ],
  useEmoji: true,
  // 消息步驟
  messages: {
    type: '請選擇送出類型:',
    customScope: '請輸入修改範圍(可選):',
    subject: '請簡要描述送出(必填):',
    body: '請輸入較長的描述(可選):',
    footer: '請輸入要關閉的issue(可選):',
    confirmCommit: '确認使用以上資訊送出？(y/n/e/h)'
  },
  // 跳過問題
  skipQuestions: ['body', 'footer'],
  // subject文字長度預設是72
  subjectLimit: 72
}

到這裡：我們送出代碼時使用

git cz

來替換

git commit

，就可以看到提示資訊

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

tips:

至此 Git送出規範已經配置好了，

但這裡也有一個問題：如果開發者不使用

git cz

來送出代碼，則我們之前設定的

Git送出規範

就沒有什麼作用了

是以引出下面要講的 Git Hooks

五、Git Hook

Git Hook ：在執行某個事件之前或之後進行一些其他額外的操作

Git 提供了二十幾條鈎子函數

Git Hook	調用時機	說明
pre-applypatch	`git am` 執行前
applypatch-msg	`git am` 執行前
post-applypatch	`git am` 執行後	不影響 `git am` 的結果
pre-commit	`git commit` 執行前	可以用 `git commit --no-verify` 繞過
commit-msg	`git commit` 執行前	可以用 `git commit --no-verify` 繞過
post-commit	`git commit` 執行後	不影響 `git commit` 的結果
pre-merge-commit	`git merge` 執行前	可以用 `git merge --no-verify` 繞過。
prepare-commit-msg	`git commit` 執行後，編輯器打開之前
pre-rebase	`git rebase` 執行前
post-checkout	`git checkout` 或 `git switch` 執行後	如果不使用 `--no-checkout` 參數，則在 `git clone` 之後也會執行。
post-merge	`git commit` 執行後	在執行 `git pull` 時也會被調用
pre-push	`git push` 執行前
pre-receive	`git-receive-pack` 執行前
update
post-receive	`git-receive-pack` 執行後	不影響 `git-receive-pack` 的結果
post-update	當 `git-receive-pack` 對 `git push` 作出反應并更新倉庫中的引用時
push-to-checkout	當``git-receive-pack `對` git push `做出反應并更新倉庫中的引用時，以及當推送試圖更新目前被簽出的分支且` receive.denyCurrentBranch `配置被設定為` updateInstead`時
pre-auto-gc	`git gc --auto` 執行前
post-rewrite	執行 `git commit --amend` 或 `git rebase` 時
sendemail-validate	`git send-email` 執行前
fsmonitor-watchman	配置 `core.fsmonitor` 被設定為 `.git/hooks/fsmonitor-watchman` 或 `.git/hooks/fsmonitor-watchmanv2` 時
p4-pre-submit	`git-p4 submit` 執行前	可以用 `git-p4 submit --no-verify` 繞過
p4-prepare-changelist	`git-p4 submit` 執行後，編輯器啟動前	可以用 `git-p4 submit --no-verify` 繞過
p4-changelist	`git-p4 submit` 執行并編輯完 `changelist message` 後	可以用 `git-p4 submit --no-verify` 繞過
p4-post-changelist	`git-p4 submit` 執行後
post-index-change	索引被寫入到 `read-cache.c do_write_locked_index` 後

詳細的

HOOKS介紹

可點選這裡檢視

但針對這裡：隻要使用到其中倆條 API

Git Hook	調用時機	說明
pre-commit	`git commit` 執行前它不接受任何參數，并且在擷取送出日志消息并進行送出之前被調用。腳本 `git commit` 以非零狀态退出會導緻指令在建立送出之前中止。	可以用 `git commit --no-verify` 繞過
commit-msg	`git commit` 執行前可用于将消息規範化為某種項目标準格式。還可用于在檢查消息檔案後拒絕送出。	可以用 `git commit --no-verify` 繞過

簡單來說這兩個鈎子：

commit-msg ：可以用來規範化标準格式，并且可以按需指定是否要拒絕本次送出
pre-commit ：會在送出前被調用，并且可以按需指定是否要拒絕本次送出

tips:

接下來針對 commit-msg、pre-commit 進行 Git 代碼送出進行規範化

六、husky + commitlint + commit-msg

commitlint：用于檢查送出資訊
husky：是 git hooks 工具

注：接下的所有操作建議 npm >= 7

重要的事情說三遍！！！！！

1、commitlist

安裝依賴

項目根目錄下建立 commitlint.config.js（增加配置項 config-conventional 預設配置點選可檢視）

module.exports = {
  // 繼承的規則
  extends: ['@commitlint/config-conventional'],
  // 定義規則類型
  rules: {
    // type 類型定義，表示 git 送出的 type 必須在以下類型範圍内
    'type-enum': [
      2,// 目前驗證的錯誤級别
      'always',// 在什麼情況下進行驗證
      [
        'feat', // 新功能 feature
        'fix', // 修複 bug
        'docs', // 文檔注釋
        'style', // 代碼格式(不影響代碼運作的變動)
        'refactor', // 重構(既不增加新功能，也不是修複bug)
        'perf', // 性能優化
        'test', // 增加測試
        'chore', // 建構過程或輔助工具的變動
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小寫不做校驗
    'subject-case': [0]
  }
}

注意：確定儲存為 UTF-8 的編碼格式，否則可能會出現以下錯誤：

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

2、husky

安裝依賴

npm install [email protected] --save-dev

啟動 hooks ，生成 .husky 檔案夾

npx husky install

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

在 package.json 中生成 prepare 指令

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

執行 prepare 指令

npm run prepare

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

添加 commitlint 的 hook 到 husky 中，并指令在 commit-msg 的 hooks 下執行 npx --no-install commitlint --edit "$1" 指令

此時的 .husky 的檔案結構

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

至此，不符合規範的 commit 将不再可送出：

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

tips:

到這裡就已經完成了 90% 了

而其中的 9% 是：對代碼進行規範化，在這之前我們通過

ESLint

與

Prettier

配合解決代碼格式問題，解決的是本地代碼的格式化問題，并沒有解決代碼送出到倉庫或遠端倉庫時代碼是否符合規範

是以下面内容就使用到了 Git Hook 的另外一條鈎子 pre-commit 對代碼進行規範化

七、pre-commit

實作代碼規範化

則那麼想要完成這麼一個操作就需要使用

husky

配合

eslint

才可以實作。

執行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 時的 hook （ npx eslint --ext .js,.vue src 會在執行到該 hook 時運作）
```
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src
           
```
由于項目是 vue 項目，使用 eslint 檢測的檔案為 src 目錄下的 .vue、.js
該操作會生成對應檔案 pre-commit ：

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

關閉 VSCode 的自動儲存操作
修改一處代碼，使其不符合 ESLint 校驗規則

執行送出操作會發現，抛出一系列的錯誤，代碼無法送出

PS F:\xxxxxxxxxxxxxxxxxxx\hm-admin> git commit -m 'test'

F:\xxxxxxxxxxxxxxxx\hm-admin\src\views\Home.vue
  13:9  error  Strings must use singlequote  quotes

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

husky - pre-commit hook exited with code 1 (error)

tips:

上訴操作如果代碼不符合

ESLint

校驗規則時，送出代碼我們是送出不了的，我們隻能根據提示回去修改修改。但如果錯誤很多的時候，我們該怎麼處理？

剩下 1% 的内容就是為了解決這個問題的。

八、lint-staged

上面我們通過

pre-commit

處理了檢測代碼的送出規範問題，當我們進行代碼送出時，會檢測所有的代碼格式規範

但是這樣會存在兩個問題：

我們隻修改了個别的檔案，沒有必要檢測所有的檔案代碼格式
它隻能給我們提示出對應的錯誤，我們還需要手動的進行代碼修改

lint-staged ：就是處理這兩個問題的（自動修複格式錯誤）

lint-staged 無需單獨安裝，我們生成項目時，

vue-cli

已經幫助我們安裝過了，是以我們直接使用就可以了

修改

package.json

配置

"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }

修改

.husky/pre-commit

檔案

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

npx lint-staged

再次執行送出代碼
發現暫存區中不符合 ESlint 的内容，被自動修複

非标題黨：前端Vue React 項目程式設計規範化配置（大廠規範）

前端項目程式設計規範化配置

一、代碼檢測工具 ESLint

二、代碼格式化 Prettier

三、約定式送出規範

四、 Commitizen

五、Git Hook

六、husky + commitlint + commit-msg

七、pre-commit

八、lint-staged

九、沒了沒了，終于整理完了，一個下午的時間

繼續閱讀

袋鼠雲研發手記 | 數棧前端項目的 Code Review 實踐小結

vue IDE VSCode的安裝

ESLint結合Git Hooks實作代碼送出前的lint檢查前言一、Git Hooks是什麼二、Husky子產品的使用三、lint-staged

ESLint 報錯解決

eslint 出現一個報錯 declaration-colon-newline-after

django為不同應用添加日志功能

【項目搭建】IDEA：SpringBoot+Mybatis+maven 子項目 ——2

【項目搭建】IDEA：SpringBoot+Mybatis+maven父級項目 —— 1

【項目搭建】myeclipse ：第二步：建立SpringBoot項目

基礎學習之搭建一個java項目搭建一個java項目

搭建一個基于spring+hibernate的maven管理項目（一）一、開發工具&插件二、環境搭建三、建立項目

vs code代碼格式化配置

vscode Vue開發環境配置

Intellij IDEA進階使用技巧，快捷鍵、插件、項目搭建、部署等

ESlint 文法檢測配置項

Maven項目的依賴、繼承、聚合關系1.父項目的搭建2.子項目的搭建(繼承關系)3.子項目的搭建(聚合關系)4.優雅的使用聚合關系管理jar包版本