必须安装官方 svelte.svelte-vscode 插件，否则 VSCode 默认将 .svelte 文件识别为纯文本，导致语法高亮失效；装错、多装插件，或未手动设置语言模式为 Svelte，均会造成白底黑字现象。
缺官方 svelte.svelte-vscode 插件，其他任何组合都撑不起基础高亮——装错插件、多装插件、不重启、语言模式没绑定，这四类问题覆盖了 90% 的“Svelte 文件白底黑字”现象。
为什么装了 Vue/HTML 插件还是没高亮
VSCode 默认把 .svelte 当作纯文本，不识别 <script context="module">、<style lang="scss"> 这类结构。Vue 或通用 HTML 插件压根没注册 Svelte 的语法树解析器，连 {#if} 块都会被当作文本渲染，更别说 bind:this 或 on:click 指令的语义着色。
- 搜索扩展时必须输入
Svelte for VS Code，认准发布者是sveltejs（不是 James Birtles 等旧版） - 装完后打开任意
.svelte文件，右下角状态栏必须显示Svelte—— 如果显示Plain Text或HTML，右键文件 →Change Language Mode→ 手动选Svelte - 禁用所有带
IntelliSense、Language Server、SvelteKit字样的第三方 Svelte 插件，它们会和官方插件抢语言服务器端口，导致高亮断续或指令补全失效
高亮有但颜色怪、指令不识别、$state 灰色
这是 TypeScript 类型服务没接入 Svelte 语言服务器的表现，不是高亮本身的问题。官方插件虽带语法校验，但 $state、$$Props、export let 的类型推导必须依赖项目级配置和本地 svelte-check 启动。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 项目根目录必须存在
tsconfig.json（哪怕内容只是{}），且含"types": ["svelte"] - 必须有
svelte.config.js，最小可用配置为：/** @type {import('@sveltejs/kit').Config} */<br>const config = { kit: { adapter: null } };<br>export default config; - 改完配置后，按
Ctrl+Shift+P→ 输入Restart TS Server强制重载，否则 VSCode 仍用缓存的旧类型上下文
There is no formatter for 'svelte' files installed
官方插件不提供格式化能力，只负责解析和诊断。报这个错说明你试图用 Shift+Alt+F 格式化，但没配 Prettier 桥接。
立即学习“前端免费学习笔记（深入）”；
- 项目中运行：
npm install --save-dev prettier prettier-plugin-svelte - 根目录加
.prettierrc，内容至少包含：{"plugins": ["prettier-plugin-svelte"]} - VSCode 设置里关掉全局
editor.formatOnSave，改用语言专属配置："[svelte]": {"editor.formatOnSave": true} - 如果用了 Svelte 5 beta，确保
prettier-plugin-svelte版本 ≥ 3.1.0，否则<:component>会被误判为非法标签
最容易被忽略的是 svelte.config.js 中的 kit.adapter 占位——哪怕不用适配器，也得写 kit: { adapter: null }，否则插件在启动语言服务器时可能跳过整个配置加载流程，导致路径别名（如 $lib）补全失败、import 跳转指向 node_modules 而非源码。
