jsx中的自动完成html标签（崇高文本）答案

【问题标题】：Autocomplete html tags in jsx (sublime text)jsx中的自动完成html标签（崇高文本）
【发布时间】：2015-07-13 16:45:58
【问题描述】：

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

【问题讨论】：

您是否尝试过任何 JSX 或 Babel 插件，看看它们是否满足您的需求？
是的，我正在使用 babel-sublime，它做得很好，但不幸的是 html 自动完成功能不起作用。
我不相信这是一项功能。
那么它只是一组片段吗？
是的，也许还有一些格式控制。

标签： autocomplete reactjs sublimetext3 sublimetext react-jsx

【解决方案1】：

它不会在你键入时自动关闭括号，但你可以使用 Sublime 的内置标签关闭 commandoption。 for mac，或 alt. for windows。

【讨论】：

这在我的测试中根本不起作用。有人可以确认这在 Sublime 中确实适用于他们吗？它是否可能依赖插件。
@XMLilley 为我工作。我拥有的唯一特定于 React 的插件是 github.com/babel/babel-sublime。也许这会有所不同，因为它为 JSX 文件提供语法高亮。
它来自键绑定配置中的这一行：{ "keys": ["super+alt+."], "command": "close_tag" },

【解决方案2】：

我强烈建议将babel-sublime 和emmet 结合使用。如果您将“JavaScript (Babel)”指定为语法，则两个包将一起工作，如果需要，emmet 会正确生成“className”和“htmlFor”。

唯一的缺点是扩展不能使用 TAB 而是使用 CTRL+E。这是因为 TAB 在 JavaScript 中有很多其他用法。

【讨论】：

我已经安装了这两个包，但是在 Syntax 菜单中没有“JavaScript (Babel)”可供我使用。 JavaScript _ 选项有一个弹出菜单，但这里只列出了 _JavaScript 和 JSON。对此有何见解？
@IsenrichO 在我的机器上，它列在 (Babel) -> JavaScript (Babel) 下。
我实际上发现Ctrl-E 非常方便 - 易于输入，易于记忆。我很高兴tab 没有被使用！ “className”非常好——我想我必须自己试着写一个。 :-) 感谢您的回答。
@IsenrichO 你应该在语法 "Babel > Javascript(Babel)" 中找到它
@ChocoLee 好电话。我当时很笨。

【解决方案3】：

安装：巴贝尔和埃米特

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

“Key Bindings - User”在“Preferences > Key Bindings”上

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

【讨论】：

要编辑“Key Bindings - User”是在“Preferences > Key Bindings”，然后是正确的。
这个对我有用，而选择的答案没有。谢谢！
您的配置在完整输入标签之前关闭标签。标签是View。我输入Vi，然后输入[Tab]，然后我得到<Vi><Vi>，而不是<View><View>。这绝对是错误的行为。
Green - HTML5 的问题是文档中的任何字符串都可能是但自定义标签的本质。
简单回答！！！请在您的答案中添加@choco Li 评论。

【解决方案4】：

值得注意的是，您可以通过复制并稍微修改 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 语法应用的范围。

【讨论】：

这很好用，实际上最好地解决了 OP 的问题。他没有问：如何在 JSX 中使用 emmet。他问，我怎样才能让 sublime 像处理 html 一样处理 jsx。一个警告：您可能希望将其放在用户文件夹中的 Default.sublime-keymap 中，而不是更改基本文件夹。
@btwebste 你确实意识到 SublimeText 严重依赖插件来扩展自己？虽然这个答案适用于问题的有限范围，但 emmet 是一个很好的工具，可以放在你的工具带中。不要误会我的意思，我不质疑这个答案的伟大性（有我的赞成票），但其他答案同样好（特别是因为一个人得到了 OP 所要求的，然后是一些）。
我要评论说有人应该为此制作一个插件。所以我做了：github.com/FMCorz/AutoCloseTags。感谢您的回答！
这似乎在 Sublime Text 4 中不起作用？

【解决方案5】：

如果您为 sublime 安装了 babel，请尝试打开您的 .js 和 .jsx 文件并转到查看 > 语法 > 使用当前 .. > 打开所有文件 > babel > javascript (babel) 以查看正确的语法突出显示并使用 CTRL + E在 .jsx 中自动完成 html 标记

【讨论】：

是你的问题吗？
这很有用，因为许多人在尝试上述解决方案之前忘记将其语法更改为 'Babel->JavaScript'。

【解决方案6】：

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

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

安装：

使用Package Control: Add repository添加上述存储库
执行命令Package Control: Install package
选择AutoCloseTags

【讨论】：

完美答案。
很棒的包，但是请您更新一下，以便在您键入开始标签的最后一个括号时启用关闭。像这样...
Sublime 将立即打印

【解决方案7】：

按照其他人的建议：安装 Babel 和 Emmet ！

Emmet Abbreviation's list （见demo here）（和cheat sheet here ）
您甚至不需要输入尖括号 -> Emmet -> 设置即可，结束标记等等！

update：Emmet (v2+) 现在可以使用 tab 键来处理 JSX 和 HTML 元素以< 开头。
例如<div 然后tab 将自动完成到<div></div> 而<MyComponent 然后tab 将扩展为<MyComponent></MyComponent>

此新功能默认启用。要关闭它，请打开 Emmet 设置并将 jsx_prefix 设置更改为 false："jsx_prefix": false 为此，请打开 Preferences -> Package Settings -> Emmet。

以前版本的 Emmet：

使用 CtrlE 扩展缩写。

Emmet 文档：非常擅长解释缩写词。但未能说明如何“扩展缩写词” - 至少，我找不到它。 p>

来自崇高，我

已开通：Preferences -> Package Settings -> Emmet -> Key Bindings - Default
搜索了expand_abbreviation
找到ctrl+e

幸福 - 像魅力一样工作:-)

更新：我不再推荐 AutoCloseTags。
至少在我安装的 Sublime Text 4 中，它似乎不再起作用了。

改用 Babel 和 Emmet。

我也推荐安装AutoCloseTags，由FMcorz和Daniel Shannon提供。

这种组合给了

自动关闭（由于嵌套规则而被解释的标签），只需输入</，非常棒，而 Emmet 会
按Crtl-E 将“缩写”扩展到完整的开始和结束标签（以及更多）。这非常适合创建骨架。

【讨论】：