Double comma conflict with Prettier on ES6 imports when auto-importing

[tonix-tuft]

• VSCode Version:
  Version: 1.49.1
  Commit: 58bb7b2
  Date: 2020-09-16T23:21:17.533Z (2 days ago)
  Electron: 9.2.1
  Chrome: 83.0.4103.122
  Node.js: 12.14.1
  V8: 8.3.110.13-electron.0
  OS: Darwin x64 17.7.0

• OS Version: macOS High Sierra 10.13.6

Since Prettier version ^2.0.0, the default value for the Prettier: Trailing Comma (trailingComma) option of the Prettier VS Code extension (https://github.com/prettier/prettier-vscode) is es5:

This makes Prettier to add a trailing comma to ES6 imports as well, e.g. given this code (unsaved):

import {
  Tag1,
  Tag2,
  Tag3
} from "./some-module";

// ...

When saved (Cmd+S/Ctrl+S):

import {
  Tag1,
  Tag2,
  Tag3,
} from "./some-module";

// ...

Now, when I reference another component (let's say Tag4) in the same file containing the code above, VS Code prompts me to auto import this component too:

And when I type Enter to auto import the component this is what I end up with:

import {
  Tag1,
  Tag2,
  Tag3,, Tag4
} from "./some-module";

Tag4

// ...

VS Code adds another trailing comma after Tag3, before adding Tag4, leading to two subsequent commas and of course causing a parse error.

The expected behaviour would be for VS Code to check if the import statement already has a trailing comma, and add it only if it's missing.

For now, the only way to fix this would be to add the following config option to a .prettierrc file in the project:

{
  "trailingComma": "none"
}

This makes Prettier to not add trailing commas at all. But again, I think it would be great if VS Code would check for that trailing comma on its own before auto importing a component.

Thank you for your attention and for this IDE, I feel very comfortable to work with it!

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Extra comma added when importing missing item (#106735)

[mjbvz]

Duplicate of microsoft/TypeScript#40561. Should be fixed in VS Code insiders

[tonix-tuft]

Duplicate of microsoft/TypeScript#40561. Should be fixed in VS Code insiders

Thank you for your reply.

Should be fixed in VS Code insiders

What do you mean? Will it be fixed in the next patch/minor version of VS Code > 1.49.1? Thank you.

[mjbvz]

VS Code insiders always tracks the next VS Code version, so 1.50

[tonix-tuft]

Thank you for your reply! Will wait for the 1.50 update on VS Code.

[landonalder]

I'm still having this same issue with vscode 1.50.1 and typescript 4.0.2

[mjbvz]

This was fixed in TypeScript 4.0.3 (which is the default for VS Code 1.50)

[landonalder]

Ah, thanks Matt! I’ll update the typescript version

…

On Mon, Oct 26, 2020 at 4:10 PM Matt Bierner ***@***.***> wrote: This was fixed in TypeScript 4.0.3 (which is the default for VS Code 1.50) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#107057 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZH3LLEBYWPSARTKACL3MTSMX6X7ANCNFSM4RS5DTWQ> .