VScode 結局插件prettier和vetur格式化衝突

先上配置代碼

{
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "all",
  "editor.multiCursorModifier": "ctrlCmd",
  "git.autofetch": true,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "open-in-browser.default": "Chrome",
  "files.autoSave": "onWindowChange",
  "window.zoomLevel": 0,
  /***********************以下是常用配置******************************/
  /*
    * editor 相關
    */
  "editor.formatOnSave": true, // #每次保存的時候自動格式化
  "editor.formatOnPaste": true, // #每次粘貼的時候自動格式化
  "editor.codeActionsOnSave": { // #每次保存的時候將代碼按eslint格式進行修復
    "source.fixAll.eslint": true
  },
  /*
    * prettier 相關
    */
  "prettier.jsxSingleQuote": true,
  "prettier.semi": false, //  #去掉代碼結尾的分號
  "prettier.singleQuote": true, //  #使用帶引號替代雙引號
  "prettier.requireConfig": true,
  /*
    * javascript 相關
    */
  "javascript.preferences.quoteStyle": "single",
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  #讓函數(名)和後面的括號之間加個空格
  "javascript.updateImportsOnFileMove.enabled": "always",
  /*
    * html 相關
    */
  "html.format.endWithNewline": true,
  /*
    * vetur 相關
    */
  "vetur.format.defaultFormatter.js": "vscode-typescript", // #讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatter.html": "prettier", //格式化.vue中html
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
}

需要注意的點

• 單雙引號的問題

  prettier解決

  "prettier.singleQuote": true, //  #使用帶引號替代雙引號
  

• 句末分號的問題

  prettier解決

  "prettier.semi": false, //  #去掉代碼結尾的分號
  

• vue中html屬性的問題

  vetur解決

  "vetur.format.defaultFormatter.html": "prettier", //格式化.vue中html
  

  這塊根據根據個人愛好，上述是我的配置，也有如下配置

  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          "wrap_line_length": 120,
          "wrap_attributes": "auto",  // 超出每行的限制折行
        	"wrap_attributes": "force-expand-multiline",  // 不管有多少屬性都折行
          "wrap_attributes": "force-aligned",  // 第一個屬性不折行，後續所有屬性和第一個對齊折行
          "end_with_newline": false
      }
  }
  
  

• vue中的樣式問題

  vetur解決，使用默認配置，不要用prettier