最近使用vue ui建立了一個vue3+typescript專案，需要配置程式碼格式化和git提交資訊規範。

使用vue UI建立的時候，使用eslint 選擇專案總是錯誤。搞得一頭霧水，沒辦法單獨新增ESlint

Vue3的開發外掛使用了尤大推薦的Volar，Volar外掛中沒有Eslint和Prettier相關配置，需要我們自己按自己專案的實際需要進行配置。

vscode 需要安裝外掛，需要安裝的外掛有：Prettier和Eslint

 

 

// 安裝perttier yarn add prettier --save-dev --save-exact // 安裝eslint yarn add eslint --save-dev // 安裝prettier 與 eslint相容的外掛 yarn add eslint-config-prettier --save-dev // 安裝vue官方推薦的eslint外掛 yarn add eslint-plugin-vue --save-dev

• 在package.json中新增"prettier"欄位（Prettier官方推薦的配置方式）

"prettier": { "printWidth": 80, "tabWidth": 2, "useTabs": false, "singleQuote": true, "semi": true, "trailingComma": "all" } 上面的配置可以根據自己的專案修改配置

在工程的根目錄建立檔案.prettierignore，寫入以下內容：

這個是忽略配置 # Ignore artifacts: dist coverage

 

配置eslint

• 在package.json中新增"eslint"欄位

"eslint": {

"extends":

[ "plugin:vue/vue3-recommended", "prettier" ]

}

 

配置工程的settings.json

 

在工程根目錄下建立.vscode目錄，在.vscode中建立settings.json檔案，寫入以下內容：

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "window.zoomLevel": 1,
  "files.eol": "\n"
}

 

主要是配置了各型別檔案的預設格式化工具是prettier，以及儲存時自動格式化檔案。

配置Pre-commit Hook

在程式碼commit前，對處於staged狀態下的檔案進行一次格式化，避擴音交的格式不符合要求。 在專案根目錄執行：

npx mrm@2 lint-staged

 

 

 

等待命令執行完成後，會自動安裝husky和lint-staged依賴，並建立.husky目錄，同時在package.json中添加了相應的欄位。 我們需要修改package.json中的lint-staged欄位：

"lint-staged": {
"*.{js,css,md,ts,tsx,vue}": "prettier --write"
}

配置commitlint

git提交資訊的隨意編寫對專案的長期維護來說是十分不利的，commitlint是一個用於檢查git提交資訊的工具，其約定了commit資訊的格式：

安裝Npm依賴

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

新增配置檔案

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

module.exports = {
extends: ['@commitlint/config-conventional'],
};

注意：這個檔案的編碼格式必須是UTF-8，否則在git提交時會報錯

新增husky配置

在.husky目錄下新增檔案commit-msg，寫入以下內容：

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

npx --no-install commitlint --edit $1

至此，commitlint就配置好了，在下一次git commit時需要按照commitlint約定的格式.