CODEWITHSUNDEEP
visual-studio-code
user3661407
user3661407

Reputation: 543

Saving a file on VS Code is messing up the formatting

I am working on a React project using Visual Studio Code. When I press Ctrl+S in Visual Studio Code to save the file, it removes all the JavaScript formatting or scatters all the code in the file.

Any help would be appreciated.

Upvotes: 12

Views: 47547

Answers (8)

Karma
Karma

Reputation: 595

To automatically format the file on save, In Visual Studio Code, press Control + Shift + P or Command + Shift + P (Mac) to open the command palette and type settings, select Preferences: Open User Settings option. Search for the format on save setting and check the checkbox.

You have configured prettier to format as per the default settings

Upvotes: -1

brims
brims

Reputation: 39

In my case it was due to enabled Default HTML formatter:

Push Ctrl + >, then Extentions > HTML:

Screenshot: enter image description here

Upvotes: 0

Sam
Sam

Reputation: 115

To expand on Tuxedo Joe's answer, your issue might be with your formatter extension:

Check if "Format On Save" is disabled

  1. Press Ctrl + <
  2. Search "Format On Save". Set to disabled.

Disable formatting on save in formatter.json:

  1. Press F1
  2. Enter "Formatter Config"
  3. In formatter.json set "onSave" to false
  4. Save formatter.json
  5. Restart VSCode

Upvotes: 8

Oriol Canad&#233;s
Oriol Canad&#233;s

Reputation: 11

First of all, check whether 'Format on Safe' is enabled or not.

  • Cntrl + < , (or File > Preferences > Settings)
  • Search 'Format on Safe',
  • Disable 'Format on Safe'.

If you've got it disabled, check the format text. It's probably that you've got javascript or html format. Change it to 'react' or 'javascript react' format.

  • 'Select Language Mode',
  • Search 'react',
  • Select 'react', 'javascript react' or 'typescript react'.

Upvotes: 1

Bonnie Nyambura
Bonnie Nyambura

Reputation: 341

select language mode by clicking on your bottom right hand from javascript/html to react

Upvotes: 2

Denys Denylson
Denys Denylson

Reputation: 156

You disable it "Format On Save"

  1. Press Ctrl + <
  2. Search "Format On Save" It's must be disabled. It's must be disabled

Upvotes: 14

Nilay Mehta
Nilay Mehta

Reputation: 1897

By default VS Code format on save was enabled, you can disable it by following steps:

  1. Press Ctrl+<
  2. Search for javascript edit javascript.format.enable to false.

Upvotes: 0

Tuxedo Joe
Tuxedo Joe

Reputation: 962

Try disable extensions for auto-formatting javascript code. Sometimes Beautify, JS-CSS-HTML Formatter can mess things up.

Maybe auto-formatting is on in settings as well. Check File > Preferences > Settings and look at the "User settings"-tab. Look if "editor.formatOnSave" is set to 'true', change that to 'false' in that case.

Hope that helps. If not, please send a list of your activated extensions.

Upvotes: 16

Related Questions