在 Sublime Text 3 中，如何在 JSX 中启用 HTML 的自动补全答案

【问题标题】：In Sublime Text 3, how do you enable Autocompletion of HTML in JSX在 Sublime Text 3 中，如何在 JSX 中启用 HTML 的自动补全
【发布时间】：2016-05-20 13:30:31
【问题描述】：

在 Sublime Text 3 中，我有 Babel 包，用于在 JSX 中突出显示 HTML 代码的语法。

但是 HTML 代码没有自动完成功能，例如那些包裹在 render() 块中的代码。我们如何启用 HTML 代码的自动完成功能？

【问题讨论】：

标签： reactjs sublimetext3 jsx

【解决方案1】：

您需要 Emmet 插件才能在 JSX 组件中自动完成。

使用您的包控制器安装 Emmet。在 Emmet 的其他功能中，只需在写入标签名称后，按 Ctrl+E 即可将其转换为开闭标签对。如果你想使用Tab 按钮，你需要修改基本的 Emmet 配置，方法是在 Package Settings -> Emmet -> Key Bindings (User) 中添加一个 JSON 文档，例如：

[
    {
        keys: ["tab"],
        command: "expand_abbreviation_by_tab",
        context: [
            {
                operand: "source.js",
                operator: "equal",
                match_all: true,
                key: "selector",
            },
            { match_all: true, key: "selection_empty" },
            {
                operator: "equal",
                operand: false,
                match_all: true,
                key: "has_next_field",
            },
            {
                operand: false,
                operator: "equal",
                match_all: true,
                key: "auto_complete_visible",
            },
            { match_all: true, key: "is_abbreviation" },
        ],
    },
];

默认情况下不允许使用Tab 自动补全以避免与内部 Sublime Text 功能发生冲突，但此脚本将使 Emmet 意识到这一点并允许在 JSX 文件范围内自动补全

【讨论】：

谢谢@Alex，我安装了 Emmet。它在 JSX 之外的纯 HTML 文件中运行良好，但在 JSX 中它不起作用。
Ctrl + e 与 Ctrl + w 非常接近，如果发生这种情况，你会在项目关闭时搞砸

【解决方案2】：

这很难回答，因为它取决于您的很多 Sublime Text 插件。

如果你使用 Babel 作为 JS 和 HTML 包（如 Emmet）的格式，你应该没问题。在某些情况下，“tab”可能不起作用，但 Emmet CTRL+e 仍然会展开任何部分标签，即使正确使用“className”而不是 class。

【讨论】：

Babel 与 HTML 自动完成无关。这是不可能的，仅供参考