VS Code書寫vue專案配置 eslint+prettier 統一程式碼風格

遊魂Andy發表於2019-03-04
VueEsLint

VS Code書寫vue專案配置 eslint+prettier 統一程式碼風格

前言

以前公司的vue專案只是我一個人在寫，程式碼風格統一，但是後來隨著團隊增加，統一的程式碼風格就越來越重要。我的主力工具是sublime，ws輔助，vscode基本很少使用（就下載安裝放在冷宮），但是聽說用來寫vue專案還不錯，就開啟了一番折騰。當然工具麼，沒有誰好誰壞了~~ 不盲目站隊，適合自己的就是最好的。

目標是：Eslint校驗程式碼語法，prettier統一格式化程式碼，按下儲存自動修復eslint錯誤，自動格式化程式碼（因為懶~）

安裝vscode外掛

首先，需要安裝 Vetur、ESLint、Prettier - Code formatter這三個外掛，安裝完重啟下，防止外掛不生效。

另外這裡有個坑， Beautify外掛會佔用格式化程式碼的快捷鍵，因此會和prettier產生衝突，所以直接禁用掉。

vscode外掛配置

開啟vscode工具的設定（快捷鍵 Ctrl + ,）裡面有兩個設定。

一個是 USER SETTINGS（使用者設定）也就是全域性配置，其他專案也會應用這個配置。

另一個是WORKSPACE SETTINGS（工作區設定）也就是專案配置，會在當前專案的根路徑裡建立一個.vscode/settings.json檔案，然後配置只在當前專案生效。

我把配置寫在了工作區設定，配置如下：

{
    //.vue檔案template格式化支援，並使用js-beautify-html外掛
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，屬性強制換行
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned"
      }
    },
    //根據檔案字尾名定義vue檔案型別
    "files.associations": {
      "*.vue": "vue"
    },
    //配置 ESLint 檢查的檔案型別
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    //儲存時eslint自動修復錯誤
    "eslint.autoFixOnSave": true,
    //儲存自動格式化
    "editor.formatOnSave": true
}
複製程式碼

ESLint 和 Prettier 的衝突修復

由於需要同時使用prettier和eslint，而prettier的一些規則和eslint的一些規則可能存在衝突，例如prettier字串預設是用雙引號而esLint定義的是單引號的話這樣格式化之後就不符合ESLint規則了。

所以要解決衝突就需要在Prettier的規則配置裡也配置上和ESLint一樣的規則，直接覆蓋掉，ESLint和Prettier的配置檔案內容如下：

.eslintrc.js

配置使用單引號、結尾不能有分號。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強制使用單引號
    quotes: ['error', 'single'],
    //強制不使用分號結尾
    semi: ['error', 'never']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

複製程式碼

.prettierrc

配置使用單引號、結尾不能有分號。

{
   //開啟 eslint 支援
  "eslintIntegration": true,
  //使用單引號
  "singleQuote": true,
  //結尾不加分號
  "semi": false
}
複製程式碼

也可以直接在vscode工作區配置prettier

{
    //開啟 eslint 支援
    "prettier.eslintIntegration": true,
    //使用單引號
    "prettier.singleQuote": true,
    //結尾不加分號
    "prettier.semi": false,
}
複製程式碼

效果預覽

屬性強制對齊.gif

其他.gif

最後

這下再也不用看到別人程式碼一團糟吐槽了。第一次折騰vscode，參考了很多網上大佬的文章，但是感覺這個配置好像還差了哪裡，但又始終不知道問題在哪裡，熱烈歡迎大家交流指教。

相關文章