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

Question

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

这是一段代码

enter code here render（）{return（Products Manager <AddProduct onAdd = {this.onAdd} /> {this.state.products.map（product => {return（<ProductItem key = {product.name} {...产品} onDelete = {this.onDelete} onEditSubmit = {this.onEditSubmit}））;}）}））;

看起来不错，那里没什么问题。 但是，如果我保存此代码，VS Code会执行以下操作：标签与尖括号分开，等等。我的问题很简单-如何防止VS Code破坏代码？ enter code here render（）{return（<div className =“ App”> <h1>产品管理器</ h1> <AddProduct onAdd = {this.onAdd} is.state.products.map（product => {return（< ProductItem键= {product.name} {... product} onDelete = {this.onDelete} onEditSubmit = {this.onEditSubmit} />）;}}} </ div>）;

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语言服务 ，该编辑器允许开箱即用地支持Javascript功能。 在这里了解更多 。