ReactJS formatting in VS code

Question

I am using the ReactJS tutorial here

I opened the project in VS Code ver 1.18 by using > code .. After I create a file index.js, then add the code as given:

class Square extends React.Component {
  render() {
    return (
        <button className="square">
        {/* TODO */}
        </button>
    );
  }
}

When I hit Ctrl-S to save, VS Code does the following:

class Square extends React.Component {
  render() {
    return (document.render() < button className = "square" > { /* TODO */ } <
    /button>
    );
  }
}

Note: the changes to <button>. All the code gets reformatted. I checked VS codes for formatting - it is false. Intellisense works fine. I also added jsconfig.json in my src folder using "jsx": "react". Is VS code really not usable or am I missing anything?

https://stackoverflow.com/questions/45115112/how-to-prevent-insert-spaces-in-jsx-code — Suraj Rao, Nov 26 '17 at 10:05

score 1 · Answer 1 · answered Nov 25 '17 at 22:32

I'm not sure how to change the default formatting rules in VSCode (you may not be able to).

I would suggest using Prettier as a code formatter. Works really well and gives you a lot of control over how the code is formatted. And it can tie into eslint as well.

See this article on medium for instructions for instructions on how to setup prettier and eslint.

ReactJS formatting in VS code

1 Answers1