在 semi: false 时更漂亮地添加分号

Question

我有这个 jsx 的 React 组件

  {posts?.map((post) => {
    <Post key={post.id} post={post} />
  })}

当我保存文件时，prettier 会自动在前面添加一个分号。这导致组件无法呈现。

我将 semi 选项设置为 false。

Answer 1

发生这种情况是因为目前您的地图函数没有return任何东西

<Post key={post.id} post={post} /> 需要像你一样 return 由 map 编辑 return jsx inside your react component.

如果您想保留一行而不是显式 return，请将花括号更改为圆括号以 return 您的 jsx

 {posts?.map((post) => (
    <Post key={post.id} post={post} />
  ))}

与

相同

{posts?.map((post) => {
      return <Post key={post.id} post={post} />;
    })}

Prettier adding semicolon when semi: false