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

Question

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

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

Answer 1

You can easily configure the formatting behaviour of your Sandbox by adding the prettier config file in the following way:

1. Create the file .prettierrc in the root folder of the Sandbox.
2. Using the JSON syntax add the formatting rules you want to the file.

For example to change the the line wrapping which I guess annoys most of the people, set the printWidth value:

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

3. Save the file and reload the Sandobox page.

4. Next time you save any of the files the code will be formatted following the rules you had set in the .prettierrc.

Other:

• It seems to be necessary to reload the Sandbox page for the settings to take place. After re-opening it, the file .prettierrc will be shown as the UI and not file.

• To add new formatting rules, open the file .prettierrc showing as the UI and click on Open file in editor and add the rules you need.

• 这里的更漂亮配置选项的列表，你可以设置.prettierrc。

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

享受！