1.執(zhí)行vue3官網(wǎng)的創(chuàng)建命令 npm init vue@latest,把eslint和prettier都安裝了

2.npm install --save-dev lint-staged

3.如果沒安裝Husky,安裝一下,如已安裝則跳過此步
npx husky-init && npm install

4.在 .husky/pre-commit 把 npm test 刪了 寫上 npx lint-staged

5.在根目錄下面創(chuàng)建 .lintstagedrc.json 文件,寫上如下內(nèi)容

{
  "*.{vue,js,ts,jsx,tsx,cjs,mjs}": [
    "prettier --write",
    "eslint --ext .vue,.js,.ts,.jsx,.tsx,.cjs,.mjs --fix"
  ],
  "*.{less,css,json}": ["prettier --write"]
}

注意:
1.prettier --write后面不要加 . 加了就相當(dāng)于把所有文件都格式化一遍

prettier的格式化推薦
創(chuàng)建.prettierrc.json文件

{
  "semi": false,  //不使用分號
  "singleQuote": true,   //使用單引號
  "trailingComma": "none",  //末尾不加逗號
  "arrowParens": "avoid"  //箭頭函數(shù)在有一個形參的時候省略括號
}

為了兼容團(tuán)隊里有Mac,Windows,VSCode,WebStorm的情況,統(tǒng)一編輯器設(shè)置
創(chuàng)建 .editorconfig 文件,把以下內(nèi)容粘進(jìn)去

# https://editorconfig.org

root = true

[*]
charset = utf-8  #文件字符集
indent_style = space #縮進(jìn)風(fēng)格(tab|space)
indent_size = 2 # 縮進(jìn)大小
end_of_line = lf # 控制換行類型
insert_final_newline = true #始終在文件末尾插入一個新行
trim_trailing_whitespace = true #去除行首空白字符

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

不需要格式化的內(nèi)容創(chuàng)建 .prettierignore文件,寫入以下內(nèi)容

node_modules
dist
build
*.html
coverage

不需要lint的內(nèi)容創(chuàng)建 .eslintignore文件,寫入以下內(nèi)容

node_modules
dist
build
**/vendor/*.js  #代碼引入的三方庫(視自己項目情況而定)