PhpStorm 本身不原生支持 Svelte，必须依赖 WebStorm 官方 Svelte 插件（2022.3+ 版本），否则 .svelte 文件被当作文本或 HTML 处理，$:、{#if} 等语法标红，语言服务器不加载，类型推导和路径别名跳转失效；需启用插件、正确关联文件类型、安装 @sveltejs/language-server、勾选 TypeScript 设置中的 Svelte 开关、配置 $lib 映射并强制清除缓存重启。
PhpStorm 本身不原生支持 Svelte，必须靠 WebStorm 的 Svelte 插件“借壳”启用，且仅限 2022.3+ 版本；低于此版本或未正确配置，$:、{#if}、bind: 全部标红，补全失效——这不是你代码写错了，是 IDE 根本没加载 Svelte 上下文。
为什么 PhpStorm 打开 .svelte 文件全是红色报错
PhpStorm 默认把 .svelte 当作纯文本或 HTML 处理，不识别 Svelte 特有语法块（比如 <script context="module"> 或 <style lang="scss">）。它也不加载 Svelte 语言服务，所以类型推导、$$Props、export let name: string 全部失能。
- 检查
Settings > Editor > File Types：确认Recognized File Types列表里有Svelte Component，Pattern 填*.svelte - 删掉
Text files类型里误配的*.svelte（老版本残留） - 确保
HTML Files的Registered Patterns里没有*.svelte——否则它只走 HTML 解析器，Svelte 语法直接被忽略
怎么让 PhpStorm 加载 Svelte 插件和语言服务器
PhpStorm 没有独立的 Svelte 插件市场入口，但可以复用 WebStorm 官方插件。前提是版本 ≥2022.3（2026 年当前最新稳定版是 2024.3，完全兼容）。
- 进
Settings > Plugins，切换到Marketplace标签页，搜Svelte，安装并启用作者为JetBrains的那个（不是已废弃的svelte-intellij） - 重启 PhpStorm —— 不重启，插件加载器不会初始化，
$: count = a + b还是报Unexpected token - 项目根目录执行：
npm install --save-dev @sveltejs/language-server - 进
Settings > Languages & Frameworks > TypeScript > Svelte，勾选Enabled（别被路径名骗，这个开关就是控制 Svelte LS 的） - 确保项目存在
svelte.config.js或至少jsconfig.json，否则语言服务器无法读取compilerOptions和路径别名
如何让 $lib 路径别名在 PhpStorm 里可跳转
PhpStorm 不读 tsconfig.json 的 paths 映射来解析 SvelteKit 的 $lib，得手动喂给它一个配置文件。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“PHP免费学习笔记（深入）”；
- 在项目根目录新建任意名字的 JS 文件，例如
.webstorm.js - 写入以下内容（注意是
System.config，不是export default）：System.config({ "paths": { "$lib/*": "./src/lib/*" } }); - 保存后，右键项目根目录 →
Reload project，或执行File > Invalidate Caches and Restart > Invalidate and Restart - 之后
import { foo } from '$lib/utils';就能 Ctrl+Click 跳转，且不报红
终端运行 svelte-check 总是 command not found
PhpStorm 内置终端默认用系统 shell 启动，但本地安装的 svelte-check 在 node_modules/.bin/ 下，PATH 里没有它。
- 别直接敲
svelte-check，改用：npx svelte-check（npx自动定位本地 bin） - 如果想在 PhpStorm 的
Run Configuration里加检查任务，Command line 填：npx svelte-check --fail-on-warnings - 注意：不要全局安装
svelte-check，不同项目可能依赖不同版本，本地调用才准确
最易被忽略的一点：Svelte 支持高度依赖缓存状态。只要改过插件、svelte.config.js 或新增了 .webstorm.js，就必须 Invalidate Caches and Restart，否则所有配置看似生效，实则语言服务压根没重连。
