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

Question

我以前一直在使用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文档的初步细读并未对该主题产生任何影响.救命？

Answer 1

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.

Answer 2

如果您输入shift+super+p文件,它将让您在左下方看到当前选择的上下文.

第一个字始终是基本文件类型.(source.js,text.html)在JSX的情况下,我选择将其更改为source.js.jsx.这是因为在编译之前JSX确实不是javascript,虽然看起来确实相似.你想在JSX中发生大量的完成和升华糖,而不是JS.另一方面,崇高反应使用普通的旧source.js.

所以这个片段中,你必须是正确的,你只需要更换source.js.jsx与source.js

Answer 3

从JSX-SublimeText包自述文件:

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

Answer 4

2021 年，无需配置任何内容，因为 Emmet 默认支持 JSX 文件。

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

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

"jsx_prefix": false

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