15

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.

urosc
  • 1,938
  • 3
  • 24
  • 33
Natasha
  • 516
  • 7
  • 24

2 Answers2

11

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
}

  1. Save the file and reload the Sandobox page.

  2. 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!

enter image description here

urosc
  • 1,938
  • 3
  • 24
  • 33
  • Thanks for this. For whatever reason, my custom `"printWidth": 300` was always ignored. In the end, I disabled the prettier formatter completely; just got in the way. – Kalnode Jul 06 '21 at 12:13
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

NominalAeon
  • 593
  • 5
  • 23
  • Awesome! I didn't know there was an option to disable prettier on save. This solution showed me that. – Noitidart Feb 16 '19 at 17:23
  • As far as I can tell, this option no longer exists. – Kevin Ghadyani Jun 24 '19 at 17:37
  • @Sawataytoes you can find/disable by doing the follwoing: `Cmd + Shift + P` --> Select `Preferences: Open Settings (UI)` --> Search for `Editor: Format on Save` --> Disable/Enable the option – urosc Aug 17 '20 at 09:10