Typescript: Refactor removes whitespace

[markusjohnsson]

Refactors, like 'move to a new file', butchers formatting by removing empty lines in code. As refactors are meant to improve code style and structure, I should not manually have to reformat my code after I've applied one.

TypeScript Version: 3.1.0-dev.20180922

Search Terms:
Move to new file removes newlines, refactor removes newlines, removes whitespace, removes trivia

Code

function example() {
    thisIsAnExampleWithSomeSpace();

    anotherCallToSomeFunctionHere();

    evenMoreStatementsLater();
}

Select function and 'move to a new file' in VS Code:
Expected behavior:
Same formatting:

export function example() {
    thisIsAnExampleWithSomeSpace();

    anotherCallToSomeFunctionHere();

    evenMoreStatementsLater();
}

Actual behavior:
Blank lines removed:

export function example() {
    thisIsAnExampleWithSomeSpace();
    anotherCallToSomeFunctionHere();
    evenMoreStatementsLater();
}

Related Issues:
Perhaps related to #843

[markusjohnsson]

This really is super annoying, so much that the much awaited "Move to new file" is practically useless - I prefer cutting & pasting manually to preserve formatting..

How large of a job is this to fix? Is it something that is doable for a one-time-contributor or would one need a deep understanding of parser, AST and emitter?

[cinderblock]

An adequate shortcut I've found is to add two simple steps:

1. Select function you want to move, Copy
2. Use "Move to a new file" feature. (Brings you to the new file as well)
3. Select new function, Paste

This leaves the minor problem of whitespace preservation around imports.

[DanielRosenwasser]

@RyanCavanaugh spoke offline with @mjbvz and I - while this doesn't seem like the desired behavior, this is going to involve a larger amount of work than it might seem since we're not equipped in our current refactoring machinery.

[markusjohnsson]

@DanielRosenwasser does that mean that it's not going to happen?

It really is too bad, since "the editor understanding and working with the code" is one of the selling points for typescript over javascript, at least for me. Great refactoring support is where typescript could really shine.

[DanielRosenwasser]

No, I didn't mean to imply it wasn't going to happen, just that it's not happening in 3.8.

[markusjohnsson]

I want to note that refactors not only removes blank lines, but alters other whitespace as well:

Before:

function Foo({ label }: { label: string }) {
    return (
        <div
            id="time-label-top-container">
            <div
                id="time-label-container"
                style={{
                    marginRight: '10px',
                    border: 'none',
                }}
            >
                <div className="currentTimeLabel">{label}</div>
            </div>
        </div>
    );
}

After (move to a new file):

import React from "react";
function Foo({ label }: {
    label: string;
}) {
    return (<div id="time-label-top-container">
        <div id="time-label-container" style={{
            marginRight: '10px',
            border: 'none',
        }}>
            <div className="currentTimeLabel">{label}</div>
        </div>
    </div>);
}

If I'm reading the proposed fix correctly, it will only provide newlines. Other formatting will still get lost.

[andrewbranch]

That is a correct-ish reading of the fix, but the example you just provided is really all about newlines. That said, this example works _horribly_ in my branch, exposing some bugs in the implementation, so I’ll incorporate this as a test case.

[markusjohnsson]

@andrewbranch Yeah, kind of realized after I posted, but there is also indentation and the added newlines in the function parameters. Glad I could provide a test case. Is it possible for me to try your branch with VS Code refactorings?

[minestarks]

FYI @jessetrinity working on a related class of bugs

[AbdelrahmanHafez]

if (true) console.log('On the same line');

becomes

if (true)
  console.log('On the same line');

Does this PR handle this issue? I used TS 3.9 as @mjbvz recommended in this comment, the empty lines issue is solved, but the moving to the next line isn't.

Should I create a new issue with this?

[DanielRosenwasser]

Please try out https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next and file a separate issue with repro steps if that doesn't fix it.