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

3 years ago

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

第一个字始终是基本文件类型 . （ source.js ， text.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>  
        )
    }