如何在 VSCode 中自动缩进 jsx

IT技术 reactjs visual-studio-code jsx
2021-05-19 13:06:08

VSCode 似乎不会在 jsx 中自动缩进 HTML 元素?

在此处输入图片说明

有什么办法可以修复它。


更新

原子中

当我输入时<div>,atom 会显示: 在此处输入图片说明

return按键后,结果是(注意光标的位置): 在此处输入图片说明

VSCode 中

在此处输入图片说明

在此处输入图片说明

4个回答

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

  1. 打开命令面板。
  2. 类型 change language mode
  3. Enter
  4. 类型 javascript react
  5. Enter

完成后,您将在左下角看到 JavaScript React 模式。

确认 JavaScript React 模式

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

将语言更改为Javascript React(有关说明,请参阅其他答案)然后使用以下命令:

alt + shift + f

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

1.添加用户设置

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

2.安装插件

Auto Install Tag

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

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

<Component>Enter

===>

<Component>
    :
</Component> 

<Component someProps={10}}Enter

===>

<Component someProps={10}>
:</Component>

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