Organize Import creates whitespace that needs to be deleted manually

[jsgoupil]

TS Template added by @mjbvz

TypeScript Version: 4.1.0-dev.20200918

Search Terms

• organize imports

---

• VSCode Version: 1.49.1 (user setup)
• OS Version: Windows_NT x64 10.0.19041

I am not 100% sure what is the exact scenario how to reproduce this, but it happens 90% of the time. When I press ALT+SHIFT+O (Organize Imports), I get plenty of spacing in my imports.
The rules for organizing these imports seem to be all over the place, which one ends up on their own line? etc.
I always have to clean up manually.

These imports:

import {
    ChangeDetectionStrategy,
    Component,
    ContentChild,
    EventEmitter,
    Input,
    Output,
    TemplateRef,
    AfterViewInit,
    ChangeDetectorRef,
    HostBinding,
    ElementRef,
    ViewChild
} from '@angular/core';
import { Resource, ClickableResource } from '@models/resource';
import { newGuid } from '@utility/string';
import { DragulaService } from 'ng2-dragula';

Become:

import {
    AfterViewInit, ChangeDetectionStrategy,







    ChangeDetectorRef, Component,
    ContentChild,







    ElementRef, EventEmitter,





    HostBinding, Input,
    Output,
    TemplateRef,




    ViewChild
} from '@angular/core';
import { ClickableResource, Resource } from '@models/resource';
import { newGuid } from '@utility/string';
import { DragulaService } from 'ng2-dragula';

Video of what is happeining.
spacing-incorrect.zip

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:

• Local Imports in python considered undefined imports (#103901)
• Auto update imports on file move is extremelly slow (#102750)
• 'Add all missing imports' messes up with commas (#105214)
• Import suggestions not showing the source (only shows Auto import from '...) (#104160)
• add all missing imports with no ambiguity (#101331)

[mjbvz]

Can you share a small project that causes this. I can't reproduce it

[jsgoupil]

Try this:

import {
    ChangeDetectionStrategy,
    Component, ContentChild, EventEmitter, Input, Output, TemplateRef,
    AfterViewInit,
    ChangeDetectorRef,
    HostBinding,
    ElementRef,
    ViewChild
} from '@angular/core';
import { Resource, ClickableResource } from '@models/resource';
import { newGuid } from '@utility/string';
import { DragulaService } from 'ng2-dragula';

interface A extends ContentChild {}
interface B extends EventEmitter {}
interface C extends Input {}
interface D extends Output {}
interface E extends TemplateRef {}
interface F extends AfterViewInit {}
interface G extends ChangeDetectorRef {}
interface H extends HostBinding {}
interface I extends ElementRef {}
interface J extends Resource {}
interface L extends ClickableResource {}

@Component({
    selector: 'wm-table',
    templateUrl: 'table.component.html',
    styleUrls: ['table.component.scss'],
    providers: [DragulaService],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableComponent implements AfterViewInit {
}

[mjbvz]

Thanks @jsgoupil!

@DanielRosenwasser Can we make sure this is scheduled for TS 4.1? (I have not see other reports so far, so I don't think we want to try fixing it in a 4.0 recovery build)

[jsgoupil]

Maybe there should be something a little more predictable when it comes to either putting them all the imports on one line or putting them all on different lines? It seems quite random. Also, make sure to check how many lines end up under the last import and in order to stay consistent.

It had been happening forever, but I thought it would just get fixed one day :) Now that I'm doing major refactoring, this is happening a lot.