做到了什么
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"
}
}