Question

我希望能够在react / jsx代码中为html标签使用自动完成功能。它适用于html文件。我可以配置sublime text 3来为jsx文件启用标签自动完成吗？

Answer 1

值得注意的是，您可以通过复制并稍微修改/附带的Default.sublime-package的键绑定来在JSX中启用Sublime的内置标记。将以下内容添加到自定义键映射：

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}

假设您正在使用Babel包，则选择器meta.jsx.js将匹配JSX语法并启用标记关闭行为。其他包的范围名称可能不同，在这种情况下，您可以使用ScopeHunter检查首选JSX语法应用的范围。

Answer 2

安装：巴贝尔＆amp;埃米特

然后将其添加到您的Key Bindings - User

中

{
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        {
            "operand": "source.js", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
},
{ "keys": ["tab"], "command": "next_field", "context":
    [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]
}

Answer 3

在您键入时，它不会为您自动关闭括号，但您可以使用Sublime的内置标记与 命令 选项 更近。适用于Mac的 ，或适用于Windows的 alt 。 。

Answer 4

我强烈建议babel-sublime和emmet的组合。如果你指定＆＃34; JavaScript（Babel）＆＃34;作为你的语法，两个包将一起工作，emmet正确生成＆＃34; className＆＃34;和＆＃34; htmlFor＆＃34;如果需要的话。

唯一的缺点是扩展不适用于TAB，但使用CTRL + E.这是因为TAB在JavaScript中有许多其他用法。

Answer 5

根据丹尼尔的回答，我为此制作了一个插件。

来源：https://github.com/FMCorz/AutoCloseTags

安装：

使用Package Control: Add repository
执行命令Package Control: Install package
选择AutoCloseTags

Answer 6

如果您为sublime安装了babel，请尝试打开.js和.jsx文件，然后转到查看＆gt;语法＆gt;用当前打开所有..＆gt; babel＆gt; javascript（babel）查看正确的语法高亮显示并使用CTRL + E自动完成ur .jsx中的html标记

Answer 7

正如其他人所说：安装 Babel 和 Emmet ！

<强> Emmet Abbreviation's list （参见demo here）（和cheat sheet here ）
你甚至不需要输入有角度的括号--Emmet会这样做，结束标签等等！

使用 Ctrl E 展开缩写。

Emmet docs：非常擅长解释缩写。但未能说明如何＆＃34;展开缩写＆＃34; - 至少，我无法找到它。

从崇高，我    - 开放：Preferences -> Package Settings -> Emmet -> Key Bindings - Default
   - 搜索expand_abbreviation
   - 找到ctrl+e

幸福 - 像魅力一样： - ）

我还建议安装 AutoCloseTags ，由FMcorz和Daniel Shannon提供。

这种组合给出了    - 通过简单地键入</来自动关闭（由嵌套规则引起的解释标签），动态很好，而Emmet将会    - 扩展＆＃34;缩写＆＃34;通过按Crtl-E来完整打开和关闭标签（以及更多）。这非常适合创建骨架。

在jsx中自动完成html标签（崇高文本）

7 个答案: