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

Question

On "codesandbox.io", how do I have to configure "Prettier" not to change my line breaks any longer (or maybe to deactive "Priettier" completely) ?

Also how can I deactivate a certain rule in ESLint there (in my case it's react-hooks/rules-of-hooks that I want to turn off) - a newly created ``eslintrc` file seems to be ignored in my ES201x project? Thx.

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!

Answer 2

I couldn't find a way to prevent prettier from removing line-breaks so I just turned off the on-save setting. It doesn't come up too often for me, so it's easy enough to pretty up code in an editor.

I'm hunting for a way to override the eslint rules too