Incorrect (potentially) indentation of function arguments spanning multiple lines

[waderyan]

From @nomaed on October 14, 2016 10:40

• VSCode Version: 1.6.1
• OS Version: macOS Sierra 10.12

Steps to Reproduce:

• Write a function (or a method) with several arguments (I did it with JavaScript and TypeScript files, but I believe any would work).

function myFunc(arg1, arg2, arg3, ...args) {
}

• Split arguments to several lines by hitting Enter before arguments

function myFunc(arg1,
arg2,
arg3,
...args) {
}

Auto-formatting produces this result:

function myFunc(arg1,
    arg2,
    arg3,
    ...args) {
}

I would expect to see this result instead though:

function myFunc(arg1,
                arg2,
                arg3,
                ...args) {
}

Also, when manually formatting the arguments to appear in the same column (note: this is also the default/recommended setting in tslint and maybe other linters), then further lines will start with wrong indentation:

function myFunc(arg1,
                arg2,
                arg3,
                ...args) {
                    console.log('huh...');
}

Copied from original issue: microsoft/vscode#13748

[waderyan]

@nomaed thank you for opening this issue.

@dbaeumer can I get some other eyes on this? I think I actually prefer this result with auto formatting:

function myFunc(arg1,
    arg2,
    arg3,
    ...args) {
}

But that might simply be my preference. Possibly there should be an option for OP to customize the auto formatting for his preference?

[waderyan]

@bowdenk7 if you have a thought on this too that would be helpful. Don't know if this has come up much in your user studies...

[waderyan]

From @dbaeumer on October 14, 2016 15:4

@waderyan I prefer yours as well. Agree that this should be a setting in the TS formatter. The good thing is if you formatted it once it will leave it as is.

[waderyan]

From @nomaed on October 14, 2016 15:8

It definitely shouldn't be the only option. I personally grew to like it a lot (it's the default setting in JetBrains' IDEs) and since it's a default for TSLint (https://github.com/palantir/tslint/blob/master/src/rules/alignRule.ts), I am thinking that it's not uncommon to use this setting.

[waderyan]

Moving this to TS language service to address adding the setting. Thank you for your feedback @nomaed. It is valued very highly.

[MichalLytek]

I have a related question about good practice in formatting: what about the returned type? It should be indent, in next line, or how?

class Example {
    public method(arg1: string,
                  arg2: number,
                  arg3: boolean)
                  : ReturnType {
        const result = doSomething();
        return new ReturnType(result);
    }
}

or maybe:

public method(arg1: string,
              arg2: number
              ): ReturnType {
    ...
}

[nomaed]

@19majkel94 Option no. 2 probably.
Return type (at last the semicolon) is immediately following the args closing parenthesis, so to make it appear in a new line, the closing parenthesis should be moved down too.

I think that these should all be valid:

/**
* #1
 * If first arg is on the same line as the function decl/name,
 * all args are lined up with the first one.
 */
function funcName(arg1: string,
─────────────────┤arg2: number,
─────────────────┤arg3: any): ReturnType {
⇢   console.log('Hello world');
}

/**
 * #2
 * If first arg is newlined, it is double-indented so it remains 1 indent 
 * level in front of impl., and all args are lined up.
 */
function funcName(
⇢   ⇢   arg1: string,
⇢   ⇢   arg2: number,
⇢   ⇢   arg3: any): ReturnType {
⇢   console.log('Hello world');
}

/**
 * #3
 * In case first arg is newlined like in #2, allow closing parenthesis
 * to be newlined too (outdent once) with return type following it
 */
function funcName(
⇢   ⇢   arg1: string,
⇢   ⇢   arg2: number,
⇢   ⇢   arg3: any
⇢   ): ReturnType {
⇢   console.log('Hello world');
}

The reason why I don't like the way it is now is that the argument aren't aligned and it's decreasing readability.

[MichalLytek]

In case no. 3, the return type indent once is decreasing readability. So I prefer my option no. 2 but it's
sensitive to function rename - we have to indent all again.

[rozzzly]

My prefered style for large method/function signatures:

class Example {
    public method(
        arg1: string,
        arg2: number,
        arg3: boolean
    ): ReturnType {
        const result = doSomething();
        return new ReturnType(result);
    }
}