jsx show html text,在jsx中自动完成html标签（崇高文本）(示例代码)

我希望能够在我的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": ".*

{ "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中有许多其他用法。

另一答案

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

安装：

使用Package Control: Add repository添加上述存储库

执行命令Package Control: Install package

选择AutoCloseTags

另一答案

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

另一答案

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

使用CtrlE展开缩写。

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

从Sublime，我

- 开放：Preferences -> Package Settings -> Emmet -> Key Bindings - Default

- 搜索expand_abbreviation

- 找到了ctrl+e

幸福 - 像魅力一样:-)

这种组合给出了

- 通过简单地输入来自动关闭(由嵌套规则引起的解释标签)，非常好用，而Emmet将

- 按Crtl-E将“缩写”扩展为完整的开始和结束标记(以及更多)。这非常适合创建骨架。