如何防止 Visual Studio 代码破坏我的 jsx 代码？

Question

我一直在使用 reactjs 开发一个简单的 crud 应用程序。

这是一段代码

enter code hererender() { 返回 （ 产品经理 { this.state.products.map（产品 => { 返回 ( ); }) } );

看起来不错，没什么问题。但是，如果我保存它，VS Code 会执行以下操作：将标签与尖括号分开，等等。我的问题很简单——如何防止 VS Code 破坏我的代码？ enter code here render() { 返回 ( 产品经理 { 返回 ( ); }) }

Answer 1

您可能安装了一个自动格式化文本的扩展程序。 Prettier 是最受欢迎的之一。据我所知，VSCode 不会自动格式化您的代码。

Answer 2

似乎有两个问题可能会导致您的问题。您的代码无效，这可能会阻止您的格式化程序正常工作。

首先，我们可以清理您的代码，使其成为有效的 Javascript。存在两个问题：

1. 您的渲染函数缺少右括号。
2. 必须为相邻的 JSX 元素分配键或包装在 React Fragment 中。

以下是修复这些问题后有效的 Javascript 的样子：

render() {
  return (
    <React.Fragment>
      Products Manager
      <AddProduct onAdd={this.onAdd} />
      {this.state.products.map(product => {
        return (
          <ProductItem
            key={product.name}
            {...product}
            onDelete={this.onDelete}
            onEditSubmit={this.onEditSubmit}
          />
        );
      })}
    </React.Fragment>
  );
}

VSCode 有一个内置的Javascript Language Service，它允许 支持开箱即用的 Javascript 功能的编辑器。 Learn more here.