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

Posted 2023-02-21

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

【英文标题】：In Sublime Text 3, how do you enable Emmet for JSX files?

【发布时间】：2014-11-23 05:59:58

【问题描述】：

我之前一直在使用Allan Hortle's JSX package，直到我遇到了它如何处理语法高亮显示的问题。然后我注意到有一个官方包，sublime-react。

在 Allan Hortle 的软件包中，他在 Preferences > Key Bindings – User 中包含了一个 sn-p，用于启用 Emmet 功能，如下所示：

    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        
    ]

这个 sn-p 似乎不适用于官方的 sublime-react 包。似乎可以使用键绑定进行修改，但对 Sublime 文档的初步阅读并没有对这个主题产生任何启发。帮忙？

【问题讨论】：

旁注：突出显示的问题是什么？如果您在 Github 上遇到问题，我很乐意尝试解决它。​​

【参考方案1】：

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

这是没有所有 cmets 的代码，并且有正确的 SCOPE_SELECTOR。

【讨论】：

^E 现在开箱即用，无需调整设置。太棒了。

这也为我解决了问题

谢谢！很有魅力。

这是一个非常棒的视频，展示了如何设置它：wesbos.com/emmet-react-jsx-sublime

我正在使用ctrl+e，但你如何自动完成自关闭标签？我想输入一些东西，然后快速将其包装在一个自动关闭的标签中，例如<Component />？

【参考方案2】：

如果您在文件中键入shift+super+p，它将让您在左下角看到当前选择的上下文。

第一个单词始终是基本文件类型。 (source.js, text.html) 对于JSX，我选择将其更改为source.js.jsx。这是因为在编译之前，JSX 确实不是 javascript，尽管它看起来确实很相似。有很多你希望在 JSX 而不是 JS 中发生的完成和崇高的糖。另一方面，sublime-react 使用普通的旧 source.js。

所以你拥有的这个 sn-p 是对的，你只需要将 source.js.jsx 替换为 source.js

【讨论】：

这适用于自动完成，但对我来说似乎破坏了缩进。

警告：通过重新绑定 tab 键来启用 Emmet 会破坏其他自动完成。例如，"fu"+TAB 将导致<fu></fu>，而不是您通常习惯的function function_name () 。您也可以使用Ctrl+E 而不是TAB。这是 Emmet 的 Expand Abbreviation 命令的默认键绑定，可以在任何上下文中使用。

你仍然可以使用 enter。这绝对是一个 hacky 修复，但在 emmet 完全支持 jsx 之前没有真正的解决方案。

【参考方案3】：

来自JSX-SublimeText Package自述文件：

Emmet 默认不支持 JS 文件。所以你需要在 JSX 文件中添加一个键盘快捷键来完成制表符。

打开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 
        
    ]

【参考方案4】：

2021 年不需要配置任何东西，因为 Emmet 默认支持 JSX 文件。

显然你需要在安装 Emmet 之后从包控制中安装 JSX language definition。

现在TAB 可以工作，但前提是 HTML 标记以 < 为前缀。例如<div。要更改此行为，请打开 Emmet 设置并将此设置更改为 false：

"jsx_prefix": false

要打开 Emmet 设置，请使用下图所示的文件菜单，或打开命令面板（在 macOS 上为 CMD+Shift+P）并输入“Emmet 设置”。

【讨论】：

jsx_prefix 救了我的命。

【参考方案5】：

只是扩展了这个答案。 您可能不希望您编写的所有字母都可以扩展为 html。您可以在上下文中设置另一个额外的对象来限制何时应用选项卡完成。此代码在 this gist 中找到，但我将正则表达式修改得更好。

    "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 和命令链，甚至将 span.class 变成 <span className="class"></span> 如果您想添加更多元素来收听，只需将它们添加到列表中，即(a\\b|div|span|p\\b|button|strong)\\b 指的是单词边界，并阻止以下内容将abc 扩展为<abc></abc>

【参考方案6】：

只需使用ctrl+e（mac 上的cmd+e）而不是 tab 来让 emmet 在你的 jsx 中工作。 例如，如果我展开（使用ctrl+e）

render()
        return(
            .modal>.btn.btn-successClick Me   
        )
    

然后我得到

render()
        return(
            <div className="modal">
                    <div className="btn btn-success">Click Me</div>
                </div>  
        )