How to configure ESLint / Prettier formatting rules on "codesandbox.io"

Question

On codesandbox.io, how can I configure Prettier so that it doesn't change the line breaks?

Also, how can I deactivate specific ESLint rules. For example, I would like to turn off the react-hooks/rules-of-hooks rule. A newly created eslintrc file seems to be ignored in my ES201x project.

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.

• Here is the list of Prettier config options you can set in .prettierrc.

• To enable/disable Prettier formatting do following: Cmd + Shift + P --> Select Preferences: Open Settings (UI) --> Search for Editor: Format on Save --> Disable/Enable the option .

Enjoy!