husky7 + eslint +prettier配置vue2.x 開發環境

很少幾個人協作開發的時候，可能代碼格式和規范沒那么重要，只要開發者水平不要差太多，相互口頭說一下基本可以避免大部分問題。 但是團隊人員一旦多起來，那么這種溝通成本就是幾何級數增長了。這個時候就需要通過項目中的規范來實行了。 而這里面目前來說比較有效的辦法就是通過 git鈎子來對代碼進行檢查和格式化。

算了，項目開發時間比較緊迫，這里就做個簡單的總結。 首先是husky7 + eslint +prettier + vue的相關代碼檢查開發依賴

"babel-eslint": "^10.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.15.1",
"husky": "^7.0.1",
"lint-staged": "^11.1.2",
"prettier": "^2.3.2",

安裝依賴后，就是相關配置。

husky7的配置是通過工程化的方式，在項目目錄下單獨的 .husky 文件來簡歷對應的git鈎子。

建議，在package.json中增加 script

 "prepare": "husky install"

這樣在安裝依賴的時候，會自動執行husky的初始化

也可以手動，通過

npx husky install

來手動執行husky的初始化

然后添加提交的鈎子

npx husky add pre-commit "npx lint-staged"

lint-staged對應的配置，需要在項目根目錄新建 文件名為".lintstagedrc.json"的文件

內容如下：

{
  "*.{js,vue}": ["eslint", "prettier --write"],
  "*.{less,scss}": "prettier --write",
  "*.{js,css,json,md}": ["prettier --write"]
}

注意，擴展名列表中間不能有空格。前面代表要匹配的擴展名文件，后面代表對該文件執行的操作。

經過以上配置后，當被暫存的文件（git中staged的文件）,被commit時，就會對這些文件執行匹配規則，如果匹配到對應文件，則執行對應的命令。

例如按照以上配置，則

當被暫存的文件包含 js 或vue 擴展名的文件時，就會執行 eslint檢查，並執行 prettier格式化，如果執行失敗，git會給出提示並顯示錯誤的文件及代碼位置，按照要求修復文件再次提交即可。

如果執行成功，則將被自動提交(commit）。

對於vscode而言，會有部分prettier規則和 eslint規則不兼容的情況，主要表現在，縮進、結束標簽匹配等。

下面是一些關鍵部分的eslint配置修改，用於匹配prettier的校驗規則。

 

rules: {
    'max-len': [0, 150, 2, { ignoreUrls: true }],
    'vue/html-indent': ['off', 2],
        'vue/html-closing-bracket-newline': [
      0,
      {
        singleline: 'never',
        multiline: 'always',
      },
    ],
    // 未使用組件報錯，禁用
    'vue/no-unused-components': 0,
    // VUE模板未使用變量
    'vue/no-unused-vars': 0,
    indent: ['off', 2],
    'comma-dangle': [0, 'always'],
    semi: [2, 'never']
}

具體規則，可以根據實際使用情況，進行對應的開啟關閉或者修改。

同時，建議使用 vscode，安裝 vetur、vue-helper、prettier、ESLint、GitHistory、GitLens 插件輔助開發。