先上配置代碼

{"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 相關(guān)*/"editor.formatOnSave": true, // #每次保存的時(shí)候自動(dòng)格式化"editor.formatOnPaste": true, // #每次粘貼的時(shí)候自動(dòng)格式化"editor.codeActionsOnSave": { // #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)"source.fixAll.eslint": true},/** prettier 相關(guān)*/"prettier.jsxSingleQuote": true,"prettier.semi": false, // #去掉代碼結(jié)尾的分號(hào)"prettier.singleQuote": true, // #使用帶引號(hào)替代雙引號(hào)"prettier.requireConfig": true,/** javascript 相關(guān)*/"javascript.preferences.quoteStyle": "single",// "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格"javascript.updateImportsOnFileMove.enabled": "always",/** html 相關(guān)*/"html.format.endWithNewline": true,/** vetur 相關(guān)*/"vetur.format.defaultFormatter.js": "vscode-typescript", // #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化"vetur.format.defaultFormatter.html": "prettier", //格式化.vue中html"[vue]": {"editor.defaultFormatter": "octref.vetur"}, }

需要注意的點(diǎn)

• 單雙引號(hào)的問(wèn)題

  prettier解決

  "prettier.singleQuote": true, // #使用帶引號(hào)替代雙引號(hào)

• 句末分號(hào)的問(wèn)題

  prettier解決

  "prettier.semi": false, // #去掉代碼結(jié)尾的分號(hào)

• vue中html屬性的問(wèn)題

  vetur解決

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

  這塊根據(jù)根據(jù)個(gè)人愛(ài)好，上述是我的配置，也有如下配置

  "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", // 第一個(gè)屬性不折行，后續(xù)所有屬性和第一個(gè)對(duì)齊折行"end_with_newline": false} }

• vue中的樣式問(wèn)題

  vetur解決，使用默認(rèn)配置，不要用prettier

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。