1，前言
2，建立專案
2，安裝vue全家桶
3，設定prettier
4，設定eslint
5，設定husky + git勾點
6，設定commitlint
- 6.1，設定commitlint格式檢查
- 6.2，安裝自定義的輔助提交依賴

1，前言

本文主要分享一個專案的規範約束從0到1的流程，從通過vue-cli建立專案，到團隊共同作業外掛安裝（husky、eslint、commitlint、prettier等）。

本文vue-cli腳手架為5.x
本文webpack版本為5.x
本文vue版本為3.x

2，建立專案

如果你的vue-cli不是5.x版本，並且不知道怎麼建立vue-cli專案，請先檢視該文章：傳送門

首先進入一個空間足夠的磁碟，比如樓主是進的L盤，輸入以下命令：

vue create demo

建立完畢後，專案結構如下圖：

此時可以開啟package.json，檢視專案當前裝的依賴。預設是已經安裝了eslint、babel和vue

"dependencies": {
   "core-js": "^3.8.3",
   "vue": "^3.2.13"
 },
 "devDependencies": {
   "@babel/core": "^7.12.16",
   "@babel/eslint-parser": "^7.12.16",
   "@vue/cli-plugin-babel": "~5.0.0",
   "@vue/cli-plugin-eslint": "~5.0.0",
   "@vue/cli-service": "~5.0.0",
   "eslint": "^7.32.0",
   "eslint-plugin-vue": "^8.0.3"
 }

2，安裝vue全家桶

先安裝一些常用的vue生態，包括axios，vue-router，vuex，qs，element-plus等，具體使用可看下方教學連結：

npm install axios vue-router vuex qs element-plus --save

再安裝typescript

npm install [email protected] --save -D

3，設定prettier

首先在根目錄建立.prettierrc.js檔案，這個檔案是專案的prettier規則，內容如下：

module.exports = {
  tabWidth: 2, // tab縮排大小,預設為2
  useTabs: false, // 使用tab縮排，預設false
  semi: false, // 使用分號, 預設true
  singleQuote: true, // 使用單引號, 預設false(在jsx中設定無效, 預設都是雙引號)
  jsxBracketSameLine: false, // 在jsx中把'>' 是否單獨放一行
  jsxSingleQuote: false, // 在jsx中使用單引號代替雙引號
  proseWrap: 'preserve', // "always" - 當超出print width（上面有這個引數）時就折行 "never" - 不折行 "perserve" - 按照檔案原樣折行
  trailingComma: 'none', // 物件最後一項預設格式化會加逗號
  arrowParens: 'avoid', // 箭頭函數引數括號 預設avoid 可選 avoid(能省略括號的時候就省略)| always(總是有括號)
  bracketSpacing: true, // 物件中的空格 預設true{ foo: bar } false:{foo: bar}
  printWidth: 100 // 一行多長，超過的會換行
}

然後在根目錄建立.prettierignore檔案，這個是設定有那些檔案需要忽略eslint的檢查，內容如下：
```
node_modules
dist
public
.vscode
```
安裝prettier的擴充套件。eslint-plugin-prettier，eslint-config-prettier
```
npm install eslint-config-prettier eslint-plugin-prettier --save -D
```

4，設定eslint

首先在根目錄建立.eslintrc.js，這個檔案是專案的eslint規則，內容如下：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    commonjs: true,
    es6: true,
    amd: true,
  },
  globals: { // 允許的全域性變數
    TAny: true,
    TAnyType: true,
    TAnyArray: true,
    TAnyFunc: true,
    TDictArray: true,
    TDictObject: true
  },
  extends: ['plugin:vue/vue3-essential', 'airbnb-base', '@vue/typescript/recommended'], // 擴充套件外掛
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    ecmaFeatures: {
      tsx: true, // 允許解析TSX
      jsx: true,
    }
  },
  settings: {
    'import/resolver': {
      node: { extensions: ['.js', '.jsx', '.ts', '.tsx', 'vue'] }
    }
  },
  plugins: ['prettier'],
  rules: {
    // 0表示不不處理，1表示警告，2表示錯誤並退出
    'vue/multi-word-component-names': 'off', // 要求元件名稱始終為多字
    '@typescript-eslint/no-unused-vars': [
      'error',
      { varsIgnorePattern: '.*', args: 'none' }
    ],
    camelcase: 1, // 駝峰命名
    'prettier/prettier': 0, // 會優先採用prettierrc.json的設定，不符合規則會提示錯誤
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'comma-dangle': 'off',
    'import/prefer-default-export': 'off', // 優先export default匯出
    'no-param-reassign': 'off', // 函數引數屬性的賦值
    semi: 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    'no-unused-expressions': 'off', // 聯式呼叫使用?
    'import/no-cycle': 'off', // 匯入迴圈參照報錯
    'arrow-parens': 'off', // 箭頭函數一個引數可以不要括號
    'no-underscore-dangle': 'off', // 無下劃線
    'no-plusplus': 'off', //  使用一元運運算元
    'object-curly-newline': 'off',
    'no-restricted-syntax': 'off', // 使用for of
    'operator-linebreak': 'off', // after
    'arrow-body-style': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off', // ts每個函數都要顯式宣告返回值
    // 暫時遮蔽檢測@別名
    'import/no-useless-path-segments': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'import/no-absolute-path': 'off',
    'import/no-extraneous-dependencies': 'off',
    'newline-per-chained-call': ['error', { ignoreChainWithDepth: 10 }],
    'linebreak-style': [0, 'error', 'windows'],
    'no-shadow': 'off', // 注意你必須禁用基本規則，因為它可以報告不正確的錯誤
    '@typescript-eslint/no-shadow': ['error'],
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        multiline: {
          delimiter: 'none',
          requireLast: true,
        },
        singleline: {
          delimiter: 'semi',
          requireLast: false,
        },
      },
    ],
    'keyword-spacing': [
      2,
      {
        before: true,
        after: true,
      },
    ]
  }
}

然後在根目錄建立.eslintignore檔案，這個是設定那些檔案需要忽略eslint的檢查，內容如下：
```
node_modules
dist
.vscode
```
安裝eslint的擴充套件。eslint-config-airbnb-base，@typescript-eslint/eslint-plugin，@vue/eslint-config-typescript，@typescript-eslint/parser，@vue/eslint-config-typescript，eslint-plugin-import。
```
npm install eslint-config-airbnb-base @typescript-eslint/eslint-plugin @vue/eslint-config-typescript @typescript-eslint/parser @vue/eslint-config-typescript eslint-plugin-import --save -D
```

到這一步，就可以在package.json檔案裡的scripts物件裡新增一行自動修復檔案的命令 lint-fix：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts"
  }

在專案根目錄開啟終端，輸入npm run lint-fix，會按照你的eslint要求自動進行修復，部分修復不了的需要手動修改。

5，設定husky + git勾點

husky是一個讓設定git勾點變得更簡單的工具，支援所有的git勾點。它可以將git內建的勾點暴露出來，很方便地進行勾點命令注入，而不需要在.git/hooks目錄下自己寫shell指令碼了。您可以使用它來lint您的提交訊息、執行測試、lint程式碼等。當你commit或push的時候。husky觸發所有git勾點指令碼。

安裝husky
```
npm install husky --save -D
```
啟用husky，啟用後，根目錄會出現一個.husky的資料夾
```
npx husky install
```

編輯package.json檔案，在scripts中新增"prepare": "husky install"命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts",
    "prepare": "husky install"
  },

在.husky資料夾中，新建pre-commit檔案，寫入以下程式碼：

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

npx lint-staged --allow-empty

安裝lint-staged，這是本地暫存程式碼的檢查工具，當你git提交程式碼時，會自動檢查是否符合專案eslint和prettier規範
```
npm install lint-staged --save -D
```
在專案根目錄建立.lintstagedrc.json檔案，寫入以下程式碼：
```
{
  "*.{ts,js,vue,tsx,jsx}": ["npm run lint-fix", "prettier --write"]
}
```

到這一步，git提交的時候，會自動根據專案eslint和prettier規範修復程式碼並提交，如果碰到修復不了的，會取消提交。

6，設定commitlint

在git提交時，如果能找按照規範寫好提交資訊，能提高可讀性以及專案維護效率，方便回溯。這裡我們使用commitlint規範git commit提交的資訊。

6.1，設定commitlint格式檢查

首先安裝@commitlint/cli和@commitlint/config-conventional（如果要自定義提交規範，就不用安裝@commitlint/config-conventional）
```
npm install @commitlint/cli @commitlint/config-conventional --save -D
```
在專案根目錄的.husky資料夾中，新建commit-msg檔案，寫入以下內容：
```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit $1
```

在專案根目錄新建commitlint.config.js檔案，寫入以下內容：

/*
"off"或者0:關閉規則 "warn"或1:開啟規則丟擲警告 "error"或2:開啟規則丟擲錯誤
*/
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'], // body上面有換行
    'footer-leading-blank': [1, 'always'], // footer上面有換行
    'header-max-length': [2, 'always', 108], // header上最大108字元
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新增功能、頁面
        'fix', // 修補bug
        'docs', // 修改檔案、註釋
        'style', // 格式：不影響程式碼執行的變動、空格、格式化等等
        'ui', // ui修改：佈局、css樣式等等
        'hotfix', // 修復線上緊急bug
        'build', // 改變構建流程，新增依賴庫、工具等（例如:修改webpack）
        'refactor', // 程式碼重構，未新增任何功能和修復任何bug
        'revert', // 回滾到上一個版本
        'perf', // 優化：提升效能、使用者體驗等
        'ci', // 對CI/CD組態檔和指令碼的更改
        'chore', // 其他不修改src或測試檔案的更改
        'test', // 測試用例：包括單元測試、整合測試
    	'update' // 更新：普通更新
      ]
    ]
  }
}

在git提交時，填寫的commit資訊格式規範如下：

<type>(<scope>): <subject> // 必填
// 空一行
<body> // 必填
// 空一行
<footer> // 可忽略不填

例子：

git commit -m 'style(home.vue):修改樣式

修改了home.vue的樣式，新增了背景色'

6.2，安裝自定義的輔助提交依賴

首先需要安裝commitizen和commitlint-config-cz和cz-customizable

npm install commitizen commitlint-config-cz cz-customizable --save -D

然後新建.cz-config.js檔案，內容如下：

'use strict'
module.exports = {
  types: [
    { value: 'feat', name: '新增：新增功能、頁面' },
    { value: 'fix', name: 'bug：修復某個bug' },
    { value: 'docs', name: '檔案：修改增加檔案、註釋' },
    { value: 'style', name: '格式：不影響程式碼執行的變動、空格、格式化等等' },
    { value: 'ui', name: 'ui修改：佈局、css樣式等等' },
    { value: 'hotfix', name: 'bug：修復線上緊急bug' },
    { value: 'build', name: '測試：新增一個測試' },
    { value: 'refactor', name: '重構：程式碼重構，未新增任何功能和修復任何bug' },
    { value: 'revert', name: '回滾：程式碼回退到某個版本節點' },
    { value: 'perf', name: '優化：提升效能、使用者體驗等' },
    { value: 'ci', name: '自動化構建：對CI/CD組態檔和指令碼的更改' },
    { value: 'chore', name: '其他修改：不修改src目錄或測試檔案的修改' },
    { value: 'test', name: '測試：包括單元測試、整合測試' },
    { value: 'update', name: '更新：普通更新' }
  ],
  // 互動提示資訊
  messages: {
    type: '選擇一種你的提交型別：',
    scope: '選擇一個影響範圍（可選）:',
    customScope: '表示此更改的範圍：',
    subject: '短說明：\n',
    body: '長說明，使用"|"符號換行（可選）：\n',
    breaking: '非相容性說明（可選）：\n',
    footer: '關閉的issue，例如：#31, #34（可選）：\n',
    confirmCommit: '確定提交說明?（yes/no）'
  },
  allowCustomScopes: true,
  // 設定選擇了那些type，才詢問 breaking message
  allowBreakingChanges: ['feat', 'fix', 'ui', 'hotfix', 'update', 'perf'],
  subjectLimit: 100
}

然後修改commitlint.config.js檔案的extends選項，改成['cz']
```
module.exports = {
	extends: ['cz'],
	......
}
```

編輯package.json檔案，在scripts中新增"commit": "git-cz"命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint-fix": "vue-cli-service lint --fix ./src --ext .vue,.js,.ts",
    "prepare": "husky install",
    "commit": "git-cz"
}

在根目錄終端，執行以下命令初始化命令列的選項資訊：
```
npx commitizen init cz-customizable --save-dev --save-exact
```

執行完成後，在package.json中會出現如下選項：

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

此時，程式碼提交過程就多了一個可選的規範提示，提交流程是先git add .，提交到暫存區，然後終端執行npm run commit，根據提示選擇資訊或者輸入即可，最後git push推播，如下gif圖所示：

附幾個我個人的專案模板：

如果看了覺得有幫助的，我是@上進的鵬多多，歡迎點贊關注評論；END

PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦

往期文章

個人主頁

手把手教你搭建規範的團隊vue專案，包含commitlint，eslint，prettier，husky，commitizen等等