VSCode配置Svelte开发：轻量级前端框架的环境搭建与调试-VSCode-PHP中文网

必须安装svelte for vs code官方插件、配置svelte.config.js（哪怕为空）、重启语言服务器，三者缺一不可；否则.svelte文件被识别为html，导致语法标红、跳转失效、响应式声明无提示。

vscode配置svelte开发：轻量级前端框架的环境搭建与调试

装对扩展、配好 svelte.config.js、启用 Chrome 调试器，三步到位就能跑通 Svelte 开发流；手动配 Webpack 或改默认语言模式是常见卡点。

不是安装完就自动工作——它依赖项目根目录存在 svelte.config.js（哪怕空文件）。没有这个文件，VSCode 会把 .svelte 文件当成 HTML 处理，导致语法标红、跳转失效、$: 响应式声明无提示。

新建项目时用 npm create svelte@latest 会自动生成该文件；若手动建项目，需在根目录创建空的 svelte.config.js
打开 .svelte 文件后，右下角状态栏显示 “HTML” 是典型信号；点击它 → 选 “Svelte” → 勾选 “Always use Svelte for .svelte files”
重启 VSCode 窗口（Ctrl+Shift+P → Developer: Reload Window），否则语言服务可能仍缓存旧配置

默认情况下，Prettier 不识别 Svelte 文件结构，直接格式化会破坏 <script></script> 和 <style></style> 区块缩进，甚至删掉 $$props 这类特殊变量。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

项目中安装 prettier-plugin-svelte：npm install --save-dev prettier prettier-plugin-svelte
创建 .prettierrc，内容为：{"plugins": ["prettier-plugin-svelte"]}
在 .vscode/settings.json 中明确指定格式器："editor.defaultFormatter": "esbenp.prettier-vscode"，并开启 "editor.formatOnSave": true
避免全局设置干扰：推荐只在项目级 .vscode/settings.json 中配置，不依赖用户级设置

断点停在空白行、或根本不停在 <script></script> 块里，多数是 source map 路径没对齐。Vite 项目默认用 vitePreprocess，但 VSCode 的调试器仍按旧 Webpack 路径规则找源码。

确保 launch.json 中 sourceMapPathOverrides 指向正确位置；Vite 项目应设为："webpack:///src/*": "${webRoot}/src/*"
开发服务器必须先运行（npm run dev），再按 F5 启动调试；否则 Chrome 无法连接到正在运行的 localhost:5173
检查浏览器地址栏是否显示 http://localhost:5173；如果 URL 是 file:// 协议，断点一定无效
若用 SvelteKit，确认 svelte.config.js 中 preprocess 使用的是 vitePreprocess()，而非旧版 sveltePreprocess()

这不是插件问题，而是 TypeScript 语言服务没把 .svelte 当作合法 TS 上下文。即使写了 lang="ts"，没有显式声明，TS Server 就不加载 Svelte 类型定义。

确认 tsconfig.json 中有："include": ["src/**/*"] 和 "types": ["svelte"]
在 .vscode/settings.json 中启用："svelte.plugin.typescript.enable": true
执行 Ctrl+Shift+P → 输入 Svelte: Restart Language Server，强制刷新类型服务（比重启 VSCode 更快）
避免在 <script></script> 块里写 export let foo: string 后紧接 const bar = foo.toUpperCase() —— 若 foo 未传入，TS 会误判为 undefined，提示错误；实际运行时 Svelte 会处理默认值，但类型检查阶段需要更严谨的可选断言