如何在 VSCode 中自动缩进 jsx

Posted 2023-02-21

【中文标题】如何在 VSCode 中自动缩进 jsx

【英文标题】：How to auto indent jsx in VSCode

【发布时间】：2017-03-22 18:29:40

【问题描述】：

VSCode 似乎不会在 jsx 中自动缩进 html 元素？

有什么办法可以解决。

---

更新：

在原子中：

当我输入<div> 时，atom 会显示：

我按下return键后，结果是（注意光标的位置）：

在 VSCode 中：

【问题讨论】：

你解决了吗？

【参考方案1】：

1. 将用户设置添加到

"files.associations": 
    "*.js": "javascriptreact"
,

2。安装插件

Auto Install Tag

然后重新加载。它将解决您的问题。

顺便说一句，我认为现在有一个错误。没有组件 props 自动缩进效果很好，但是有了 props，它现在就不行了。

<Component>Enter

===>

<Component>
    :
</Component> 

但是

<Component someProps=10Enter

===>

<Component someProps=10>
:</Component>

任何可以解决此问题的人请帮助我 :) 我在 mac 上使用

【参考方案2】：

使用 Esben Petersen 的扩展“Prettier - Code formatter”。假设您的文件是 jsx 文件，它将在保存时自动格式化。

【讨论】：

您还需要实际激活该设置。

【参考方案3】：

将语言更改为Javascript React（有关说明，请参阅其他答案），然后使用以下命令：

alt + shift + f

【讨论】：

这适用于 Windows，但不适用于我的 Ubuntu，alt+shift+f 打开文件菜单

这个快捷方式是使用 eslint 配置格式化还是默认？

我认为是使用内置的emmet

有什么方法可以在我保存文件时自动格式化代码？按此组合键是一个额外的步骤。

【参考方案4】：

尝试将语言模式更改为 JavaScript React。

打开命令面板。 输入change language mode 按 Enter 输入javascript react 按 Enter

完成后，您会在左下角看到 JavaScript React 模式。

进入该模式后，再次尝试格式化文档。

【讨论】：

@zhuscat 你发出什么命令来格式化代码？它适用于我的机器 (TM)。

@zhuscat 啊哈。我以为您在谈论“格式化文档”命令。您的问题更新阐明了您的需求。

我想知道是否有任何方法可以在jsx中自动添加HTML关闭标签

我安装了一个名为auto close tag 的插件来解决“标签补全”问题。但是，press return key 问题（当我按回车键时，我希望与我的问题示例中的 相比多缩进一个）仍然存在。