jsx转为html,reactjs-jsx中的自动完成html标签（崇高文本）

reactjs-jsx中的自动完成html标签(崇高文本)

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

7个解决方案

74 votes

值得注意的是，您可以通过复制并稍微修改meta.jsx.js随附的meta.jsx.js的键绑定来在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语法所应用的作用域。

Daniel Shannon answered 2020-02-04T00:24:10Z

29 votes

安装：巴别塔＆Emmet

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

{

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

]

}

Ryan Jeremiah Freeman answered 2020-02-04T00:24:34Z

21 votes

键入时，它不会自动为您关闭方括号，但您可以仅在命令选项中使用Sublime的内置标签。 对于Mac或alt。 对于Windows。

myoung answered 2020-02-04T00:24:55Z

8 votes

我强烈建议将babel-sublime和emmet结合使用。 如果您将“ JavaScript(Babel)”指定为语法，则两个软件包将一起工作，并且emmet会根据需要正确生成“ className”和“ htmlFor”。

唯一的缺点是，扩展将不适用于TAB，但不适用于CTRL + E。 这是由于TAB在JavaScript中还有很多其他用法。

Martin answered 2020-02-04T00:25:19Z

6 votes

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

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

安装：

使用AutoCloseTags添加上述存储库

执行命令AutoCloseTags

选择AutoCloseTags

FMCorz answered 2020-02-04T00:26:01Z

1 votes

如果您已安装babel进行Sublime升级，请尝试打开.js和.jsx文件，然后查看>语法>使用当前..>全部打开> babel> javascript(babel)以查看正确的语法突出显示并使用CTRL + E自动 ur .jsx中的完整html标签

Syahmi Nawi answered 2020-02-04T00:26:21Z

1 votes

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

Emmet缩写的列表(请参见此处的演示)(以及备忘单)

您甚至不需要键入尖括号-Emmet会做到这一点，结束标记等等！

使用CtrlE展开缩写。

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

从崇高，我

-开放：

-搜索Crtl-E

-找到ctrl+e

幸福-像魅力一样工作:-)

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

这种组合给

-通过自动输入即可自动关闭(由于嵌套规则而导致的解释标签)，运行非常方便，而Emmet将自动关闭

-按Crtl-E，将“缩写”扩展为完整的开始和结束标签(以及更多)。这对于创建骨架非常有用。

SherylHohman answered 2020-02-04T00:27:38Z