I am doing tutorial about full stack web development with javascript and react on the front. I have very very litle knowledge of html and no knowledge on javascript and react beforehand.
I have recurring problem where I write code to .js file, but indentation seems to be messed up and causes things to not work properly. Otherwise code is perfect.
Here is example of what I wrote (that didin't work).
import React, { Component } from 'react';
export default class RoomJoinPage extends Component {
constructor(props) {
super(props);
}
render() {
return <p>This is the Join Room page</p>
}
}
Here is example of working code:
import React, { Component } from "react";
export default class RoomJoinPage extends Component {
constructor(props) {
super(props);
}
render() {
return <p>This is the room join page</p>;
}
}
I get that indentation has to be done properly, but why vscode does not indent these correct automatically? Am I to learn writing code in .js files so that I first backspace improper indent and then double tap space to make it right? What am I missing here?
EDIT:
It was wrong for me to asume that indentation was problem. I did not notice that return statement should have ; at the end.
Usually, JavaScript does not care about indentation, so your code will still work. However, it will become less readable.
There are a few fixes, though.
One of them is to use Prettier. To install it, go to the Extensions tab, and search for "Prettier". Install the first result.
It will ask you what your default code formatter should be. Select Prettier. Your code should be formatted every time you save the file!
If you are using .jsx, you may have to follow the steps below.
The file extension .jsx is different from .js. This may make Prettier confused of whether it should format JSX or not.
To change it, go to Settings, then search for Prettier. Add the .jsx file extension, and you're done!
If you, however, want to use the built-in formatter, you can check it here!
These solutions should help get your JavaScript and JSX get formatted!