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

Posted 2021-05-02

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

答案

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

另一答案

安装：babel和Emmet

然后将其添加到您的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 }
    ]
}

另一答案

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

另一答案

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

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

另一答案

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

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

安装：

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

另一答案

如果您为sublime安装了babel，请尝试打开.js和.jsx文件，然后转到查看>语法>使用当前打开全部..> babel> javascript（babel）查看正确的语法突出显示并使用CTRL + E自动 - 你.jsx里面的完整html标签

另一答案

正如其他人建议的那样：安装Babel和Emmet！

Emmet Abbreviation's list（参见demo here）（和cheat sheet here ） 您甚至不需要输入带角度的支架 - Emmet会这样做，结束标签等等！

使用CtrlE展开缩写。

Emmet docs：非常擅长解释缩写..但未能说明如何“扩展缩写” - 至少，我无法找到它。

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

幸福 - 像魅力一样:-)

---

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

这种组合给出了 - 通过简单地输入</来自动关闭（由嵌套规则引起的解释标签），非常好用，而Emmet将 - 按Crtl-E将“缩写”扩展为完整的开始和结束标记（以及更多）。这非常适合创建骨架。