Sublime Text 3 支持 TSX 开发需同时满足三条件:绑定 .tsx 语法为 TypeScriptReact、配置 tsserver_path 指向本地 ./node_modules/typescript/lib/tsserver.js、添加 tsserver_options:["--project","."] 启用完整项目模式;缺一即导致高亮失效、JSX 报错、跳转失败。

Sublime Text 3 能跑 TSX,但默认完全不工作——不是插件没装,而是语法没绑、tsserver 没连、JSX 模式没开,三者缺一不可。
为什么 .tsx 文件打开就是 Plain Text 或标红?
Sublime Text 3 不会自动把 .tsx 当作 TypeScript + JSX 处理。即使装了插件,右下角显示 “Plain Text” 或 “JavaScript”,说明语法层就断了,后续所有语言功能(跳转、补全、类型提示)全失效。
- 先打开任意
.tsx文件,点击右下角当前语法名(比如 “Plain Text”) - 选
TypeScriptReact(注意大小写和空格,不是TypeScript或JavaScript (Babel)) - 如果列表里根本没有
TypeScriptReact,说明插件未加载:检查Package Control → List Packages是否有TypeScript-Sublime-Plugin或LSP-typescript;再确认插件目录下存在typescriptreact.sublime-syntax或Tsx.tmLanguage - ST3 用户必须额外安装
TypeScriptSyntax包,否则source.tsx作用域不存在,JSX 展开时仍输出class而非className
为什么 JSX 属性报错、Promise 找不到、tsconfig.json 像没读?
插件自带的 tsserver 是旧版,不解析你项目的 tsconfig.json,也不识别 "jsx": "react"、"lib": ["ES2020", "DOM"] 等配置。
- 在
Preferences → Package Settings → TypeScript → Settings(或LSP → Settings)中填入:
{
"tsserver_path": "./node_modules/typescript/lib/tsserver.js",
"tsserver_options": ["--project", "."]
}
tsserver_path 必须以 ./ 开头,否则 Sublime 无法定位到项目级 node_modules
--project . 强制启用完整项目模式,否则 paths 别名、types 引入、JSX 编译选项全被忽略TS: Restart Server(Ctrl+Shift+P 输入),不能只重启 Sublime为什么 Ctrl+Click 跳转失败或跳到空白 .d.ts?
跳转依赖 tsserver 的语义索引,而它只处理已保存的物理文件,并且对路径和类型定义敏感。
- 确保光标停在有效标识符上(不能在字符串、注释、空格或 JSX 属性值里)
- 文件必须已保存——未保存的缓冲区内容不会被
tsserver索引 - 跳转到
.d.ts显示空白,大概率是缺少对应类型包,检查node_modules/@types/是否存在,或运行npm install --save-dev @types/react @types/react-dom - 若用
paths别名,仅配baseUrl不够,必须靠"tsserver_options": ["--project", "."]触发完整解析
TSX 配置最容易被忽略的三个点
很多人卡在最后一步:语法高亮有了、tsserver 也连上了,但 JSX 还是标红或属性补全不对。
-
tsconfig.json中必须明确写"jsx": "react"或"jsx": "preserve",插件不会 fallback 推断 - 别混用插件:
TypeScript-Sublime-Plugin(ms-vscode 官方老版)自带过时内嵌tsserver,和 LSP-typecript 冲突,建议卸载 - ST3 用户若用
Package Control安装插件,务必确认插件目录路径正确(如%APPDATA%\Sublime Text 3\Packages\),Git 克隆进错目录会导致插件静默失效


















