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,
}

效果預覽

最後

這下不再用看到別人代碼一團糟吐槽了。第一次折騰vscode，參考了不少網上大佬的文章，可是感受這個配置好像還差了哪裏，但又始終不知道問題在哪裏，熱烈歡迎你們交流指教。