在Sublime Text 3中,如何为EmX启用JSX文件?

我以前一直在使用Allan Hortle的JSX包,直到遇到一个关于如何处理语法突出显示的问题。 然后我注意到,有一个正式的包, 崇高的反应 。

在Allan Hortle的软件包中,他在Preferences > Key Bindings – User包含了一个片段,用于启用Emmetfunction,如下所示:

 { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js.jsx", "operator": "equal", "match_all": true, "key": "selector" } ] } 

这个片段似乎不适用于官方崇高反应包。 这似乎是要修改的关键绑定的东西,但最初细读的崇高文档没有亮起这个问题。 帮帮我?

如果您在文件中键入shift+super+p ,则会让您在左下angular看到当前select的上下文。

第一个词总是基本文件types。 ( text.htmltext.html )在JSX的情况下,我select将其更改为source.js.jsx 。 这是因为在编译之前,JSX确实不是JavaScript,虽然看起来很相似。 有很多完成和崇高的糖,你想在JSX发生,但不是JS。 崇高反应另一方面使用普通的老式的source.js

所以这段代码是正确的你只需要用source.js.jsxreplacesource.js

在2015年4月, Emmet增加了对jsx的支持 ,但默认情况下不起作用。 那么,令我惊讶的是,它实际上是与control + E快捷键,但我想用TAB键来扩大。 遵循官方指示为我做了诀窍。

基本上,我必须粘贴以下我的用户密钥绑定文件( Preferences > Key Bindings — User ):

 { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" }, { "match_all": true, "key": "selection_empty" }, { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" }, { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" }, { "match_all": true, "key": "is_abbreviation" } ] } 

这是没有所有评论的代码,并且有正确的SCOPE_SELECTOR

从JSX-SublimeText包自述:

Emmet的默认是不支持JS文件。 所以你需要在JSX文件中添加一个键盘快捷键。

打开Preferences > Key Bindings - user并添加以下条目:

 { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [ { "operand": "source.js.jsx", "operator": "equal", "match_all": true, "key": "selector" }, { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true } ] } 

只是扩大这个答案。
你可能不希望你写的所有信件都可以扩展成html。 您可以在上下文中设置另一个额外的对象,以限制应用标签填充的时间。 这个代码被发现在这个要点,但我修改了正则expression式好一点。

 { "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [{ "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },{ "key": "preceding_text", "operator": "regex_contains", "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", "match_all": true },{ "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }] } 

你还需要按照要求安装RegReplace和命令链,甚至可以把span.class变成<span className="class"></span>
如果你想添加更多的元素来侦听,只需将它们添加到列表中即可(a\\b|div|span|p\\b|button|strong)
\\b引用一个字边界,并停止将abc<abc></abc>

只需使用ctrl+e (在mac上的cmd+e )而不是tab来使emmet在你的jsx中工作。 例如,如果我扩大(使用ctrl+e

 render(){ return( .modal>.btn.btn-success{Click Me} ) } 

然后我得到

 render(){ return( <div className="modal"> <div className="btn btn-success">Click Me</div> </div> ) } 
Interesting Posts