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

Question

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?

This problem seems pretty specific to React/JSX rather than VS Code and Prettier in general. For instance, I used VS Code and Prettier, but not React and not JSX, and have never had this problem. — Heretic Monkey, Aug 23 '21 at 21:13
To clarify - in your example, prettier is adding the semicolon here `return ( ... ); // <--`? Why is this an issue? Or, do you just not like the looks of semicolons after returns but like them everywhere else? — Scotty Jamison, Aug 23 '21 at 21:16
As an aside, if a prettier config option existed that allowed you to always omit semicolons after returns, then that would create the potential for an ASI hazard that the linter wouldn't be able to help prevent. `if (true) return x <\n> (async function g() { ... })()` would be incorrectly interpreted as `if (true) return x(async function g() { ... })()`. — Scotty Jamison, Aug 23 '21 at 21:37

score 2 · Accepted Answer · edited Aug 23 '21 at 21:18

2

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

edited Aug 23 '21 at 21:18

Heretic Monkey

11,687
7
53
122

answered Aug 23 '21 at 21:06

lejlun

4,140
2
15
31

Please don't format product names as code. See the FAQ [When should code formatting be used for non-code text?](https://meta.stackoverflow.com/q/254990/215552). – Heretic Monkey Aug 23 '21 at 21:18
This seems to be the most correct answer thus far. To elaborate, it IS possible to ignore an entire return block with a "//prettier-ignore" comment in .js immediately preceding the block. BUT, I have not found a workaround to manually edit prettier with a .prettierignore file to KEEP the contents inside the return statement prettier-fied WHILE erasing the semicolon after the ending ")". ESlint also seems to be of no help so far. – Dakota Mac Dylan Carter MacBai Aug 23 '21 at 21:43

score 2 · Answer 2 · answered Aug 23 '21 at 22:12

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!

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

2 Answers2