首先安装Babel插件支持JSX,再安装TypeScript插件处理TSX;然后将.jsx文件关联到JavaScript (Babel)语法,.tsx文件设置为TypeScript或TypeScriptReact模式,即可实现正确语法高亮。

Sublime Text 要实现 JSX 和 TSX 文件的语法高亮,关键在于正确安装插件并为不同后缀文件设置对应的语法解析规则。JSX 是 React 中使用的 JavaScript 扩展语法,而 TSX 是 TypeScript 版本的 JSX,支持类型检查。两者语法相似,但文件扩展名和底层语言不同,因此需要分别配置高亮。
安装支持 JSX 和 TSX 的插件
要让 Sublime 正确识别 JSX 和 TSX,推荐安装功能完善的插件:
- 使用 Package Control 安装 Babel 插件(如 Babel 或 Babel Syntax Highlighting),它对 JSX 支持良好。
- 对于 TSX,可安装专门的 TypeScript 插件(如 TypeScript for Sublime Text),它能提供完整的 TSX 语法高亮和类型提示。
- 打开命令面板(Ctrl+Shift+P),输入 “Install Package”,然后搜索并安装上述插件。
为 .jsx 和 .tsx 文件设置对应语法
插件安装完成后,需手动或默认设置文件的语法模式:
- 打开一个 .jsx 文件,点击菜单栏 View → Syntax → Open all with current extension as → Babel → JavaScript (Babel),此后所有 .jsx 文件会自动用 Babel 规则高亮。
- 打开一个 .tsx 文件,同样进入 Syntax 菜单,选择 TypeScript 或 TypeScriptReact 模式,确保 TSX 语法被正确解析。
- 这样,JSX 和 TSX 文件就能根据语言特性显示不同的高亮效果,提升代码可读性。










