vscode中下载的其他初始化插件,在vue项目中是相当让人抓狂的,在这里分享一下避免格式化冲突的一些配置。需要下载以下几个插件。
然后再打开设置面板,打开json文件,如图
注意!!!是在原来配置对象里面追加如下配置代码,同时可以将其他format插件禁用掉,重复的以下面为准,注意格式:
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"eslint.validate": [
"javascript",
"javascriptreact"
],
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 80,
// Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline] ["auto"]
"wrap_attributes": "force-expand-multiline"
}
},
"editor.tabSize": 2,
"vetur.validation.template": false,
"git.ignoreLimitWarning": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"git.confirmSync": false,
"eslint.quiet": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceAfterConstructor": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.preferences.quoteStyle": "single",
"javascript.format.insertSpaceAfterConstructor": true,
"typescript.preferences.quoteStyle": "single",
"html.format.wrapAttributes": "force-expand-multiline",
"editor.formatOnSave": true,
"prettier.vueIndentScriptAndStyle": true,
"prettier.singleQuote": true,
"prettier.useTabs": true,
"prettier.printWidth": 100