Question

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

这是一段代码

enter code here render（）{ 返回（产品经理< AddProduct onAdd = {this.onAdd} /> { this.state.products.map（product => { 返回（< ProductItem键= {product.name} {... product} onDelete = {this.onDelete} onEditSubmit = {this.onEditSubmit} /> ）; }） } ）;

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

Answer 1

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

Answer 2

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

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

您缺少渲染功能的右括号。
必须为相邻的JSX元素分配键或将其包装在React Fragment中。

在解决这些问题后，有效的Java脚本如下所示：

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。

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

2 个答案: