CODEWITHSUNDEEP
javascriptreactjsvisual-studio-codeprettierprettier-vscode
Dakota Mac Dylan Carter MacBai
Dakota Mac Dylan Carter MacBai

Reputation: 59

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?

Upvotes: 1

Views: 1329

Answers (2)

Dakota Mac Dylan Carter MacBai
Dakota Mac Dylan Carter MacBai

Reputation: 59

  1. Lejlun's answer is correct (and marked as so), but didn't solve the problem. You do not fix this problem without disabling semicolon auto-insertion all-together. Period.

Solution #1: Ditch the semicolons in javascript files all-together with Prettier (using a .prettierrc.xyz config file in root by setting "semi": to false). Enbrace the way code looks cleaner without all the semicolon "noise".

Solution #2: Stop using the auto-format-on-save option all-together, whilst also trying to remember to remove the extra semicolon manually every single time, and deal with potential bugs.

Solution #3: Use a .prettierignore file or insert comments into every file (above each individual function block) where you want Prettier to not 'touch'. Then format all of the returns' inners manually. Deal with judgement by peers as to why you go to such extreme measures to make your method work instead of just quitting using semis in js code.

Personally, I like #1. I hope this helps someone in the near/far future. Thanks Lejlun! And nice input Scotty!

Upvotes: 2

lejlun
lejlun

Reputation: 4419

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"];

Upvotes: 2

Related Questions