[ 工具 ] VScode格式化

原文鏈接：https://segmentfault.com/a/1190000014354996

聲明：本文轉自https://segmentfault.com/a/1190000014354996，旨在學習分享，如有侵權請聯繫修改或刪除。

前言

感覺搭建一個舒服的前端開發環境，十分的重要定製化的格式化，編輯器自帶的格式化各種報錯，手動改真的會死人，因此搭建一個編輯器環境必不可少，現在要講的是vscode中如何定製vue

vs code的配置文件:

format相關:搜索format，你會看到很多默認的格式化配置項。

更改format配置你可以選擇想要更改的內容，複製到右邊進行更改，當然，有些配置項是裝好插件才會出來的。後面所說的設置配置文件都是修改右邊這裏哦～

安裝插件:非常簡單咯，點擊左側圖標，然後輸入你想搜索的名字就好了。當然有些插件可能沒有被官方採納。你也可以去github上下載。

所以:你想要一個什麼樣的格式化基本上都可以實現，閱讀一下不同插件的github裏面的readme就可以了。

---

1 ESLint格式化

安裝插件：ESLint

如果題主認真讀了ESLint的Readme的話，應該可以寫出下面的配置了。不過我還是寫一下好了。
用來格式化和提示格式錯誤。設置文件類型:

設置配置:

{
  "workbench.startupEditor": "welcomePage",
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

---

2 在Vue項目中的ESLint

安裝插件：Vetur

其實在工作中，我們往往不喜歡常常去按保存鍵，或者在保存之前想先格式化一下再繼續寫。因此，我採用了下面的方式： 默認自帶了格式化的功能，快捷鍵是shift+option+f（mac）。主要用來格式化複製粘貼的代碼。ESLint 在編碼過程中提示格式錯誤，養成良好的編碼習慣。

設置文件類型:

設置配置：

{
  "vetur.format.defaultFormatter.html": "prettier" //這是vue中html的格式化
  "workbench.startupEditor": "welcomePage",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.tabSize": 2,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ]
}

3 JS中的格式化

安裝插件：Javascript Standard Style

設置文件類型:

4 廢話少說，裝好上面三個插件，大家可以參考我的配置，直接複製進去就行了

{
    "editor.fontSize": 19,
    "workbench.colorTheme": "Monokai",
    "workbench.startupEditor": "welcomePage",
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "files.autoSave": "afterDelay",
    "vetur.format.defaultFormatter.html": "prettier"  
}