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

reactjs React.js

老丝镜风

2020-03-19

之前,我一直使用Allan Hortle的JSX包,直到遇到有关如何突出显示语法的问题。然后,我注意到有一个官方软件包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文档的初步阅读没有引起人们的兴趣。救命?

第2244篇《在Sublime Text 3中,如何为JSX文件启用Emmet?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
宝儿猴子 2020.03.19

只是扩大这个答案。
您可能不希望您写的所有字母都可扩展为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 Chain包,甚至可以span.class将其变成。<span className="class"></span>
如果您想添加更多元素来侦听,只需将它们添加到列表中即可,即(a\\b|div|span|p\\b|button|strong)
The \\b指单词边界和阻止以下内容扩展abc<abc></abc>

伽罗理查德 2020.03.19

Emmet在2015年4月增加了对jsx的支持,但默认情况下不起作用。好吧,令我惊讶的是它实际上是在使用control + E快捷键,但是我想使用该TAB键进行扩展。遵循官方指示为我完成了窍门。

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

猪猪宝儿 2020.03.19

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 
        }
    ]
}
猿GO 2020.03.19

只需使用ctrl+ecmd+e在Mac上)而不是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>  
        )
    }

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android