如何为Volar VS Code扩展设置模板区域的不同tabSize

核心配置思路 #

Volar依托VS Code的默认格式化器体系实现多区域分工，要达成原Vetur的格式化规则，需明确各语言区域的格式化器关联，并通过配置文件覆盖缩进等细节规则。

具体步骤 #

1. 安装必要插件

   • 直接在VS Code插件市场安装 prettier、stylus-supremacy、prettyhtml 三个插件
   • 注意：volar-prettyhtml 插件当前兼容性存在问题，建议直接使用原生 prettyhtml 插件配合Volar的语言关联配置

2. VS Code用户设置（settings.json）配置
   在设置中添加以下内容，明确各区域的格式化器和缩进规则：

   {
     // 将Vue文件默认格式化器设为Volar
     "[vue]": {
       "editor.defaultFormatter": "Vue.volar"
     },
     // 指定Vue模板区域使用prettyhtml
     "volar.formatters.html": "prettyhtml",
     // JS/TS区域使用prettier
     "volar.formatters.typescript": "prettier",
     // Stylus样式区域使用stylus-supremacy
     "volar.formatters.css": "stylus-supremacy",
     // 设置prettyhtml缩进为2空格
     "prettyhtml.tabWidth": 2,
     // 设置prettier缩进为4空格
     "prettier.tabWidth": 4,
     // 设置stylus-supremacy缩进为4空格
     "stylusSupremacy.indentChar": " ",
     "stylusSupremacy.indentSize": 4,
     // 启用Volar的分区域格式化功能
     "volar.format.enable": true,
     "volar.format.splitEditors": true
   }
   

3. volar.config.js 补充配置（可选）
   若上述设置未生效，可在项目根目录创建 volar.config.js，强制指定模板格式化器：

   module.exports = {
     plugins: [
       require('@volar-plugins/prettyhtml')({
         tabWidth: 2,
         printWidth: 100,
         singleQuote: true // 可根据需求调整其他prettyhtml规则
       })
     ]
   }
   

   执行以下命令安装依赖：

   npm install @volar-plugins/prettyhtml --save-dev
   

常见问题排查 #

• 若prettyhtml仍不生效，可通过VS Code命令面板执行「Format Document With...」，手动选择prettyhtml测试，同时检查是否有其他HTML格式化器（如Beautify）抢占了默认优先级
• 确保Volar插件已更新至最新版本，旧版本可能存在插件兼容性问题
• 修改配置后关闭并重启VS Code，让配置完全生效

内容的提问来源于stack exchange，提问作者fabien-michel