必须安装Svelte for VS Code官方插件、配置svelte.config.js（哪怕为空）、重启语言服务器，三者缺一不可；否则.svelte文件被识别为HTML，导致语法标红、跳转失效、响应式声明无提示。
装对扩展、配好 svelte.config.js、启用 Chrome 调试器，三步到位就能跑通 Svelte 开发流；手动配 Webpack 或改默认语言模式是常见卡点。
为什么 Svelte for VS Code 扩展不生效？
不是安装完就自动工作——它依赖项目根目录存在 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），否则语言服务可能仍缓存旧配置
如何让 .svelte 文件支持 Prettier 格式化？
默认情况下，Prettier 不识别 Svelte 文件结构，直接格式化会破坏 <script> 和 <style> 区块缩进，甚至删掉 $$props 这类特殊变量。
- 项目中安装
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中配置，不依赖用户级设置
launch.json 调试配置为何断点不命中？
断点停在空白行、或根本不停在 <script> 块里，多数是 source map 路径没对齐。Vite 项目默认用 vitePreprocess，但 VSCode 的调试器仍按旧 Webpack 路径规则找源码。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 确保
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()
TS 类型提示缺失或报错 Cannot find name '$' 怎么办？
这不是插件问题，而是 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>块里写export let foo: string后紧接const bar = foo.toUpperCase()—— 若foo未传入，TS 会误判为 undefined，提示错误；实际运行时 Svelte 会处理默认值，但类型检查阶段需要更严谨的可选断言
真正卡住人的往往不是某一步不会做，而是多个配置项之间存在隐式依赖：比如 svelte.config.js 缺失会导致 TS 插件不加载，TS 插件不加载又会让 ESLint 报一堆假错误。配环境不是填表，是验证链路是否闭环。
