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

Posted

技术标签:

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

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

【问题讨论】：

您是否尝试过任何 JSX 或 Babel 插件，看看它们是否满足您的需求？ 是的，我正在使用 babel-sublime，它做得很好，但不幸的是 html 自动完成功能不起作用。 我不相信这是一项功能。 那么它只是一组片段吗？ 是的，也许还有一些格式控制。 【参考方案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 元素以&lt; 开头。 例如&lt;div 然后tab 将自动完成到&lt;div&gt;&lt;/div&gt; 而&lt;MyComponent 然后tab 将扩展为&lt;MyComponent&gt;&lt;/MyComponent&gt;

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

以前版本的 Emmet：

使用 CtrlE 扩展缩写。

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

来自崇高，我

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

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

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

改用 Babel 和 Emmet。

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

这种组合给了

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

【讨论】：

以上是关于jsx中的自动完成html标签（崇高文本）的主要内容，如果未能解决你的问题，请参考以下文章

无法在reactjs jsx中自动完成标签

CodeSandbox 编辑器已停止自动完成相应的 JSX 结束标记？

VS Code中的JSX组件（函数）自动完成？

Emmet 自动完成功能在 JSX 中不起作用

WebStorm、React 和 JSX 花括号自动完成

如何将标签拖放到自动完成文本字段？