讲师中心 微信公众号
AI工具推荐 视频效率加速

Atom编辑器中emmet-jsx插件在React开发中的配置

胖辰大大_8997

胖辰大大_8997

发布时间:2026-07-10 06:20:42

|

892人浏览过

|

来源于php中文网

原创

Atom中不存在emmet-jsx插件,应安装官方emmet插件(2.4.x),并配置jsx扩展及.keymap.cson语法域绑定;class不自动转className,需额外安装emmet-jsx-css-modules;Tab失效多因autocomplete-plus劫持,可关闭其Tab确认或改用Ctrl+Enter;嵌套缩写在JSX模式下受限,建议切HTML模式展开或分步操作。

atom编辑器中emmet-jsx插件在react开发中的配置

emmet-jsx 插件根本不存在,别装错包

Atom 里没有叫 emmet-jsx 的独立插件——这是个常见误解。你搜到的所谓“emmet-jsx”基本是过时的废弃包(比如旧版 emmet-atom 或 emmet-snippets-compatibility),它们不兼容当前 Atom 版本,装了反而导致 emmet:expand-abbreviation 命令报 Cannot read property 'expand' of undefined。

正确做法只有一条:安装官方维护的 emmet 插件(作者 emmetio,包名就是 emmet,当前稳定版为 2.4.x)。它原生支持 JSX,但需要手动配两处才能生效:

  • 在 Packages → emmet → Settings 的 Extensions 输入框填:jsx: jsx
  • 在 Keymap… 打开 keymap.cson,追加语法域绑定:
'.source.js, .source.jsx':
  'tab': 'emmet:expand-abbreviation'

注意:不要删掉原有内容,只追加;.source.jsx 是 Atom 对 React 文件的语法标识,不是文件后缀名。

class 属性自动转成 className 吗?不,默认不转

纯 emmet 插件本身不做属性映射。输入 div.container 按 Tab,出来的是 <div class="container"></div>,不是 className。React 场景下要自动转换,必须额外装 emmet-jsx-css-modules 插件(注意名字带 -jsx-)。

这个插件的作用很具体:

  • 把缩写中的 class 替换为 className
  • 把 for 替换为 htmlFor
  • 对 style 属性做对象化处理(如 div[style=margin:10px] → style={{ margin: '10px' }})

但它依赖 emmet 插件先工作——没装 emmet,它连缩写都收不到。所以顺序不能错:先装并配置好 emmet,再装 emmet-jsx-css-modules,不用重启,但需重新打开 .jsx 文件。

Tab 键被 autocomplete-plus 劫持怎么办

在 JSX 文件里输完 div.app 按 Tab 没反应,大概率不是 Emmet 失效,而是 autocomplete-plus 弹出了补全菜单,把 Tab 当作“选中第一项”用了。此时光标卡在菜单里,Emmet 根本没收到事件。

Aria2 Json Rpc
Aria2 Json Rpc

通过 JSON‑RPC 2.0 与 aria2 下载管理器交互,使用自然语言命令管理下载、查询状态并控制任务。适用于 aria2、下载管理或种子操作。

下载

临时验证方法很简单:

  • 关闭所有非核心插件(只留 emmet 和 language-babel)
  • 新建一个 .jsx 文件,右下角确认语法是 JavaScript (JSX)
  • 输 div.app,确保光标在行尾,按 Tab —— 应立刻展开

如果这时好了,说明是快捷键冲突。长期解法有两个:

  • 在 autocomplete-plus 设置里关掉 Use Tab to confirm suggestion
  • 或改用 Ctrl+Enter 手动触发 Emmet: Expand Abbreviation(命令面板可查)

为什么 .jsx 文件里 div>ul>li*3 不生成嵌套结构

这不是 Emmet 不支持,而是 JSX 语法域下部分缩写行为有差异。比如 div>ul>li*3 在 HTML 模式下能展开三层结构,但在 JSX 模式下可能只生成最外层 <div></div>,中间层级被截断。

原因在于 emmet-jsx-css-modules 为了适配 React 渲染逻辑,对嵌套缩写做了保守处理——它优先保证生成合法 JSX 语法,避免产出无法被 Babel 解析的结构(例如未闭合标签、非法子节点位置)。

绕过办法很直接:

  • 切回 HTML 语法模式写结构(右下角点一下选 HTML),用 Emmet 展开完整结构
  • 再手动把 class 改成 className,把 for 改成 htmlFor
  • 或者分步写:div → Tab → ul → Tab → li*3 → Tab,每次只展一层

真正容易被忽略的,是 Atom 对语法域的识别粒度比 VS Code 更细——它看的是 data-grammar 属性值,不是文件后缀。哪怕文件叫 App.jsx,如果右下角显示的是 JavaScript 而不是 JavaScript (JSX),Emmet 就不会走 JSX 分支。多看一眼那个小标签,比重装十次插件都管用。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

3876

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1235

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1578

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9343

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

860

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2304

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

1449

2023.09.14

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

3889

2023.09.21

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

0

2026.09.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn