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

之前,我一直使用Allan Hortle的JSX包,直到遇到有关如何处理语法突出显示的问题。 然后我注意到有一个官方程序包,崇高反应。

使用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文档的初步阅读没有引起人们的兴趣。 救命?

btholt asked 2019-10-08T08:42:10Z
5个解决方案
108 votes

在2015年4月,Emmet添加了对jsx的支持,但默认情况下不起作用。 好吧,令我惊讶的是,它实际上与SCOPE_SELECTOR快捷键一起使用,但是我想使用Key Bindings — User键进行扩展。 遵循官方指示为我完成了trick俩。

基本上,我必须在用户密钥绑定文件中粘贴以下内容(SCOPE_SELECTOR> 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

rafaelbiten answered 2019-10-08T08:43:15Z
16 votes

如果在文件中键入source.js.jsx,它将使您在左下方看到当前选择的上下文。

第一个字始终是基本文件类型。 (source.js.jsxsource.js)对于JSX,我选择将其更改为source.js.jsx。这是因为在编译之前,JSX实际上不是javascript,尽管看上去确实很相似。 您希望在JSX而不是JSX中发生很多补全和崇高的糖。 另一方面,崇高反应采用的是普通的source.js

因此,您拥有的这段代码是正确的,您只需要将source.js.jsx替换为source.js

Allan Hortle answered 2019-10-08T08:42:36Z
15 votes

从JSX-SublimeText包自述文件中:

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 
        }
    ]
}
Giant Elk answered 2019-10-08T08:43:55Z
2 votes

只是扩大这个答案。
您可能不希望您写的所有字母都可扩展为html。 您可以在上下文中设置另一个对象,以限制应用制表符补全的时间。 可以在此要旨中找到此代码,但是我对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
    }]
}

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

Richard Herries answered 2019-10-08T08:44:49Z
1 votes

只需使用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>  
        )
    }
Anish K. answered 2019-10-08T08:45:24Z
translate from https://stackoverflow.com:/questions/26089802/in-sublime-text-3-how-do-you-enable-emmet-for-jsx-files