Sublime Text配置TypeScript语法高亮与语法检查

Sublime Text配置TypeScript语法高亮与语法检查

为什么.ts文件打开还是纯文本？

问题可能比你想象的更基础：这通常不是因为插件失效，而是Sublime Text压根就没把.ts文件识别为TypeScript代码。默认情况下，编辑器对这个后缀“一脸茫然”，只能将其回退到Plain Text模式，结果就是语法高亮完全消失。

解决起来其实很简单，分两步走：

• 临时切换：打开任意.ts文件，留意编辑器右下角显示的语法名称（比如“Plain Text”），点击它，然后从弹出的菜单里选择TypeScript（注意，要选TypeScript，而不是Ja vaScript或Babel）。
• 永久关联：完成上一步后，点击菜单栏的View → Syntax → Open all with current extension as… → TypeScript。这么一来，以后所有.ts文件都会自动使用正确的语法解析了。

如果菜单里根本找不到TypeScript这个选项，那说明语法包还没安装。别急，调出命令面板（Ctrl+Shift+P或Cmd+Shift+P），输入Package Control: Install Package，搜索TypeScriptSyntax并安装即可。这里有个小提醒：像TSFormatter或SublimeLinter-tslint这类已废弃的插件就别装了，它们很可能不兼容新版的TypeScript（4.0+）和Sublime Text 4。

装了插件却没错误提示、不能跳转？

语法高亮只是“面子工程”，真正的“里子”——比如类型检查、定义跳转、代码补全这些高级功能——全靠后台的tsserver服务在支撑。而Sublime Text的TypeScript插件（例如SublimeText-Typescript）通常不会自动定位tsserver，一旦服务没启动，插件就会静默失败，给你的感觉就是“好像装了，但又好像什么都没发生”。

关键在于手动配置路径：

• tsserver_node_path：这个必须指向一个真实可用的node可执行文件。可以在终端里运行which node来查找路径。如果这里填错或者留空，整个服务都无法启动。
• tsserver_path：推荐使用项目级的相对路径，比如"./node_modules/typescript/lib/tsserver.js"。如果使用全局路径（如/usr/lib/node_modules/typescript/lib/tsserver.js），很容易因为版本不匹配而出问题。
• 配置入口：打开Preferences → Package Settings → TypeScript → Settings，将上述路径信息以JSON对象的格式填入即可。

另外，tsconfig.json这个文件必须放在项目的根目录下。没有它，tsserver就会进入一种“无配置”的降级模式，导致strict、paths、jsx等一系列重要配置全部失效。

.tsx 文件不识别 JSX 语法？

.tsx文件并不仅仅是.ts的简单扩展，它需要编辑器额外启用JSX语法支持，否则要么会报错，要么就被当成普通的TypeScript来解析。

核心操作有两处：

• 首先，确保已经安装了支持JSX的语法包（比如前面提到的TypeScriptSyntax）。然后，在Preferences → Settings – Syntax Specific中，添加一行配置："extensions": ["ts", "tsx"]。
• 如果使用的是SublimeText-Typescript这类插件，通常需要在它的专属设置里，明确添加一项："enable_tsx": true。
• 倘若你用的是LSP-typescript，则一般不需要手动开启enable_tsx，但要仔细检查tsconfig.json文件，确保其中的"jsx"字段设置正确（例如"preserve"或"react"）。

一个常见的现象是：在.tsx文件里写