在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" } ] } 

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

Answer 1

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

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

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

Answer 2

在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 。

Answer 3

从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 } ] } 

Answer 4

只是扩大这个答案。
你可能不希望你写的所有信件都可以扩展成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>

Answer 5

只需使用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> ) }