Vue3項目工程化配置：Prettier + Eslint + husky + commitlint

最近使用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約定的格式.