Auto Import adds extra comma to import statements with trailing commas

[cadin]

TS Template added by @mjbvz

TypeScript Version: 4.0.2

Search Terms

• auto import

---

• VSCode Version: 1.49.0
• OS Version: macOS 10.15.6

Steps to Reproduce:

1. Import multiple files from the same package, listing files on separate lines with trailing commas.
   Eg:

import {  
    Foo,  
    Bar,  
    Baz,  
} from "myPackage" 

2. Invoke an auto import from the same package by typing it's name (eg: "Qux")

Results:
The new file is added to the import statement with an extra comma:

import {  
    Foo,  
    Bar,  
    Baz,, Qux  
} from "myPackage" 

Expected Results:
The import should be added on a new line with trailing comma:

import {  
    Foo,  
    Bar,  
    Baz,
    Qux,  
} from "myPackage" 

The proper behavior occurs in version 1.48.2

Does this issue occur when all extensions are disabled?: Yes

[vscodebot]

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

• 'Add all missing imports' messes up with commas (#105214)

[mjbvz]

Self contained example:

x.ts

export const a = 123;
export const b = 123;
export const c = 123;

index.ts

import {
    b,
    a,
} from './x'

console.log(c) // trigger import here

[DanielRosenwasser]

@andrewbranch does #40303 fix this for the 4.0 branch?

[andrewbranch]

Yes

[andrewbranch]

Well, I’m confused as to how this was happening on the nightly for the 11th. I’ll investigate, but this seems to be the exact same issue.

[andrewbranch]

Yeah, I can't reproduce this with the nightly mentioned or with current master. @mjbvz was your repro using a nightly TS build?

[swashata]

Hi,

My TS version is 4.0.2 and I can confirm this happening.

[mjbvz]

@andrewbranch Actually this looks fixed in nightly; I must have tested it incorrectly. Can we make sure this fix is included in the next 4.0 recovery?

[Shaker-Hamdi]

I have the same issue.

[andrewbranch]

@mjbvz it’s already in the release branch: #40303

[leidegre]

@mjbvz it’s already in the release branch: #40303

OK, what does that mean? Will it get fixed in the next minor of TypeScript?

[andrewbranch]

It will be in the next patch release, 4.0.3.

[tonix-tuft]

I am still facing this issue too, how can I fix it in my VS Code? -> microsoft/vscode#107057

[mlewando]

I still have this problem :(

I installed globally the newest typescript (4.1.3) and set typescript.tsdk to my version. I have VS Code 1.52.1. Do I need to do anything more to have this fixed?

[andrewbranch]

@mlewando does the TS version in the bottom-right match what you set?

If so, please post exact steps for how to reproduce.

[mlewando]

Hi @andrewbranch I have a JavaScript project. I think that VS Code uses typescript under the hood anyway to autocomplete imports, but I don't have typescript version in my status bar:

the exact steps to reproduce for not is rather "it happens from time to time", but if it is (or may be) related, I will try to identify the exact reproduction.

[andrewbranch]

In that case, when you have a JS file open, open the command palette and search for "Select TypeScript Version." Select it and make sure 4.1.3 is selected:

[mlewando]

it is 4.1.3

so, I'll try to identify when exactly it happens and hopefully tomorrow I'll post working reproduction

[andrewbranch]

Thanks! The text of all your imports before and after the auto import should be enough to reproduce.

[mlewando]

So, I created a simple reproduction without a problem, and then I tried to reproduce it on the simple example with all extensions disabled - I failed. So I started to disable extensions until I identified the problematic one: exports autocomplete (https://github.com/capaj/vscode-exports-autocomplete)
This extension is part of React Food Truck, but it became deprecated some time ago, which is even noted in burkeholland/react-food-truck#6.

To sum up: for me, problem is solved :) thank you for attention :)