image

前言

以前公司的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，參考了很多網上大佬的文章，但是感覺這個配置好像還差了哪里，但又始終不知道問題在哪里，熱烈歡迎大家交流指教。