VS Code Vue代码格式化_visuo code vue格式化-优快云博客

本文链接：https://blog.youkuaiyun.com/xuzailin/article/details/82781365

本文介绍了如何在Visual Studio Code (VS Code) 中配置Vue项目的代码格式化，包括设置Vue主题、使用vetur插件、启用js-beautify-html格式化器、调整模板验证、设置Prettier选项以及开启自动格式化等功能，以实现更高效和规范的Vue代码编辑体验。

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

{
// 工作区颜色主题(Vue Theme)

"workbench.colorTheme": "Vue Theme",

// 工作区图标主题(vscode-icons)

"workbench.iconTheme": "vscode-icons",

// vetur使用格式化插件:js-beautify-html

"vetur.format.defaultFormatter.html": "js-beautify-html",
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// 格式化插件格式配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},

// 模板格式检查

"vetur.validation.template": false,

// 单引号

"prettier.singleQuote": true,

// 去掉结尾分号

"prettier.semi": false,

// Tab宽度

"prettier.tabWidth": 2,
"editor.tabSize": 2,
//让prettier使用eslint的代码格式进行校验
// "prettier.eslintIntegration": true,
// 函数名后面加空格(符合eslint标准)
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

// 根据文件类型设置Tab宽度

"editor.detectIndentation": false,

// tab自动补全

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"plaintext": "jade"
},

// 编辑器字体大小

"editor.fontSize": 16,

// 终端字体大小

"terminal.integrated.fontSize": 16,

"git.autofetch": true,

"explorer.confirmDelete": false,

// 提示支持文件类型

"emmet.syntaxProfiles": {
"vue-html": "html",