VSCode開發Vue-代碼格式化最完美設置

Vue在VsCode上面的開發，代碼格式話是個老大難問題了。

有很多文章介紹Prettier四個配置方法，以及如何啟用。但是結果就是：一個一個配完，還是看着難受

現在嘗試出一種最完美格式化方式，分享出來

1、安裝Beautify插件

 

 

2、修改設置：

兩個地方

2.1 Editor: Word Wrap（控制折行的方式。）：選擇 bounded，可以根據窗口寬度自動調整換行

2.2 Editor: Word Wrap Column（ (同時修改於: 工作區) Editor: Word Wrap 為  wordWrapColumn 或  bounded 時，控制編輯器的折行列。）

      這個是設置換行長度，根據自己顯示器寬度設置

 

2、【重點】修改setting.json，漏了這一步就達不到效果了

 

 

{
  "editor.tabSize": 2,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
    "prettyhtml": {
      "printWidth": 160,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "search.followSymlinks": false,
  "git.autorefresh": false,
  "explorer.confirmDelete": false,
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "50%",
    "height": "100%",
    "background-position": "50% 50%",
    "background-repeat": "no-repeat",
    "opacity": 1
  },
  "liveServer.settings.useWebExt": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.sideBar.location": "left",
  "background.enabled": false,
  "liveServer.settings.fullReload": true,
  "livereload.port": 5500,
  "editor.largeFileOptimizations": false,
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "files.autoSave": "afterDelay",
  "editor.wordWrap": "bounded",
  "editor.wordWrapColumn": 160,
  "files.associations": {
  
  },
}