在使用 sublime
搭建 react.js
环境, 可以修改 emmet
兼容 JSX
文件
emmet 作为前端开发必备插件之一非常方便快捷,通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。
PC上 ctrl+shift+p
(Mac Cmd+shift+p
)打开面板输入 emmet
安装
使用方法
打开 preferences
-> Key bindings - Users
,把下面代码复制到[]内部。
{ "keys": [ "super+e" ], "args": { "action": "expand_abbreviation" }, "command": "run_emmet_action", "context": [{ "key": "emmet_action_enabled.expand_abbreviation" }] }, { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [{ "operand": "source.js?1.2.1", "operator": "equal", "match_all": true, "key": "selector" }, { "key": "preceding_text", "operator": "regex_contains", "operand": "(//b(a//b|p|span|p//b|button)(//.//w*|>//w*)?([^}]*?}$)?)", "match_all": true }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }] }
使用super+e
触发 emmet
;正则判断用 a
,p
,span
,p
,button
标签默认 tab
触发;默认 class
修改为 className
注 supre+e
在 PC 上指的是 win+e
(pc
建议修改为emmet
默认按键 ctrl+e
),在 mac
上指的是 cmd+e
以上规则来源于 StackOverflow,正则小有修改.
在 vs code
插件平台 搜索 emmet
只有 Emmet fix
这货 , 好像不支持 jsx
求大神 vs code
如何 在 jsx
支持 emmet
楼上正解,太感谢了 大赞
"emmet.syntaxProfiles": { "javascript": "html" }, // 更推荐下面的方式:支持 className "emmet.syntaxProfiles": { "javascript": "jsx" },