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

Posted 2023-02-22

【中文标题】更漂亮 + VS 代码。返回语句后在网页上打印分号 (.js)

【英文标题】：Prettier + VS Code. Printing semicolons on webpage after return statements (.js)

【发布时间】：2021-10-24 04:02:40

【问题描述】：

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 搜索上写过这个问题）。请注意我在寻找这个答案时必须过滤的讨论量，但只是为了发现人们在争论那些在每行后使用分号的人和不使用分号的人。

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

【问题讨论】：

这个问题似乎非常特定于 React/JSX，而不是一般的 VS Code 和 Prettier。比如我用过 VS Code 和 Prettier，没有用过 React 也没有用过 JSX，从来没有遇到过这个问题。

澄清一下-在您的示例中，更漂亮的是在此处添加分号return ( ... ); // <--?为什么这是一个问题？或者，您只是不喜欢分号在返回后的外观，而是喜欢其他地方的分号？

顺便说一句，如果存在一个更漂亮的配置选项，允许您在返回后始终省略分号，那么这将产生潜在的 ASI 危险，而 linter 无法帮助预防。 if (true) return x <\n> (async function g() ... )() 将被错误地解释为 if (true) return x(async function g() ... )()。

【参考方案1】：

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

由于历史原因，Prettier 有一些选择。 但我们不会添加更多。

...

现在 Prettier 已经足够成熟，我们看到它被许多组织和项目采用，研究阶段已经结束。我们有足够的信心得出结论，Prettier 达到了应该“冻结”选项集的地步

---

在您的情况下，您可以告诉 Prettier 根本不要手动格式化 return 语句，使用 ignore-comment 您可以在上面添加注释 // prettier-ignore 以告诉 Prettier 在格式化时跳过您的 return 语句。

与：

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

没有：

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

【讨论】：

请不要将产品名称格式化为代码。请参阅常见问题解答When should code formatting be used for non-code text?。

这似乎是迄今为止最正确的答案。详细地说，可以忽略整个返回块，并在块之前的 .js 中使用“//prettier-ignore”注释。但是，我还没有找到一种解决方法，可以使用 .prettierignore 文件手动编辑更漂亮的文件，以保持返回语句中的内容更漂亮，同时擦除结尾“）”后的分号。到目前为止，ESlint 似乎也无济于事。

【参考方案2】：

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

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

解决方案 #2：完全停止使用 auto-format-on-save 选项，同时尝试记住每次手动删除多余的分号，并处理潜在的错误。

解决方案 #3：使用 .prettierignore 文件或将 cmets 插入您希望 Prettier 不“触摸”的每个文件（在每个单独的功能块上方）。然后手动格式化所有退货的内部。处理同行的判断，为什么你要采取如此极端的措施来使你的方法有效，而不是仅仅退出在 js 代码中使用 semis。

就个人而言，我喜欢#1。我希望这对近期/远期的人有所帮助。谢谢莱杰伦！很好的意见 Scotty！