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

Question

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

Answer 1

它不会在你输入时自动关闭括号，但你可以使用 Sublime 的内置标签关闭 command option. for mac, 或者 alt. 对于 windows.

Answer 2

强烈推荐babel-sublime and emmet的组合。如果您指定 "JavaScript (Babel)" 作为您的语法，两个包将一起工作，如果需要，emmet 会正确生成 "className" 和 "htmlFor"。

唯一的缺点是展开不能使用 TAB，而是使用 CTRL+E。这是因为 TAB 在 JavaScript.

中有很多其他用法

Answer 3

安装：巴贝尔和埃米特

然后将其添加到您的键绑定中 - 用户

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

Answer 4

值得注意的是，您可以通过复制并稍微修改 Default.sublime-package 附带的 / 的键绑定，在 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" }
  ]
}

假设您使用的是 Babel 包，选择器 meta.jsx.js 将匹配 JSX 语法并启用标签关闭行为。其他包的范围名称可能不同，在这种情况下，您可以使用 ScopeHunter 检查您首选的 JSX 语法所应用的范围。

Answer 5

如果您为 sublime 安装了 babel，请尝试打开您的 .js 和 .jsx 文件并转到查看 > 语法 > 使用当前 .. 打开所有 > babel > javascript (babel) 以查看正确的语法突出显示并使用 CTRL + E 自动完成 .jsx

中的 html 标记

Answer 6

根据大牛的回答，我专门做了一个插件。

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

要安装：

使用 Package Control: Add repository
执行命令Package Control: Install package
Select AutoCloseTags

Answer 7

正如其他人所建议的那样：安装 Babel and Emmet !

Emmet Abbreviation's list （见 demo here ) ( and cheat sheet here ）
您甚至不需要在尖括号中输入 -> Emmet -> 设置，结束标记等等！

更新：Emmet (v2+) 现在可以使用 tab 键用于 JSX 和HTML 个元素，当你以 < 开始它们时。
例如 <div 然后 tab 将自动完成 <div></div> 而 <MyComponent 然后 tab 将扩展为 <MyComponent></MyComponent>

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

以前版本的 Emmet：

使用CtrlE展开缩写

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

来自 Sublime，我

打开了：Preferences -> Package Settings -> Emmet -> Key Bindings - Default
搜索了 expand_abbreviation
找到ctrl+e

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

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

改用 Babel 加 Emmet。

我也推荐安装AutoCloseTags, as provided by and .

这个组合给出

自动关闭（由于嵌套规则而解释的标签），只需键入 </，即时很棒，而 Emmet 将
通过按 Crtl-E 将“缩写”扩展为完整的开始和结束标签（以及更多）。这非常适合创建骨架。

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

Autocomplete html tags in jsx (sublime text)

autocomplete

reactjs

sublimetext3

sublimetext

react-jsx