首先保证vetur,eslint, prettier 都安装。
打开preferences ->settings ,输入Vetur ,找到Edit in settings.json,加上下面代码.
mac系统可以直接点这个图标进入配置页面
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true,
"trailingComma": "none" //禁止尾随单引号
}
}
详细的配置
{
"workbench.colorTheme": "Dracula",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"editor.fontFamily": "Meslo LG M for Powerline,Menlo, Monaco, 'Courier New', monospace",
// "editor.codeActionsOnSave": true,
"sync.gist": "1ed8ebc6db8dadadb91df26c708d699d",
"files.autoSave": "onFocusChange",
// 重新设定tabsize
"editor.tabSize": 2,
// #每次保存的时候自动格式化ß
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html"
],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.validation.template": false,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"printWidth": 120,
"singleQuote": true
},
"js-beautify-html": {
"wrap_attributes": "auto",
"end_with_newline": false
},
"prettyhtml": {
"printWidth": 120,
"wrapAttributes": false,
"sortAttributes": false
}
},
"editor.wordWrapColumn": 180,
"search.followSymlinks": false,
"prettier.printWidth": 120,
"vetur.format.enable": false,
"editor.columnSelection": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vetur.completion.scaffoldSnippetSources": {},
"explorer.confirmDelete": false,
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"todohighlight.include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss"],
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"git.confirmSync": false,
"git.autofetch": true,
"git.enableSmartCommit": true,
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact"
},
"prettier.vueIndentScriptAndStyle": true,
"javascript.preferences.quoteStyle": "single",
"eslint.format.enable": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"window.zoomLevel": 0,
"editor.fontSize": 14,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}