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

Question

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

63

在遇到语法高亮问题之前，我一直使用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文档的初步审查没有发现任何相关信息。求助？

- btholt

1

顺便提一下：高亮显示的问题是什么？如果您在Github上提出问题，我很乐意尝试解决它。 - Allan Hortle

6个回答

16

在2021年，由于Emmet默认支持JSX文件，因此不需要配置任何内容。

显然，在安装Emmet之后，您需要从包控制中心安装JSX语言定义。

现在，TAB键将起作用，但仅当HTML标签以<前缀开头时才会起作用。例如：<div。要更改此行为，请打开Emmet设置并将此设置更改为false：

"jsx_prefix": false

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

- Pier

4

jsx_prefix 挽救了我的生命。 - Nithin M D

1

谢谢！这对我的.tsx文件也起作用了。 - narek

16

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

第一个单词始终是基本文件类型。（source.js，text.html）对于JSX，我选择将其更改为source.js.jsx。这是因为在编译JSX之前，它实际上不是javascript，尽管它看起来非常相似。有很多完成和sublime sugar要在JSX中发生但不是在JS中。另一方面，sublime-react使用普通的source.js。

所以，此片段是正确的，你只需要用source.js替换source.js.jsx。

- Allan Hortle

这个可以自动完成，但是对于我来说似乎会破坏缩进。 - konsumer

8

警告：通过重新绑定 Tab 键启用 Emmet 会破坏其他自动完成功能。例如，使用 "fu"+TAB 将导致 <fu></fu>，而不是通常您习惯于的 function function_name () {}。您可以选择使用 Ctrl+E 而非 TAB。这是 Emmet 的 “扩展缩写” 命令的默认键绑定，可在任何情况下使用。 - user2943490

你仍然可以使用回车键。这绝对是一个hacky的解决方法，但在emmet完全支持jsx之前，没有真正的解决方案。 - Allan Hortle

16

来自JSX-SublimeText包自述文件：

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

- Giant Elk

2

在此基础上进行扩展。
您可能不希望您编写的所有信件都可以扩展为HTML。您可以在上下文中设置另一个额外的对象，以限制何时应用选项卡完成。这段代码可以在此处的代码片段中找到，但我修改了正则表达式，使其更好。

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

- Richard Herries

1

只需使用ctrl+e（Mac上使用cmd+e）而不是Tab键，在JSX中使用Emmet。例如，如果我使用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.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rafaelbiten · Accepted Answer

2015年4月份，Emmet添加了对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。