VSCode配置Svelte环境轻量前端VSCode开发高亮插件-VSCode-PHP中文网

只装svelte.svelte-vscode插件即可实现.svelte文件基础高亮、语法校验和标签补全；若出现双色高亮、$state不可推导或格式化报错，需禁用其他svelte插件、配置tsconfig.json含"types": ["svelte"]、添加svelte.config.js最小配置并重启ts server。

vscode配置svelte环境轻量前端vscode开发高亮插件

只装一个插件就能让 .svelte 文件有基础高亮、语法校验和标签补全——但如果你看到 button 元素被奇怪地双色高亮、$state 灰色不可推导、或者格式化直接报 There is no formatter for 'svelte' files installed，说明你装多了、配少了，或者没重启 TypeScript 服务。

只装 svelte.svelte-vscode，禁用所有其他 Svelte 插件

VSCode 默认完全不认识 .svelte 文件，连 <script context="module"></script> 都当普通 HTML 处理。唯一被官方维护、持续适配 Svelte@5 beta 的插件是 svelte.svelte-vscode（发布者 sveltejs）。其他名字带 “IntelliSense”“LS”“Snippets”的扩展，比如 ardenivanov.svelte-intellisense，会和官方插件冲突，导致：

button、div 等原生标签被错误地双重着色（常见于 One Dark Pro 主题下）
组件属性补全失效，on:click 不提示，bind:value 不识别
TS 类型服务卡死，$$Props 显示为 any

装完后必须重启 VSCode，不能只重载窗口。

不配 `tsconfig.json`，`$state` 和 `$props` 就是摆设

官方插件只提供语言服务框架，真正做类型推导的是你项目里的 TypeScript。如果 .svelte 文件里写了 <script lang="ts"></script>，但变量始终灰色、$state 没提示、解构赋值报错，大概率是 tsconfig.json 没告诉 TS 服务器怎么处理 Svelte 文件。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

在 compilerOptions 中加 "baseUrl": "." 和 "paths": { "$lib/*": ["src/lib/*"] }（哪怕不用别名，也得有）
确保 "types" 包含 "svelte"："types": ["svelte", "vite/client"]
如果是 JS 项目，必须启用 "checkJs": true，否则 jsdoc @type 和 $state 推导全失效

改完配置后，务必按 Ctrl+Shift+P → 输入 Restart TS Server 执行，否则编辑器缓存不会刷新。

格式化必须靠 `prettier` + `prettier-plugin-svelte`

svelte.svelte-vscode 自身不带格式化能力。你按 Shift+Alt+F 报错，或 <div class:list="{active ? 'on' : 'off'}"> 被拆成三行，都是因为没接上 Prettier 链路。 <ul> <li>项目级安装：<code>npm install --save-dev prettier prettier-plugin-svelte

根目录加 .prettierrc，内容至少含：{"plugins": ["prettier-plugin-svelte"]}

VSCode 设置中关闭全局格式器绑定，改用语言专属配置："[svelte]": {"editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"}

如果用了 svelte-preprocess（如 lang="scss"），确保 prettier-plugin-svelte 版本 ≥ 3.0.0，否则 <style lang="scss"></style> 内容会被清空

`svelte.config.js` 不只是给构建工具看的

很多人以为这个文件只给 vite 或 svelte-kit 读，其实 svelte.svelte-vscode 和 TS 语言服务都依赖它来加载预处理器配置、识别 $lib 别名、甚至判断是否启用 runes（$state）。

最小可用配置必须导出默认对象：export default { kit: { adapter: null } };
如果用了 alias（如 vite.config.ts 里的 resolve.alias），必须也在 svelte.config.js 里重复声明，否则插件无法解析 import Comp from '$lib/Comp.svelte'
不写这个文件，svelte-check 会跳过类型检查，VSCode 里写的 {#if user.name} 即使 user 是 undefined 也不报错