先上配置代碼

{"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

總結

以上是生活随笔為你收集整理的VScode 结局插件prettier和vetur格式化冲突的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。