如何在“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 規則