vscode編輯器vue項目格式化代碼

使用Vue開發項目的時候，開啓ESlint校驗後有各種頭疼的報錯，即便與同事約定好了一些代碼編寫規範，偶爾也會有一些遺漏的時候，不過可以通過一些擴展插件來自動格式化代碼，來避免一些低級bug的產生。

總體分三步：

• 第一步：
  依次下載以下三個擴展插件，當然如果開發vue項目其他兩個也是很有必要的。
  

• 第二步：
  打開編輯器中用戶設置的settings.json文件，在後面添加如下關於格式化格則的代碼

    // #讓函數(名)和後面的括號之間加個空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    // tab 大小爲2個空格
    "editor.tabSize": 2,
    // 100 列後換行
    "editor.wordWrapColumn": 100,
    // 保存時格式化
    "editor.formatOnSave": true,
    // 開啓 vscode 文件路徑導航
    "breadcrumbs.enabled": true,
    // prettier 設置語句末尾不加分號
    "prettier.semi": false,
    // prettier 設置強制單引號
    "prettier.singleQuote": true,
    // 註釋後面加空格
    "prettier.eslintIntegration": true,
    // 選擇 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 顯示 markdown 中英文切換時產生的特殊字符
    "editor.renderControlCharacters": true,
    // 設置 eslint 保存時自動修復
    "eslint.autoFixOnSave": true,
    // eslint 檢測文件類型
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
        "language": "html",
        "autoFix": true
      },
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    // vetur 的自定義設置
    "vetur.format.defaultFormatterOptions": {
      "prettier": {
        "singleQuote": true,
        "semi": false
      }
    }
  

• 第三步：
  如果不出意外，以上兩步是可以完成保存時自動格式化代碼的功能，不過有些同學可能不太習慣函數圓括號之前沒有空格，那就把第二步中的"javascript.format.insertSpaceBeforeFunctionParenthesis": false,刪除掉就好了。喜歡的同學只需要關閉Eslint關於函數括號的錯誤提示就好了。比如在.eslintrc.js中添加如下代碼：

  // allow async-await
  'generator-star-spacing': 'off',
  // 函數圓括號之前沒有一個空格
  "space-before-function-paren": ["error", "never"]
  

  
  over