javascriptreactjsvisual-studio-codeprettierprettier-vscode

Prettier + VS Code. Printing semicolons on webpage after return statements (.js)


Prettier v8.1.0 out-of-the-box (no .prettierrc files)

I am writing in .js files. Prettier is adding semicolon after return statements. These are showing up in my development environment webpages.

--example

return (
    <div className="not-found">
      <h1>Oops...</h1>
      <h2>That page cannot be found.</h2>
      <p>
        Go back to the
        <Link href="/">
          <a>Homepage</a>
        </Link>
      </p>
    </div>
  );

I have extensively researched this, and nobody else seems to be experiencing this issue (or at least writing about it on Google Search). Please note the amount of discussions I have had to filter through looking for this answer, but only to find people arguing about those whom use semicolons after every line and those who don't.

How do I fix this without disabling semicolon auto-insertion all-together?


Solution

  • Currently there is no option to do this automatically, and according to the Prettier docs, there never will be.

    Prettier has a few options because of history. But we won’t add more of them.

    ...

    Now that Prettier is mature enough and we see it adopted by so many organizations and projects, the research phase is over. We have enough confidence to conclude that Prettier reached a point where the set of options should be “frozen”


    In your case you could tell Prettier to not format return statements at all manually, using an ignore-comment you can add the comment // prettier-ignore above to tell Prettier to skip over your return statement when formatting.

    With:

    // prettier-ignore
    return [
      "this", "that"
    ,
          "here", "there"
    ]
    

    Without:

    return ["this", "that", "here", "there"];