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

Question

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

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

Answer 1

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

1. 在 Sandbox 的根文件夹中创建文件.prettierrc 。
2. 使用 JSON 语法将您想要的格式规则添加到文件中。

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

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

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

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

其他：

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

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

• 这是您可以在.prettierrc设置的.prettierrc配置选项列表。

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

享受！

Answer 2

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

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