Autocomplete jsx中的自动完成html标记（升华文本）

我希望能够在react/jsx代码中对html标记使用autocomplete。与html文件的工作方式相同。我可以配置升华文本3来为jsx文件启用标记自动完成吗？

它不会在您键入时自动关闭括号，但您可以使用升华内置的标记关闭器和命令选项。适用于mac，或alt.适用于windows。

我强烈建议将和结合使用。如果您指定“JavaScript（Babel）”作为语法，这两个包将一起工作，如果需要，emmet将正确地生成“className”和“htmlFor”

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

安装： 巴贝尔与埃米特酒店

然后将其添加到密钥绑定-User中

“密钥绑定-用户”位于“首选项>密钥绑定”上

---

值得注意的是，您可以通过复制并稍微修改

Default.Sublime包

附带的

/

的键绑定，在JSX中启用Sublime的内置标记closer。将以下内容添加到自定义密钥映射：

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

{“keys”：[“/”]，“command”：“close_tag”，“args”：{“insert_slash”：true}，“context”：
[
{“key”：“selector”，“operator”：“equal”，“operator”：（text.html，text.xml，meta.jsx.js）-string-comment，“match_all”：true}，
{“key”：“previous_text”，“operator”：“regex_match”，“operator”：“*如果您安装了babel for sublime，请尝试打开您的.js和.jsx文件，然后转到查看>语法>使用当前..>babel>javascript打开所有文件（babel）为了查看正确的语法突出显示，并根据Daniel的回答使用CTRL+E自动完成ur.jsx中的html标记，我制作了一个插件

资料来源：

要安装：

使用
包控件添加上述存储库：添加存储库
执行命令
Package Control:Install Package
选择
AutoCloseTags
正如其他人建议的那样：安装和


（见）（和）

你甚至不需要在尖括号中输入-Emmet会这样做，结束标记，等等

使用CtrlE扩展缩写

Emmet docs：非常擅长解释缩写。但是没有说明如何“扩展缩写”-至少，我找不到它

来自崇高，我

-打开：
Preferences->Package Settings->Emmet->Key Bindings-Default


-搜索
扩展\u缩写


-找到
ctrl+e

幸福-像一个魅力一样工作：-）


我还建议安装和提供的

这种组合会产生

-自动关闭（由于嵌套规则而解释的标记），只需键入
，您是否尝试过任何JSX或Babel插件以查看它们是否满足您的需求？是的，我使用的是Babel sublime，它做得很好，但不幸的是html自动完成不起作用。我不相信这是一个功能。那么它只是一组Snippent吗？是的，可能还有一些格式控制。在我的测试中，这对我来说根本不起作用ing。有人能确认这在Sublime中对他们有效吗？它可能依赖于插件。@XMLilley对我有效。我唯一的React-specific插件是。也许这会有所不同，因为它为JSX文件提供语法高亮显示。它来自keybindings配置中的这一行：
{“keys”：[“super+alt+。”]，”命令“：“关闭标签”}，
这非常有效，实际上最好地解决了OP的问题。他没有问：我怎样才能在JSX中使用emmet。他问，我怎样才能让sublime以处理html的方式处理JSX。一个警告：你可能想把它放在用户文件夹的
默认值中。sublime keymap
而不是更改基本文件夹。@btwebste你知道吗imeText严重依赖插件来扩展自身？虽然这个答案适用于问题的有限范围，但emmet是一个很好的工具，可以放在你的工具带中。别误会，我不怀疑这个答案的伟大（我有自己的投票权），但其他答案同样好（特别是当一个得到了OP要求的东西，然后又得到了一些）。我想说应该有人为此制作一个插件。所以我做了：。谢谢你的回答！我已经安装了这两个软件包，但没有“JavaScript（Babel）”“作为语法菜单中的一个选项提供给我。JavaScript选项有一个弹出菜单，但这里只列出了JavaScript和JSON。对此有什么见解吗？@IsenrichO在我的机器上，它列在（Babel）->JavaScript（Babel）下。”。实际上，我发现
Ctrl-E
非常方便-易于键入，易于记忆。我很高兴
tab
没有被使用！“className”非常好-我想我必须自己尝试编写一个。：-）谢谢你的回答。@IsenrichO你应该在语法“Babel>Javascript（Babel）”中找到它@ChocoLee打得不错。我一直很笨。这是你的问题吗？这很有用，因为很多人在尝试上述解决方案之前忘记将语法更改为“Babel->JavaScript”。要编辑“键绑定-用户”，请打开“首选项>键绑定”，然后是正确的。这一个对我有效，而选择的答案无效。谢谢！在完整键入标记之前，您的配置会关闭标记。标记是
视图
。我键入
Vi
，然后键入
[Tab]
，然后我得到的是
，而不是
。这绝对是错误的行为。绿色-HTML5的问题是文档中的任何字符串都可能是a，但这正是自定义标记的本质。答案很简单！！！请在你的答案中添加@choco Li注释。完美的答案。很棒的软件包。但是，你能更新关闭启用吗les，当您键入开始标记的最后一个括号时。像这样…升华将立即打印
{ "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" }
  ]
}