Visual Studio Code Formatting fail on save

react-native formatting save visual-studio-code

18,280

Solution 1

I found out what this was by looking though the extensions. Thanks to @wgj for the hint.

Turns out it was the JS-CSS-HTML formatter. I looked through the instructions and have removed the auto save for now. I'll have to work out the specific settings for this.

It uses js-beautify so if anyone knows the settings I should be looking at would be much appreciated.

Solution 2

I had a similar problem and it turned out my ultimate culprit was...

So I simply disabled it for the workspace.

Solution 3

All my HTML format messed up in js after saving, I disable "JS-CSS-HTML Formatter" and restarted vscode, problem solved.

Solution 4

Same here, all my HTML format messed up after saving, I disable "JS-CSS-HTML Formatter" and problem solved

Solution 5

I found my solution to this problem by converting my components file extension from js to jsx. No more issues and everything is working fine.

View more solutions

18,280

Jamadan

var DarthJam = new SithNerd { Description = "My powers come from the dark side, my hackery is not pretty", PowerLevel = 90, Accuracy = "+/- 50", SpecialPowers = "React, Node, AWS", NewestPowers = "Amplify", Quotes = new [] { "I may not do things the "proper" way, but it'll work damn it!", "Who needs unit testing anyway? My code just works.", "Agile is a myth, it's only a word that covers up for cowboys.", } }

Updated on September 15, 2022

Comments

Jamadan over 1 year
I've started learning React Native.

I'm using Visual Studio Code as my editor.

I've set up the boiler plate and started the app. But whenever I change a .js file and hit save, VSCode is messing up all the formatting.

I thought I could sort this in the settings.json file but after googling for a while and playing around I can't find the correct setting.

Is this a bug or am I doing something wrong?

Setting file is default one:

UPDATE: I re-installed vscode. Then set up a basic js file with a react native tag and a html tag. I added in:
```
"editor.formatOnSave": false,
"javascript.format.enable": false
```
To my settings.json file and the problem still occurs:

The problem is having tags in a js file, I just don't know how to tell vscode to ignore them?
- jose920405 about 7 years
  
  Please add info inside settings.json file.
- Jamadan about 7 years
  
  @jose920405 updated
Jamadan about 7 years

I've tried both of these to no avail. I have noticed that formatting the file (CTRL + SHIFT + F) gives the same result as the save. See updated question
wgj about 7 years

Interesting observation about the tags. Do you have any extensions for HTML? Maybe they're being too aggressive. Also, silly thing to check for, but in your screenshots it looks like settings.json needed to be saved.
Jamadan about 7 years

Yeah I did save it. You're right, it was an extension.
Joel Malone over 6 years

This fixed the issue for me!