vscode识别不了.svelte文件的根本原因是未将其正确关联为svelte语言模式，需手动设置语言模式、配置svelte.config.js、卸载冲突插件、重启语言服务器；否则语法高亮、$:提示、跳转及断点均失效。
VSCode 识别不了 .svelte 文件，右下角显示 HTML
这不是插件没装好，而是 VSCode 根本没把 .svelte 当作 Svelte 文件处理。后续所有语法高亮、$: 提示、跳转、断点都会失效。
- 点击右下角语言模式（显示 “HTML” 或 “Plain Text”），选 Svelte
- 再点右侧齿轮图标 → Configure File Association for '.svelte' → 绑定到
svelte - 确认项目根目录存在
svelte.config.js（哪怕只写export const config = {};） - 卸载任何非官方插件：如
Svelte Language Server、Svelte Intellisense——只保留svelte-vscode（发布者必须是sveltejs） - 执行
Cmd+Shift+P→Svelte: Restart Language Server（仅 Reload Window 不够）
launch.json 断点不进 <script></script> 块
不是代码写错了，是 VSCode 调试器找不到源码位置。Vite 编译后 JS 里有 sourcemap，但路径是 webpack:///src/...，而你的真实文件在 src/ 下——映射断了。
- 开发服务器必须先运行：
npm run dev（端口默认http://localhost:5173），再按F5 -
launch.json中必须包含："sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/src/*"} -
"resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"]这行不能漏——Svelte 5+ 环境下缺它，断点必失效 -
"url": "http://localhost:5173"必须显式指定；用file://协议访问，断点一定无效 - 推荐用
type: "node-terminal"启动命令，比pwa-chrome更稳，避免 Chrome 实例干扰
TS 类型提示缺失，$ 报错或 $lib 导入标红
类型服务没加载 Svelte 特有类型，也不是插件问题，是 tsconfig.json 配置不完整。
-
compilerOptions.types必须包含"svelte"，否则$state、$derived全部不可见 - 要支持
import X from '$lib/X.svelte'，需配置："$lib/*": ["src/lib/*"]到compilerOptions.paths，且baseUrl设为"." -
include必须覆盖.svelte文件，例如：["src/**/*"]或明确加"src/**/*.svelte" - 若用 TypeScript，
svelte.config.js中preprocess必须是vitePreprocess()（SvelteKit）或sveltePreprocess({ typescript: true })（纯 Svelte），并确保已安装对应依赖
Prettier 格式化破坏 <script></script> 缩进或删掉 $$props
默认 Prettier 不认识 Svelte 文件结构，直接格式化会把组件当 HTML 处理。
- 安装插件：
npm install --save-dev prettier prettier-plugin-svelte - 项目根目录建
.prettierrc，内容为：{"plugins": ["prettier-plugin-svelte"]} -
.vscode/settings.json中指定："editor.defaultFormatter": "esbenp.prettier-vscode"，并开启"editor.formatOnSave": true - 不要依赖全局 Prettier 设置——项目级配置才可靠
Svelte 5+ 的调试链路里，resolveSourceMapLocations 是最易被忽略的开关；它不像 sourceMapPathOverrides 那样常被复制粘贴，但少了它，VSCode 就“看不见”你写的那行 $: doubled = count * 2。
