VSCode编辑Svelte时标签异常自动格式化问题如何修复

该异常是Svelte开发环境下的高频配置问题，核心触发原因有两类：

• 多格式化器冲突：通用HTML/Prettier格式化器越权接管了.svelte文件的格式化逻辑，这类工具不识别Svelte专属语法规则，会按通用XML/HTML规则强制转换空标签结构，也无法正确解析<slot>这类Svelte内置标签
• Svelte官方插件默认配置问题：svelteStrictMode配置在部分版本的扩展中默认开启，会强制所有无子节点的非void元素转换为自闭合格式，和常规HTML编码习惯冲突

按顺序操作即可同时解决空标签强制自闭合、Svelte专属标签格式化适配异常两类问题：

1. 指定Svelte专属默认格式化器
   打开任意.svelte文件，在编辑区右键选择「使用...格式化文档」，选中Svelte for VS Code作为该类型文件的默认格式化器，不要选择默认Prettier、内置HTML Language Features、第三方通用格式化工具作为默认选项。
2. 修正Prettier Svelte插件配置
   在项目根目录的.prettierrc配置文件（或package.json的prettier字段）中添加如下配置，关闭强制自闭合规则，明确指定合法的HTML自闭合元素列表：

   {
     "svelteStrictMode": false,
     "htmlVoidElements": ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]
   }
   

   配置说明：
   • svelteStrictMode: false会关闭严格模式下空标签强制转自闭合的逻辑
   • htmlVoidElements列表明确告知格式化插件仅列表内的原生HTML空元素允许使用自闭合格式，<p>、<div>、<slot>这类不在列表内的标签，即使内部无内容也会保留完整开闭标签结构
3. 排除通用格式化器的干扰
   打开VSCode的settings.json配置文件，添加如下规则，让独立Prettier扩展不要接管Svelte文件的格式化：

   "prettier.disableLanguages": ["svelte"]
   

   如果安装了Beautify、JS-CSS-HTML Formatter等老旧格式化插件，直接在扩展管理面板将这类插件设置为「在Svelte文件中禁用」，避免多插件同时触发格式化逻辑导致规则冲突。
4. 版本兼容修复
   将本地安装的Svelte for VS Code扩展升级到最新版本，旧版本扩展存在语法解析bug，会错误识别<slot>、<svelte:fragment>等Svelte专属标签的语法结构，导致格式化错位。

配置修改完成后重启VSCode窗口，新建测试.svelte文件写入<p></p>、<slot></slot>标签，执行保存操作，标签结构未被篡改即说明修复生效。

内容的提问来源于stack exchange，提问作者Raskolnikov99