如何防止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功能。 在這里了解更多 。