一，需要安裝的插件
Vetur， prettier-vscode
二、setting.josn配置
文件-首選項-設置-在setting.josn中編輯，打開這個setting.josn文件后將下面配置復制即可
{
"editor.detectIndentation": false, // 改為false，這里默認是true
"vetur.format.options.tabSize": 4, // tab 大小為4個空格
// 強制單引號
"prettier.singleQuote": true,
// 盡可能控制尾隨逗號的打印
"prettier.trailingComma": "all",
// 開啟 eslint 支持
"prettier.eslintIntegration": true,
// 保存時自動fix
// "eslint.autoFixOnSave": true,
// 添加 vue 支持
// "eslint.validate": [
// "javascript",
// "javascriptreact",
// {
// "language": "vue",
// "autoFix": true
// }
// ],
// 使用插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 屬性強制折行對齊
"wrap_attributes": "force-aligned"
}
},
// "vetur.format.defaultFormatter": {
// "html": "prettier",
// "css": "prettier",
// "postcss": "prettier",
// "scss": "prettier",
// "less": "prettier",
// "js": "prettier",
// "ts": "prettier",
// "stylus": "stylus-supremacy"
// },
// html顏色高亮
"files.associations": {
".eslintrc": "json",
"*.vue": "html"
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
}
三、配置.editorconfig文件
# https://editorconfig.org root = true # 根目錄的配置文件，編輯器會由當前目錄向上查找，如果找到 `roor = true` 的文件，則不再查找 [*] # 匹配所有的文件 indent_style = space # 空格縮進 indent_size = 4 # 縮進空格為4個 end_of_line = lf # 文件換行符是 linux 的 `\n` charset = utf-8 # 文件編碼是 utf-8 trim_trailing_whitespace = true # 不保留行末的空格 insert_final_newline = true # 文件末尾添加一個空行 curly_bracket_next_line = false # 大括號不另起一行 spaces_around_operators = true # 運算符兩遍都有空格 indent_brace_style = 1tbs # 條件語句格式是 1tbs [*.js] # 對所有的 js 文件生效 quote_type = single # 字符串使用單引號 [*.{html,less,css,json}] # 對所有 html, less, css, json 文件生效 quote_type = double # 字符串使用雙引號 [package.json] # 對 package.json 生效 indent_size = 2 # 使用2個空格縮進
=======================================================
另一種配置
{ "editor.detectIndentation": false, // 改為false，這里默認是true "vetur.format.options.tabSize": 4, // tab 大小為4個空格 // 強制單引號 "prettier.singleQuote": true, // 盡可能控制尾隨逗號的打印 "prettier.trailingComma": "all", // 開啟 eslint 支持 "prettier.eslintIntegration": true, // 保存時自動fix // "eslint.autoFixOnSave": true, // 添加 vue 支持 // "eslint.validate": [ // "javascript", // "javascriptreact", // { // "language": "vue", // "autoFix": true // } // ], // 使用插件格式化 html "vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化插件的配置 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // 屬性強制折行對齊 "wrap_attributes": "force-aligned" } }, // "vetur.format.defaultFormatter": { // "html": "prettier", // "css": "prettier", // "postcss": "prettier", // "scss": "prettier", // "less": "prettier", // "js": "prettier", // "ts": "prettier", // "stylus": "stylus-supremacy" // }, // html顏色高亮 "files.associations": { ".eslintrc": "json", "*.vue": "html" }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, }