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

我之前一直在使用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)

3 years ago

如果在文件中键入 shift+super+p ,它将允许您在左下方看到当前选择的上下文 .

第一个字始终是基本文件类型 . ( source.jstext.html )在JSX的情况下,我选择将其更改为 source.js.jsx . 这是因为在编译之前,JSX确实不是在JSX中发生而是在JS中发生 . sublime-react另一方面使用普通旧 source.js .

所以你拥有的这个片段是正确的你需要用 source.js 替换 source.js.jsx

3 years ago

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

基本上,我必须在我的用户密钥绑定文件( 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 .

3 years ago

来自JSX-SublimeText Package自述文件:

Emmet的默认设置是不支持JS文件 . 因此,您需要为JSX文件中的选项卡添加键盘快捷键 . 打开首选项>键绑定 - 用户并添加此条目:

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

3 years ago

只是扩展这个答案 .
您可能不希望您编写的所有字母都可以扩展为html . 您可以在上下文中设置另一个额外对象,以限制何时应用选项卡完成 . 这段代码是在_1076405中找到的,但我修改了Regex要好一些 .

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

你还需要按照gist中的建议安装RegReplace和Chain of Command软件包,甚至让 span.class 变成 <span className="class"></span>
如果你想添加更多元素来监听,只需将它们添加到列表即 (a\\b|div|span|p\\b|button|strong)
\\b 引用一个单词边界并阻止以下内容将 abc 扩展为 <abc></abc>

3 years ago

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