Svelte+Storybook开发时Meta组件VSCode语法高亮异常如何解决

解决方法 #

1. 安装必备VSCode插件

首先确保你已经安装了以下两个官方插件：

• Svelte for VS Code：负责Svelte语法的基础高亮、校验和语言服务支持
• Storybook Syntax Highlighter：负责识别Storybook专属的组件与语法规则

2. 配置Svelte识别Storybook全局组件

Storybook运行时会自动注入Meta、Story等专属组件，所以运行正常，但IDE的静态检查默认不知道这些组件的存在，需要在项目根目录的svelte.config.js中添加配置声明：

const config = {
  // 保留你原有配置的其他内容，仅在compilerOptions中新增globalComponents字段
  compilerOptions: {
    globalComponents: ['Meta', 'Story', 'Template', 'ArgsTable', 'Canvas']
  }
}

export default config

如果是SvelteKit项目，配置规则完全一致，直接在原有svelte.config.js的compilerOptions中添加上述字段即可。

3. 重启Svelte语言服务

配置保存后，按Ctrl+Shift+P（Mac系统按Cmd+Shift+P）调出VSCode命令面板，搜索并执行Svelte: Restart Language Server，等待语言服务重启完成后，语法高亮就会恢复正常。

可选：配置文件关联

如果你使用.stories.mdx格式编写Storybook文件，需要在VSCode设置中添加文件关联：
打开设置面板（Ctrl+,/Cmd+,），搜索files.associations，新增关联规则：

• 键：*.stories.mdx，值：mdx
  同时安装VSCode MDX插件保证MDX格式下的Svelte语法高亮正常。

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