vscode格式化vue文件配置_配置vscode格式vue2

vscode格式化vue2项目的常用配置，如下：

插件：

• Vue VSCode Snippets
• Vetur
• Prettier
• ESLint

默认格式化：vuter

设置：

{
"vetur.validation.template": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #括号成对显示
"editor.bracketPairColorization.enabled": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #vue组件中html代码格式化样式
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-aligned" // 属性分行对齐
    //  "wrap_attributes": "auto" // 属性在一行显示
    // "wrap_attributes": "force",
    // "wrap_attributes": "force-aligned",
    // "wrap_attributes": "force-expand-multiline"
  }
},
"editor.mouseWheelZoom": true,
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"workbench.sideBar.location": "left",
"breadcrumbs.enabled": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",
// 保存时修复eslint错误
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": false
},
"editor.snippetSuggestions": "top",
"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

效果如下：