更漂亮 + VS 代码。在 return 语句后在网页上打印分号 (.js)

Question

开箱即用的 Prettier v8.1.0（无 .prettierrc 个文件）

我正在 .js 文件中写入。 Prettier 在 return 语句后添加分号。这些显示在我的开发环境网页中。

--例子

return (
    <div className="not-found">
      <h1>Oops...</h1>
      <h2>That page cannot be found.</h2>
      <p>
        Go back to the
        <Link href="/">
          <a>Homepage</a>
        </Link>
      </p>
    </div>
  );

我对此进行了广泛的研究，似乎没有其他人遇到过这个问题（或者至少在 Google 搜索上写过）。请注意，我不得不通过寻找此答案来过滤大量讨论，但结果却发现人们在争论那些在每行后使用分号和不使用分号的人。

如何在不禁用分号自动插入的情况下解决此问题？

Answer 1

目前没有自动执行此操作的选项，根据 Prettier docs，永远不会有。

Prettier has a few options because of history. But we won’t add more of them.

...

Now that Prettier is mature enough and we see it adopted by so many organizations and projects, the research phase is over. We have enough confidence to conclude that Prettier reached a point where the set of options should be “frozen”

在你的情况下，你可以告诉 Prettier 不要手动格式化 return 语句，使用 ignore-comment 你可以添加上面的评论 // prettier-ignore 告诉 Prettier 跳过你的return格式化时的声明。

搭配：

// prettier-ignore
return [
  "this", "that"
,
      "here", "there"
]

没有:

return ["this", "that", "here", "there"];

Answer 2

Lejlun 的回答是正确的（并且标记为正确），但没有解决问题。如果不完全禁用分号自动插入，就无法解决此问题。期间.

解决方案 #1：将 javascript 文件中的分号与 Prettier 一起丢弃（通过将“semi”: 设置为 false，在根目录中使用 .prettierrc.xyz 配置文件）。拥抱没有分号“噪音”的代码看起来更干净的方式。

解决方案 #2：完全停止使用保存时自动格式化选项，同时还要记住每次都手动删除多余的分号，并处理潜在的错误。

解决方案 #3：使用 .prettierignore 文件或将注释插入到每个文件（在每个单独的功能块上方）中，您不希望 Prettier 'touch'。然后手动格式化所有 returns' 内部。处理同行对你为什么采取如此极端的措施来使你的方法起作用而不是仅仅在 js 代码中使用 semis 的判断。

就个人而言，我喜欢#1。我希望这对 near/far 未来的某个人有所帮助。谢谢乐伦！以及漂亮的输入 Scotty！

更漂亮 + VS 代码。在 return 语句后在网页上打印分号 (.js)

Prettier + VS Code. Printing semicolons on webpage after return statements (.js)

javascript

reactjs

visual-studio-code

prettier

prettier-vscode