Question

我之前使用过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文档的初步细读并未对该主题产生任何影响。帮助

Answer 1

2015年4月Emmet added support for jsx，但默认情况下不起作用。好吧，令我惊讶的是它实际上是使用\1快捷方式，但我想使用control + E键进行扩展。在official instructions之后为我做了诀窍。

基本上，我必须在我的用户密钥绑定文件中粘贴以下内容（ TAB＆gt; 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" } ] }。

Answer 2

如果您在文件中输入shift+super+p，它会让您在左下方看到当前选择的上下文。

第一个字始终是基本文件类型。（source.js，text.html）如果是JSX，我选择将其更改为source.js.jsx。这是因为在编译之前JSX确实不是javascript，虽然看起来确实相似。你想在JSX中发生大量的完成和升华糖，而不是JS。另一方面，sublime-react使用普通的source.js。

所以这个代码片段是对的，您需要将source.js.jsx替换为source.js

Answer 3

来自JSX-SublimeText Package自述文件：

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

打开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。您可以在上下文中设置另一个额外对象，以限制何时应用选项卡完成。这段代码可以在this gist中找到，但我修改了正则表达式更好一点。

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

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>  
        )
    }

Answer 6

在 2021 年不需要配置任何东西，因为 Emmet 默认支持 JSX 文件。

显然您需要在安装 Emmet 后从包控制中安装 JSX language definition。

现在 TAB 将起作用，但仅当 HTML 标记以 < 为前缀时才有效。例如<div。要更改此行为，请打开 Emmet 设置并将此设置更改为 false：

"jsx_prefix": false

要打开 Emmet 设置，请使用下图所示的文件菜单，或打开命令面板（macOS 上为 CMD+Shift+P）并写入“Emmet 设置”。

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

6 个答案: