必须配置 "jsx": "preserve" 和 "jsxImportSource": "solid-js" 并重启 TS Server,仅安装 solidjs-community.solid-js-vscode 插件;装错插件或未重启会导致无提示、JSX 不高亮、createSignal 灰色。

SolidJS 在 VSCode 里没提示、JSX 不高亮、createSignal 灰色 —— 90% 是 tsconfig.json 配置错或 TS Server 没重启,不是插件装少了。
必须配的两个 tsconfig.json 字段
VSCode 默认把 .tsx 当 React 处理,SolidJS 的 JSX 工厂和类型导入必须显式声明,否则语言服务直接“失明”。
-
"jsx": "preserve":强制 TypeScript 不处理 JSX,交给 Solid 编译器(如@solidjs/vite-plugin-solid)转译;设成"react"或"react-jsx"会触发 React 类型检查,导致onMount报红、“React is not defined” 等错误 -
"jsxImportSource": "solid-js":值必须严格是字符串"solid-js",不能是"solid-js/web"或带路径写法,否则createMemo、createStore等函数无法关联类型定义 - 这两个字段缺一不可,顺序无关,但必须同时存在;若项目用
jsconfig.json,同样要加(注意 JS 项目不支持types字段,但这两项仍生效)
只认这一个插件:solidjs-community.solid-js-vscode
别搜“SolidJS”就随便点安装 —— solidjs.solidjs 插件已废弃,不支持 TSX 和 Solid v2+,装了反而干扰类型推导。
- 正确插件 ID:
solidjs-community.solid-js-vscode(作者是 solidjs-community) - 配套建议装:
esbenp.prettier-vscode(格式化),但不要装prettier-plugin-solid—— 它已合并进主插件,重复装可能冲突 - 卸载所有其他 Solid 相关插件,包括 Volar 的 Solid 分支(Volar 是 Vue 专用 LSP,强行启用会导致 JSX 解析错乱)
- 插件启用后,VSCode 会基于文件内容(比如检测到
createSignal()调用或<Show></Show>标签)自动激活 Solid 语言功能,不依赖文件后缀
改完配置必须重启 TS Server
改完 tsconfig.json 或装完插件后,VSCode 不会自动重载 TypeScript 语言服务。悬停没提示、灰色函数、类型报错持续存在,90% 是因为这一步漏了。
- 快捷键:
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)→ 输入Restart TS server→ 回车 - 验证是否生效:打开任意
.tsx文件,把光标停在createEffect上,看是否有完整签名提示;再输入<div>,确认标签有颜色而非纯白 - 如果仍无效,检查项目根目录是否存在
tsconfig.json或jsconfig.json—— 没这个文件,插件无法推导类型
文件语言模式可能被自动切换,需手动锁定
VSCode 是按内容识别语言模式,不是看后缀。只要文件里出现 createSignal 或 <For> 这类 Solid 特征,插件就会激活 Solid 模式 —— 哪怕你打开的是 index.tsx,而项目其实是 React。
- 后果就是:React 提示突然消失,
useState不提示,useEffect被标黄 - 右下角点击当前语言标签(如“TypeScript React”)→ 选
Configure File Association for '*.tsx'→ 设为typescriptreact(纯 React 项目)或typescript(无 JSX 框架项目) - 这个动作会写入
.vscode/settings.json,对当前项目生效,不影响其他项目
最常被忽略的其实是“重启 TS Server”这一步 —— 很多人改完配置就以为完了,结果等半天还是灰色函数、JSX 白板,其实就差一次手动重启。


















