Svelte中组件使用自闭合标签触发Prettier报错问题咨询

报错本质 #

这个是Svelte默认语法校验规则触发的编译/格式化错误，不是代码逻辑问题。
Svelte默认规则下，只有两类标签可以写自闭合形式：

• 原生HTML void元素：即本身不需要承载子内容的原生标签，比如<img />、<input />、<br />
• 外来命名空间元素：比如SVG、MathML下的标签
  你导入的自定义组件TopHeadingSection不属于上面两类，所以默认写<TopHeadingSection />会直接抛错。

能不能忽略这个报错？ #

不能。这个是语法级别的错误，不是普通警告：

• 忽略的话首先Svelte的格式化工具完全无法正常处理当前文件
• 未做配置的前提下，Svelte编译流程会直接阻断，项目根本无法正常构建运行，不存在“忽略了也能跑”的情况。
  你之前写MERN栈前端（React部分）习惯的组件自闭合写法，在Svelte默认规则里不被支持，所以才会出现必须写完整开标签+闭标签才能正常运行的情况。

配置支持组件自闭合的方法 #

根据你用的Svelte版本选对应方案即可：

Svelte 3/4 旧版本 #

1. 先把项目依赖的svelte版本、编辑器里的Svelte语法支持插件升级到对应大版本的最新补丁版
2. 修改项目根目录的svelte.config.js配置文件，添加如下配置项：

export default {
  compilerOptions: {
    customElement: true
  },
  // 关闭格式化的严格模式校验
  format: {
    svelteStrictMode: false
  }
}

3. 如果你项目用了Prettier做代码格式化，还要在.prettierrc里把svelteStrictMode设为false，避免格式化规则和编译规则冲突
4. 重启开发服务、重启编辑器，之后就可以正常使用<TopHeadingSection />这类自闭合组件写法了。

Svelte 5 新版本 #

Svelte 5已经原生正式支持自定义组件自闭合语法，只要把项目的Svelte依赖升级到5.x及以上稳定版，不需要额外修改任何配置，直接写自闭合组件标签就不会触发报错。

小提示：如果是团队协作项目，改这个配置前最好和其他成员同步，保持全团队代码风格统一，避免出现有人写自闭合、有人写完整标签的混乱情况。

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