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

Question

我有这个 jsx 的反应组件

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

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

我将 semi 选项设置为 false。

Answer 1

发生这种情况是因为当前您的 map 函数没有返回任何内容

<Post key={post.id} post={post} />需要由 map 返回，就像您在 react 组件中返回 jsx 一样。

如果您想保留一行并且不明确返回，请将花括号更改为括号以返回您的 jsx

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

这与

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