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

mmmmmmmmzw

已于 2023-08-02 09:51:06 修改

阅读量1.6k

点赞数 3

文章标签： vscode html 前端 vue.js 编辑器

于 2023-08-02 09:29:04 首次发布

本文链接：https://blog.csdn.net/mmmmmmmmzw/article/details/132054356

版权

本文介绍了作者如何在开发中实现HTML代码的快速格式化，兼顾短标签一行显示和长标签属性分段，以及使用Volar和Prettier等插件进行个性化配置，确保代码美观和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做到了什么

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

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

预览

请添加图片描述

配置了什么

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

其他的个人强烈推荐的：Path Intellisense，Git History，Auto Close Tag，Auto Rename Tag

Setting

{
  "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"
  }
}