62

我以前一直在使用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 文档的初步阅读并没有对这个主题产生任何启发。帮助？

4

6 回答 6

116

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。

于 2015-08-02T01:49:04.463 回答
16

如果你输入shift+super+p一个文件，它会让你在左下角看到当前选择的上下文。

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

所以你拥有的这个片段是对的，你只需要替换source.js.jsx为source.js

于 2014-10-28T22:21:37.143 回答
16

从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 
        }
    ]
}
于 2015-01-26T23:36:15.057 回答
10

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

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

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

"jsx_prefix": false

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

在此处输入图像描述

于 2021-02-08T21:18:43.780 回答
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
    }]
}

您还需要按照要点中的建议安装包 RegReplace 和 Chain of Command 甚至可以span.class变成阻止以下扩展为<span className="class"></span>
(a\\b|div|span|p\\b|button|strong)
\\babc<abc></abc>

于 2015-06-16T15:22:00.750 回答
1

只需使用ctrl+e(cmd+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>  
        )
    }
于 2017-07-17T09:06:59.513 回答