vscode自动格式化Setting（html短标签一行，长标签分段）

做到了什么

1、短的html 标签缩进到一行
2、长的html 标签每个属性占一行
3、html、js、css 格式化
4、保存自动格式化

个人喜欢html统一在一行，这样清晰些。
但某些table、tree有超级多的属性，又希望分段。
偶然调试出了这样的配置，可以两者兼顾，美哉~

预览

请添加图片描述

配置了什么

主要是两个插件：
1、volar （我目前用的是vue3，如果你是v2，就用vetur ）
在这里插入图片描述
2、pre t tier

其他的个人强烈推荐的：Pa t h Int el li sense，Git History，Auto Close Ta g，Auto Rename Ta g

Settin g

{
  "tabnine.experimentalAutoImports": true,
  "volar.format.initialIndent": {
    "html": true
  },
  "prettier.semi": false,
  "prettier.enable": true,
  "eslint.packageManager": "yarn",
  "explorer.confirmDelete": false,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "security.workspace.trust.untrustedFiles": "open",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "code-runner.languageIdToFileExtensionMap": {
    "bat": ".bat",
    "powershell": ".ps1",
    "typescript": ".ts"
  },
  "workbench.iconTheme": "material-icon-theme",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "thiefBook.filePath": "E:/www/name.txt",
  "editor.suggest.showStatusBar": true,
  "thiefBook.currPageNumber": 32,
  "vscode-edge-devtools.webhint": false,
  "emmet.optimizeStylesheetParsing": false,
  "vue.autoInsert.dotValue": true,
  "vue.inlayHints.missingProps": true,
  "vue.inlayHints.inlineHandlerLeading": true,
  "vue.inlayHints.optionsWrapper": true,
  "vue.splitEditors.layout.left": ["script", "scriptSetup", "styles"],
  "prettier.printWidth": 150,
  "editor.formatOnSave": true,
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  }
}