Sublime默认不识别JSX,需装Babel插件并设语法为JavaScript (Babel),否则useState不提示、className不高亮、Emmet不触发;补全依赖SublimeCodeIntel扫描路径或LSP服务。

Sublime 默认不提供 React JSX 的语法提示,装完插件不等于自动生效——关键在语法识别、路径扫描和补全引擎三者对齐。
为什么 useState 不提示参数、React. 点不出 createElement
这不是 Sublime 坏了,是它根本没把当前文件当 JSX 解析,或者补全工具压根没找到 react 源码。常见原因有三个:
- 右下角显示的是
JavaScript或HTML,不是Babel → JavaScript (Babel)(.jsx 文件必须手动切) -
SublimeCodeIntel没扫到node_modules/react,默认只查根目录,而现代项目中react在node_modules/react/index.js这类深层路径 - 你用的是压缩版
react/cjs/react.development.js,类型定义被抹掉,换成未压缩的react/umd/react.development.js更准(可通过软链或改codeintel_scan_extra_dirs指向该路径)
.js 文件里写 JSX 为什么高亮失效
create-react-app 项目大量用 .js 后缀写函数组件,但 Babel 插件默认只绑定 .jsx。不配就只能手动切语法,每次打开都得点右下角。
- 打开一个
.js文件 → 右下角点语法名 →Open all with current extension as…→Babel → JavaScript (Babel) - 或进
Preferences → Settings – Syntax Specific,右侧加:{"extensions": ["js", "jsx", "mjs"]} - 别全局改默认语法——如果项目混用纯 JS 工具脚本,它们会因 JSX 语法报错
className 和 onClick 不提示、Emmet 缩写不触发
Emmet 默认作用域是 text.html.basic,JSX 标签不在其范围内。不配就只能手敲 div className="",没法 div.my-btn + Tab。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记(深入)”;
- 进
Preferences → Package Settings → Emmet → Settings - 在右侧加:
{"syntax_scopes": {"javascript": ["source.js", "source.js.jsx", "source.tsx"]}} - 确保当前文件语法已是
JavaScript (Babel),否则 Emmet 根本不加载 -
className提示依赖语法识别,不是插件功能——Babel 插件支持它,旧版 React Syntax Highlighting 不支持
import React from 'react' 写了但没跳转、无类型提示
Sublime 没内置语言服务器(LSP),SublimeCodeIntel 是基于文件路径的符号索引,不是类型系统。它能跳转到 node_modules/react/index.js,但看不懂 useState<string>()</string> 的泛型。
- 要真跳转定义、看 props 类型、标出 missing key,必须上
SublimeLSP+typescript-language-server(即使写 JS,TS Server 对 React 支持最稳) -
SublimeCodeIntel的"codeintel_scan_extra_dirs"别写成"/path/to/node_modules/react"——只写到node_modules根目录,它自己递归扫;写太深会卡住索引 - 改完配置后,务必按
Ctrl+Shift+P输入CodeIntel: Rebuild Index,否则缓存还是旧的
最容易被忽略的是:JSX 高亮 ≠ 语义理解。Sublime 能让 <div> 变蓝、<code>className 变绿,但它不会提醒你 map 里漏了 key,也不会检查 useEffect 依赖数组是否遗漏变量——这些得靠 ESLint + SublimeLinter-eslint 配合项目里的 .eslintrc.js 才行。

















