Reactjs 在Sublime Text 3中，如何为JSX文件启用Emmet？

我以前一直在使用它，直到我遇到一个关于它如何处理语法突出显示的问题。然后我注意到有一个官方的包

在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文档的初步阅读并没有得到关于这个主题的任何信息。帮助？

如果您在文件中键入

shift+super+p

，它将让您在左下角看到当前选择的上下文

第一个字始终是基本文件类型。（

source.js

，

text.html

）在本例中，我选择将其更改为

source.js.jsx

。这是因为在编译之前，JSX实际上不是javascript，尽管它看起来非常相似。在JSX中有大量的补全和完美的糖分，而不是JS。另一方面，使用普通的旧

source.js

因此，您的这段代码是正确的，您只需将自述文件中的

source.js.jsx

替换为

source.js

：

Emmet的默认设置是不支持JS文件。因此，您需要在JSX文件中添加一个键盘快捷键来完成tab

打开

首选项>键绑定-用户

并添加以下条目：

{
“键”：[“选项卡”]，
“命令”：“按选项卡展开”，
“背景”：[
{
“操作数”：“source.js.jsx”，
“运算符”：“相等”，
“全部匹配”：正确，
“键”：“选择器”
},
{   
“键”：“选择项为空”，
“运算符”：“相等”，
“操作数”：true，
“全部匹配”：正确
}
]
}

仅对这个答案进行扩展。
您可能不希望您写的所有字母都可以扩展为html。可以在上下文中设置另一个额外对象，以限制何时应用制表符完成。这段代码是在中发现的，但是我修改了正则表达式使其更好一些

{
    "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

转换为

如果您想添加更多要侦听的元素，只需将它们添加到列表中即可，即

（a\\b|div|span | p\\b|button | strong）

\\b

引用了一个单词边界，并在2015年4月阻止以下操作将

abc

扩展为

，但默认情况下它不起作用。好吧，让我惊讶的是，它实际上是在使用

control+E

快捷方式，但我想使用

TAB

键展开。跟着我做了这件事

基本上，我必须在我的用户密钥绑定文件中粘贴以下内容(

首选项

键绑定-用户

）：

---

这是没有所有注释的代码，并且有正确的

SCOPE\u选择器。
只需使用
ctrl+e
（
cmd+e
在mac上），而不是使用tab键，即可让emmet在jsx中工作。
例如，如果我展开（使用
ctrl+e
）

然后我得到

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

render（）{
返回(
点击我
)
}
在2021年，无需进行任何配置，因为Emmet默认支持JSX文件

显然，您需要在安装Emmet之后从包控件安装

现在，
选项卡
将起作用，但仅当HTML标记的前缀是
侧注：突出显示的问题是什么？如果你在Github上遇到问题，我很乐意尝试解决。这可以自动完成，但对我来说似乎会破坏缩进。警告：通过重新绑定tab键来启用Emmet会破坏其他自动完成。例如，
“fu”
+
选项卡
将产生
，而不是像您通常使用的那样产生
函数名（{}
）。您也可以使用
Ctrl
+
E
而不是
选项卡
。这是Emmet的展开缩写命令的默认键绑定，可以在任何上下文中使用。不过，您仍然可以使用enter。这肯定是一个黑客补丁，但在emmet完全支持jsx之前没有真正的解决方案。
^E
现在可以开箱即用，无需调整设置。太棒了，这把我和格雷斯都修好了！这是一个非常好的视频，演示了如何设置：我正在使用
ctrl+e
但是如何自动完成自动关闭标签？我想键入一些内容，然后快速将其包装在一个自动关闭的标记中，如so
？
render(){
        return(
            .modal>.btn.btn-success{Click Me}   
        )
    }

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

"jsx_prefix": false