Skip to content

Weird Formatting for nextJs (vscode)

I am using prettier as my formater. When I read a simple JSX function it is written as

function HomePage() {
  return;
  <div>
    <h1>Hello Next.js</h1>
    <p> Welcome to the home page</p>
  </div>;
}

export default HomePage;

however, when saved the autoformatter turns it into

function HomePage() {
    return; <
    div >
        <
        h1 > Hello Next.js < /h1> <
        p > Welcome to the home page < /p> <
        /div>;
}

export default HomePage;

I have turned prettier off and turned most of my other extensions off yet this doesn’t change, I belive it is intrinsic to vscode somehow. Anyone have a fix?

Answer

On the lower right, click JavaScript, search JavaScript React, and press enter (this changes the language and prettifies based on React).

Click JavaScript:
enter image description here

Type React then press enter. enter image description here

Saving the file again should autoformat it correctly.

You can do this for all your React (Next.JS) files, or simply in the root directory of your NextJS app, open settings.json (Ctrl+Shift+P → “Open workspace settings (JSON)”) and include the following:

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