Search code examples
react-nativeformattingsavevisual-studio-code

Visual Studio Code Formatting fail on save

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.

Before save After save

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:

enter image description here

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:

pre save post save

The problem is having tags in a js file, I just don't know how to tell vscode to ignore them?

Solution

  • 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.

    enter image description here