首页 文章

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

提问于
修改于
浏览 1362
57

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

  • 105

    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 .

  • 15

    来自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 
            }
        ]
    }
    
  • 15

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

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

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

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

  • 0

    只是扩展这个答案 .
    您可能不希望您编写的所有字母都可以扩展为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>

相关问题