VS Code在保存.js文件时会修改JSX。

Question

我正在尝试学习一些React，我有一个名为client.js的js文件。文件中有一个非常简单的类，只是试图返回一行代码。我正在使用Visual Studio Code。

class Layout extends React.Component {
render() {
    return ( 
        <h1>Hello World!!</h1>
    );
  }
}

然而，每次我在VS Code中保存文件时，它都会改变jsx行为以下内容。

class Layout extends React.Component {
    render() {
        return ( <
            h1 > Hello World!! < /h1>
        );
    }
}

我可以将它保存在记事本等应用程序中，但无法在VS Code中保存。我做错了什么？

- user3059074

---

你安装了任何扩展吗？ - Matt Bierner

请查看react-beautify。 - David Florez

你好。请禁用在VSCode中安装的所有不需要的扩展程序。这些扩展有时会破坏代码格式。更新到最新的VSCode版本。Webstorm也是一个非常适合JavaScript应用程序的IDE。它支持JSX和React。 - Abhay Shiro

Answer 1

现在编辑器右下角有一个切换按钮，可以用来切换语言模式（对于打开的 .js 文件，点击 JavaScript，在 "react" 中输入并选择 JavaScript React），但必须针对每个文件单独进行操作。然而，您可以将文件保留为 .js 格式。

- Vali D

Answer 2

请更新到最新版本的VS Code，并尝试将文件名从.js更改为.jsx。VS Code能够很好地处理jsx文件。

- José Quinto Zamora

---

将文件命名为.jsx对我很有效。谢谢提供这个信息。 - user3059074

Answer 3

如果您正在使用美化扩展，请禁用它。这样就可以正常工作了。

- coder-guy