我之前一直在使用Allan Hortle's JSX package,直到遇到语法高亮处理的问题 . 然后我注意到有一个官方包,sublime-react .
通过Allan Hortle的软件包,他在 Preferences > Key Bindings – User
中添加了一个片段,用于启用Emmet功能,如下所示:
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [
{
"operand": "source.js.jsx",
"operator": "equal",
"match_all": true,
"key": "selector"
}
]
}
此代码段似乎不适用于官方的sublime-react包 . 这似乎是用键绑定修改的东西,但Sublime文档的初步细读并未对该主题产生任何影响 . 救命?
5 回答
2015年4月Emmet added support for jsx,但默认情况下不起作用 . 好吧,令我惊讶的是它实际上正在使用
control + E
快捷方式,但我想使用TAB
键进行扩展 . 继official instructions为我做了诀窍 .基本上,我必须在我的用户密钥绑定文件(
Preferences
>Key Bindings — User
)中粘贴以下内容:这是没有所有注释的代码,并且正确
SCOPE_SELECTOR
.来自JSX-SublimeText Package自述文件:
只需使用
ctrl+e
(在Mac上为cmd+e
)而不是tab来让emmet在你的jsx中工作 . 例如,如果我展开(使用ctrl+e
)然后我明白了
如果在文件中键入
shift+super+p
,它将允许您在左下方看到当前选择的上下文 .第一个字始终是基本文件类型 . (
source.js
,text.html
)在JSX的情况下,我选择将其更改为source.js.jsx
. 这是因为在编译之前,JSX确实不是在JSX中发生而是在JS中发生 . sublime-react另一方面使用普通旧source.js
.所以你拥有的这个片段是正确的你需要用
source.js
替换source.js.jsx
只是扩展这个答案 .
您可能不希望您编写的所有字母都可以扩展为html . 您可以在上下文中设置另一个额外对象,以限制何时应用选项卡完成 . 这段代码是在_1076405中找到的,但我修改了Regex要好一些 .
你还需要按照gist中的建议安装RegReplace和Chain of Command软件包,甚至让
span.class
变成<span className="class"></span>
如果你想添加更多元素来监听,只需将它们添加到列表即
(a\\b|div|span|p\\b|button|strong)
\\b
引用一个单词边界并阻止以下内容将abc
扩展为<abc></abc>