Vscode-react-native: View tag JS breaks vscode code formatting

[ggomersall]

Actual Behavior

1. File save on JS files breaks the formatting :

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Footer extends Component {
    render() {
        return ( <
            View / >

        );
    }
}

export default Footer;

Expected Behavior

1. Should be saved as:

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Footer extends Component {
    render() {
        return (
            <View />
        );
    }
}

export default Footer;

Software versions

• React-Native VS Code extension version: 0.2.5
• VSCode version: Version 1.8.1
• OS platform and version: Mac OSX 10.12.2
• NodeJS version: 6.2.0
• React Native version: 0.40.0

[MSLaguana]

Can you please clarify: Do you mean that you wrote the code in the second snippet, but when you saved it was converted to the first? Or you wrote the first and expected save to fix the formatting?

[ggomersall]

Hello,

I wrote it as the expected behaviour like this:

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Footer extends Component {
    render() {
        return (
            <View />
        );
    }
}

export default Footer;

But when i saved the file the formatting was like this:

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Footer extends Component {
    render() {
        return ( <
            View / >

        );
    }
}

export default Footer;

[y2kbug]

I suspect that you may have installed JS-CSS-HTML Formatter plug-in effects, try to remove it or disable it

[vladimir-kotikov]

@ggomersall, react-native extension doesn't performa any automatic code formatting - try to look for JS-CSS-HTML Formatter (or perhaps any other code formatting extension) in the list of installed extensions, as @y2kbug mentioned, and disable it to see if that solve the problem

[ggomersall]

That's exactly what the issue was. I was using JS-CSS-HTML Formatter extension, deleted it and now it works fine.
Thanks for the help guys

[amitdubey8888]

Thank for help

[diwakarsingh]

Thanks for the help.
I was also facing the same issue.

[a3pelawi]

It's work.
Thanks for the help. Disabled JS-CSS-HTML Formatter.

[bschwartz757]

Interesting... I uninstalled JS-CSS-HTML Formatter as suggested above, but was still getting the same behavior (which I've noticed in all the React projects I've opened in the past.) I went through and disabled all the plugins I thought could possibly matter, and it looks like the one that's still causing the issue for me is Beautify (The HookyQR one with over 1.5M downloads....) That's a bit of a pain because disabling it will probably mean none of my other Javascript files will be beautified.

[IonCaza]

@bschwartz757 have you found an alternative? I'm running into the same issue

[bschwartz757]

@IonCaza No, not yet. I haven't experimented much since posting (I don't usually work in React, just doing a tutorial) but after disabling Beautify for that workspace I still seem to get formatting ok. I would guess that's courtesy of editor configs not specific to Beautify. The plugin doesn't seem to remember that I turned it off for that workspace though so if I were to re-open a large file and hit save without remembering to disable it first I'd have to go through and manually fix everything - not exactly an ideal "developer experience" (much as I cringe at using that term.)

[neetin]

@bschwartz757 I am having the same issue. Did you find any solution? or any alternative React code formatter that does well.

[IonCaza]

No sir, I apologize for the late reply... I ended up giving up on the tech
stack.

On Fri, Mar 30, 2018 at 12:37 AM, Neetin Sharma [e-mail]
wrote:

@bschwartz757 https://github.com/bschwartz757 I am having the same
issue. Did you find any solution? or any alternative React code formatter
that does well.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/vscode-react-native/issues/381#issuecomment-377443195,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABCAvl4HYmA-txG4MHap6VUMV7LDOjEgks5tjbaGgaJpZM4LkvlT
.

[sanyamnn]

To solve this , search for "JS-CSS-HTML Formatter" and "Beautify" in your visual studio code extensions , if any of them is enabled , disable and uninstall them

[PolymathWhiz]

Try searching for prettier or beautify and disable them or any other js code formatter you have installed.

[kalpeshasuthar]

@ggomersall, react-native extension doesn't performa any automatic code formatting - try to look for JS-CSS-HTML Formatter (or perhaps any other code formatting extension) in the list of installed extensions, as @y2kbug mentioned, and disable it to see if that solve the problem

I was having same issue and solve it using this trick thanks :)

[Nahi3an]

I suspect that you may have installed JS-CSS-HTML Formatter plug-in effects, try to remove it or disable it

Thank you It worked <3

[nayakakashjit]

I did all the steps but could not solve

[wntdhananjay]

thanks for helps

[ahmedsgit]

uninstall JS-CSS-HTML Formatter , beautify or any other formatting extension. Use only Prettier

[Nrusingha]

I follow all the steps but it did not work.