Semicolon added on each save

[ripperdoc]

Summary

A certain combination of code and modifications to that code will cause a semicolon to be added on every save, causing syntax error.

This issue was first raised on vscode here but re-directed here. VS Code system info can be found there.

Github Repository to Reproduce Issue

Link to a Github repo that can be used to reproduce the issue.

Steps To Reproduce:

1. Load the repo with VS Code and VS Code Prettier extension.
2. Ensure format on save is on, that Prettier is chosen as formatter and that the format on save mode is set to either "editor.formatOnSaveMode": "modificationsIfAvailable" or "editor.formatOnSaveMode": "modifications".
3. Open the file test_case.js (which is same as before_change.js). Copy the contents of the after_change.js onto the test_case.js file.
4. Save the file and see that a semicolon is added on last line every time you save, causing Syntax error.

Expected result

No invalid semicolons added.

Additional information

This only happens on the two mentioned formatOnSaveMode modes. If the format on save is changed to "editor.formatOnSaveMode": "file" the error doesn't appear. So it seems to be an interplay between the way VS Code formats only the diffing parts (the diff is compared with what's in the Git repo, see Test commit in the reproduction repo). The error doesn't appear if there is no Git history to diff to.

Extension bisect was used to find that this error appears only with Prettier.

VS Code Version: Code 1.66.0 (https://github.com/microsoft/vscode/commit/e18005f0f1b33c29e81d732535d8c0e47cafb0b5, 2022-03-30T05:50:04.419

Prettier Extension Version: 9.5.0

OS and version: Darwin x64 18.7.0

Prettier Log Output

["INFO" - 4:05:20 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 4:05:20 PM] Extension Version: 9.5.0.
["INFO" - 4:05:36 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:36 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:36 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:36 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:36 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 130,
  "rangeStart": 39
}
["INFO" - 4:05:36 PM] Formatting completed in 0.06ms.
["INFO" - 4:05:36 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:36 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:36 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:36 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:36 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 313,
  "rangeStart": 313
}
["INFO" - 4:05:36 PM] Formatting completed in 0.007ms.
["INFO" - 4:05:36 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:36 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:36 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:36 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:36 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 611,
  "rangeStart": 501
}
["INFO" - 4:05:36 PM] Formatting completed in 0.028ms.
["INFO" - 4:05:36 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:36 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:36 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:36 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:36 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 313,
  "rangeStart": 39
}
["INFO" - 4:05:36 PM] Formatting completed in 0.008ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 130,
  "rangeStart": 39
}
["INFO" - 4:05:39 PM] Formatting completed in 0.009ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 313,
  "rangeStart": 313
}
["INFO" - 4:05:39 PM] Formatting completed in 0.006ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 611,
  "rangeStart": 501
}
["INFO" - 4:05:39 PM] Formatting completed in 0.012ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 795,
  "rangeStart": 792
}
["INFO" - 4:05:39 PM] Formatting completed in 0.008ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 313,
  "rangeStart": 39
}
["INFO" - 4:05:39 PM] Formatting completed in 0.008ms.
["INFO" - 4:05:39 PM] Formatting file:///Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js
["INFO" - 4:05:39 PM] Using ignore file (if present) at /Users/martin/dev/src/repro-vscode-prettier-semicolon/.prettierignore
["INFO" - 4:05:39 PM] File Info:
{
  "ignored": false,
  "inferredParser": "babel"
}
["INFO" - 4:05:39 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:05:39 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 120,
  "proseWrap": "always",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/martin/dev/src/repro-vscode-prettier-semicolon/test_case.js",
  "parser": "babel",
  "rangeEnd": 795,
  "rangeStart": 39
}
["INFO" - 4:05:39 PM] Formatting completed in 0.008ms.

[darzu]

I believe I'm encountering the same problem:

[darzu]

I'm pretty suspicious of this commit: https://github.com/prettier/prettier-vscode/commit/be790ca13b85b26196340ce2a89a1f8a47545605

Indeed, if I change my "on save" mode to "whole file" instead of "modifications", everything works again, no extra semi colon.

[rotu]

I'm pretty suspicious of this commit: be790ca

Indeed, if I change my "on save" mode to "whole file" instead of "modifications", everything works again, no extra semi colon.

So what that commit does is reports to VS Code just the changed portion of the file, but it shouldn’t cause this sort of problem.

i’m guessing the issue is this or similar: https://github.com/prettier/prettier/issues/12540

[devinm-hrbl]

Is this still an issue? I've had to disable prettier entirely because it's adding needless semicolons to my work and causing the compiler to break on every save.

[rotu]

It's a bug in Prettier itself. Here it is reproduced in the Prettier playground.

[rotu]

This is NOT fixed by https://github.com/prettier/prettier/pull/12563. I opened a new issue here: https://github.com/prettier/prettier/issues/12964

[ntotten]

This is an issue or feature request for the Prettier library itself rather than the VS Code extension for prettier. Please open an issue at https://github.com/prettier/prettier.

[rotu]

This is an issue or feature request for the Prettier library itself rather than the VS Code extension for prettier. Please open an issue at https://github.com/prettier/prettier.

Isolated issue already open at https://github.com/prettier/prettier/issues/12964

[medmin]

any news ? This is annoying.

[supramaxis]

one thing I noted is, when i remove return from this code {aniList.map(aniList => { return <Search aniList={aniList} key={aniList.id} /> })}

it adds a semicolon like this

{aniList.map(aniList => { ;<Search aniList={aniList} key={aniList.id} /> })}

I don't know if this is intended or a bug

[robertocinetto]

one thing I noted is, when i remove return from this code {aniList.map(aniList => { return <Search aniList={aniList} key={aniList.id} /> })}

it adds a semicolon like this

{aniList.map(aniList => { ;<Search aniList={aniList} key={aniList.id} /> })}

I don't know if this is intended or a bug

I confirm I see the same behavior. Adding the return seems to prevent the semicolon from being added but it ruins the code cleaning purpose of the syntax

[jmadsenccri]

I am still seeing this issue as well. Adds a semicolon after every save to the end of my react component.

export const MyComponent = () => {
    return (
        <div>
        ...
        </div>
    );
};;;;;;

[jmadsenccri]

Worth mentioning that I have "editor.formatOnSaveMode": "modifications" and the line with the semicolons being added has not been modified.

[rotu]

@jmadsenccri, @robertocinetto see if you can reproduce it in the Prettier Playground using the range option.

[robertocinetto]

@rotu yes I can replicate it. Please check this in this Prettier Playground

The issue happens with the --no-semi option turned on.

[akshgods]

same issue

[itwondersteam]

anyway to update the prettier used to latest code? main repo is updated with the fix.

[rotu]

anyway to update the prettier used to latest code? main repo is updated with the fix.

I think npm install -g prettier@next should do it. You may also need to update the path in vscode settings.

[appsilva]

I'm getting this issue now and then (haven't figured out the pattern yet), primarily when I comment code inside a functional component or inside the JSX block. Usually, as soon as I remove the commented code, it stops adding semicolons, but not always.

[demetriad]

Very, very annoying. Changed "editor.formatOnSaveMode to file.

[VRedondo]

Why is this closed?

[demetriad]

Why is this closed?

[rotu]

Now that it’s fixed in prettier v3, it’s waiting on this: https://github.com/prettier/prettier-vscode/issues/2762

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.