如何在“codesandbox.io”上配置 ESLint / Prettier 格式规则

Posted 2023-02-19

【中文标题】如何在“codesandbox.io”上配置 ESLint / Prettier 格式规则

【英文标题】：How to configure ESLint / Prettier formatting rules on "codesandbox.io"

【发布时间】：2019-06-01 22:09:06

【问题描述】：

在“codesandbox.io”上，如何配置“Prettier”不再更改我的换行符（或者完全停用“Priettier”）？

另外，我怎样才能在 ESLint 中停用某个规则（在我的情况下，我想关闭 react-hooks/rules-of-hooks） - 在我的 ES201x 项目中似乎忽略了一个新创建的“eslintrc”文件？谢谢。

【参考方案1】：

您可以通过以下方式添加prettier 配置文件来轻松配置沙盒的格式化行为：

在沙盒的根文件夹中创建文件.prettierrc。 使用 JSON 语法将您想要的 formatting rules 添加到文件中。

例如，要更改我猜会惹恼大多数人的换行，请设置 printWidth 值：

  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "printWidth": 25

保存文件并重新加载 Sandobox 页面。

下次保存任何文件时，代码将按照您在.prettierrc 中设置的规则进行格式化。

其他：

似乎需要重新加载沙盒页面才能进行设置。重新打开后，文件.prettierrc将显示为UI而不是文件。

要添加新的格式规则，请打开显示为 UI 的文件 .prettierrc，然后单击 Open file in editor 并添加您需要的规则。

这里是the list of Prettier config options，你可以在.prettierrc中设置。

要启用/禁用 Prettier 格式，请执行以下操作： Cmd + Shift + P --> 选择Preferences: Open Settings (UI) --> 搜索Editor: Format on Save --> 禁用/启用该选项。

享受吧！

【讨论】：

谢谢。无论出于何种原因，我的自定义 "printWidth": 300 总是被忽略。最后，我完全禁用了更漂亮的格式化程序；只是碍事了。

【参考方案2】：

我找不到阻止 prettier 删除换行符的方法，所以我只是关闭了保存设置。它对我来说并不经常出现，因此在编辑器中美化代码很容易。

我也在寻找一种方法来覆盖 eslint 规则

【讨论】：

太棒了！我不知道有一个选项可以在保存时禁用更漂亮。这个解决方案向我展示了这一点。

据我所知，这个选项已经不存在了。

@Sawataytoes 您可以通过以下操作找到/禁用：Cmd + Shift + P --> 选择 Preferences: Open Settings (UI) --> 搜索 Editor: Format on Save --> 禁用/启用该选项