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}
}