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

我希望能够在我的react/jsx代码中为html标签使用自动完成功能。它与html文件的工作方式相同。我可以配置崇高的文本3为jsx文件启用标记自动完成吗？jsx中的自动完成html标签（崇高文本）

2015-05-04 Igor Okorokov

您是否尝试过任何JSX或Babel插件以查看它们是否满足您的需求？ – WiredPrairie

是的，我使用babel-sublime，它做得很好，但不幸的HTML自动补全不起作用。 –

我不相信这是一个功能。 – WiredPrairie

值得关注的是，你可以通过复制实现崇高的内置标签的JSX接近并稍微修改键入/与Default.sublime-package自带。以下添加到您的自定义键盘布局

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

假设你正在使用的巴贝尔包，选择meta.jsx.js将匹配JSX语法，使标签关闭行为。其他程序包的作用域名称可能不同，在这种情况下，您可以使用ScopeHunter来检查由首选JSX语法应用的作用域。

来源

2016-12-12 04:45:11

这很好，实际上最好地解决了OP的问题。他没有问：我如何在JSX中使用emmet。他问，我怎样才能让崇高的处理jsx处理html的方式。需要注意的一点是：你可能想把它放在用户文件夹中的'Default.sublime-keymap'中，而不是更改基本的。 – btwebste

@btwebste你知道SublimeText严重依赖插件来扩展自己吗？尽管这个答案适用于这个问题的有限范围，但emmet是一个很好的工具，可以在你的工具带中使用。不要误解我的意思，我不质疑这个答案的伟大之处（我的upvote），但其他答案同样好（尤其是因为我们得到了OP所要求的，然后是一些答案）。 – Mrchief

我打算评论说有人应该为此做一个插件。所以我做了：https：//github.com/FMCorz/AutoCloseTags。感谢你的回答！ – FMCorz

它不会自动关闭的括号内为你，你键入的，但你可以用崇高的内置标签接近与命令选项。 for mac，或alt。用于windows的。

来源

2015-06-15 12:44:54 myoung

在我的测试中，这对我来说根本不起作用。有人可以证实这在Sublime中对他们确实有效吗？它可能依赖于一个插件。 – XML

不适合我。 –

@XMLilley适合我。我唯一的React专用插件是https://github.com/babel/babel-sublime。也许这会有所作为，因为它为JSX文件提供语法高亮显示。 – maxedison

我强烈建议组合babel-sublime和emmet。如果您指定“JavaScript（Babel）”作为您的语法，那么两个软件包将一起工作，如果需要，emmet会正确生成“className”和“htmlFor”。

唯一的缺点是扩展不能使用TAB，但使用CTRL + E。这是由于TAB在JavaScript中有一堆其他用法。

来源

2016-05-20 16:33:58 Martin

我已经安装了这两个软件包，但没有“JavaScript（Babel）”作为_Syntax_菜单中的选项提供给我。 _JavaScript _选项有一个弹出式菜单，但这里只列出了_JavaScript_和_JSON_。对此有何洞见？ – IsenrichO

完美地工作..感谢 –

@IsenrichO在我的机器上，它列在（Babel） - > JavaScript（Babel）下。 – SherylHohman

安装：通天&埃米特

然后添加到您的键绑定这 - 用户

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

来源

2016-06-27 17:48:34

要编辑“键绑定 - 用户”是在“首选项>键绑定”，然后正确的。 –

如果你已经安装好babel，试试打开你的.js和.jsx文件，然后进入查看>语法>用当前..> babel> javascript（babel）打开所有文件，查看正确的语法高亮显示并使用CTRL + E自动完成你的.jsx中的html标记

来源

2017-11-03 03:50:52

这是你的问题吗？ –

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

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

要安装：

添加上述库与Package Control: Add repository
执行命令Package Control: Install package
选择AutoCloseTags

来源

2017-11-09 16:09:58 FMCorz

正如其他建议：安装Babel and Emmet！

Emmet Abbreviation's list （见demo here）（和cheat sheet here）
你甚至不需要尖括号键入 - 埃米特会做到这一点，结束标记，以及更多！

使用Ctrl键é扩大的缩写。

埃米特文档：在解释缩写.. 伟大的，但没有说明如何“展开缩写” - 至少，我无法找到它。

从崇高，我
- 开辟了：Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- 搜索expand_abbreviation
- 发现ctrl+e

幸福 - 就像一个魅力:-)

我也推荐安装AutoCloseTags，按规定b y FMcorz和Daniel Shannon。

组合使得
- 自动闭合（解释标签由于嵌套规则），只需输入</，在飞行中大，反之，埃米特将
- 扩张的“缩写”，以全面开启和关闭标签（和更多）按Crtl-E。这对创建骨架非常有用。

来源

2018-01-02 22:30:53 SherylHohman

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

回答

相关问题