一，需要安装的插件
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" }, }