需安装 solidjs-community.solid-js-vscode 插件并配置 tsconfig.json 的 "jsx": "preserve" 和 "jsximportsource": "solid-js",再重启 ts server。

SolidJS 项目在 VSCode 里 JSX 不高亮、createSignal 没提示?先装对插件
VSCode 默认不识别 SolidJS 的 JSX 和响应式函数,必须手动补全语言支持。核心是两个插件:一个是 esbenp.prettier-vscode(格式化用),另一个是 solidjs-community.solid-js-vscode(官方维护的语法+智能提示插件)。别装错成 solidjs.solidjs——那个已废弃,不支持 TSX 和新版本 Solid(v2.0+)。
常见错误现象:createMemo、createStore 灰色无高亮;JSX 标签没颜色;鼠标悬停无类型提示;onMount 被标红说“未定义”。
- 卸载所有非官方 Solid 插件,只留
solidjs-community.solid-js-vscode - 确保项目根目录有
tsconfig.json或jsconfig.json,否则插件无法推导类型 - 如果用了
vite,确认vite.config.ts中已启用solidPlugin()(否则 TS Server 不加载 Solid 类型)
JSX 语法报错 “React is not defined”?不是 React 问题,是 JSX 运行时配置错了
Solid 的 JSX 不依赖 React.createElement,而是编译成 createVNode 等调用。VSCode 报这个错,本质是 TypeScript 语言服务误判了 JSX 工厂函数,根源在 tsconfig.json 配置。
关键参数只有两个:"jsx": "preserve"(必须) + "jsxImportSource": "solid-js"(必须)。缺一不可,顺序无关。
-
"jsx": "react"或"jsx": "react-jsx"会强制走 React 流程,直接导致类型错误和提示失效 -
"jsxImportSource"值必须严格为"solid-js"(不能是"solid-js/web"或带路径) - 改完配置后,必须重启 TS Server:快捷键
Ctrl+Shift+P→ 输入Restart TS server执行
为什么 Index.svelte 也能高亮 Solid 代码?别被文件名骗了
VSCode 是按文件内容 + 配置推断语言模式,不是看后缀。Solid 社区插件默认把 .tsx、.jsx、.ts、.js 都纳入 Solid 支持范围,只要文件里出现 createSignal 或 <show></show> 这类标识,就会激活 Solid 语言功能。
但副作用也很明显:如果你在纯 React 项目里混写了一个 .tsx 文件,里面恰好用了 createMemo(比如复制粘贴错了),VSCode 可能强行切换成 Solid 模式,导致 React 提示消失。
- 手动锁定语言模式:右下角点击当前语言标签(如 “TypeScript React”),选 “Configure File Association for ‘*.tsx’” → 设为
typescriptreact - 想全局禁用 Solid 对某类文件的介入,可在
settings.json加:"solidjs.autoDetect": false - 插件不会修改你的构建流程,只是影响编辑器体验;打包仍由 Vite/ESBuild 决定
热重载正常,但 VSCode 里组件跳转失效?检查 node_modules/.pnpm 路径
使用 pnpm 的项目常遇到:点击 Show 组件进不去定义,或 import { createEffect } from 'solid-js' 按 Ctrl+Click 无响应。根本原因是 pnpm 的硬链接结构让 TS Server 找不到类型声明文件路径。
这不是 Solid 插件的问题,而是 TypeScript 语言服务在 pnpm 下解析 node_modules 的固有限制。
- 临时解法:在项目根目录加
jsconfig.json,写入"typeAcquisition": { "enable": true } - 更稳方案:升级到 pnpm v8.15+,并确保
pnpm store path不含空格或中文路径 - 验证是否生效:打开一个
.tsx文件,输入create,看自动补全里是否有createSignal—— 有则类型服务已就位
最麻烦的地方往往不在插件本身,而在你本地 node_modules 的实际结构和 TypeScript Server 的缓存状态。改完任何配置,记得先重启 TS Server,再开新文件测试,别凭印象判断。











