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.

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?

回答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.

回答2:

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

So I simply disabled it for the workspace.

回答3:

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.

回答4:

Disable js-css-html formatter.
if you are using prettier and beautify together, override the setting as :

"beautify.ignore": [
        "**/*.js",
        "**/*.jsx"
    ]

回答5:

You should search for "format" in settings.json. You'll find a whole lot of TypeScript/JavaScript formatting tweaks in there, but the one that stands out to me is:

  // Defines space handling after opening and before closing non empty brackets.
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false

Alternative, you're not a fan of formatting at all, you can turn it off entirely:

  // Enable/disable default JavaScript formatter.
  "javascript.format.enable": true,

However, a lot of my formatting options come from language server extensions, so if you're using one for React Native specifically, be sure to check the attributes in settings.json, or the docs to see if there are any attributes you can add.

回答6:

Use Prettier Code Formatter instead of Beautify. Works perfectly for language mode Babel JavaScript

回答7:

Add this on settings.json file. Whether you are using any extension or not, use this code. It works fine for me:

enter image description here

回答8:

I have tried all methods but the problem is solved completely by this:

Open setting.json

"files.associations": {
  "*.js": "javascriptreact"
}

Add above lines and press save the problem will solve

来源：https://stackoverflow.com/questions/43149100/visual-studio-code-formatting-fail-on-save

标签

react-native

formatting

save

visual-studio-code