TypeScript: Incorrect (potentially) indentation of function arguments spanning multiple lines

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);
    }
}

It would be best to provide a configuration so a user can choose which way to go.

This is still an open issue in VS code 1.30.1 - the TS autoformatter removes leading whitespace, even if the tslint config is:

 "rules": {
    "align": [
      true,
      "parameters",
      "arguments",
      "statements",
      "members",
      "elements"
    ],

The comments above RE “I prefer a single tab indent when continuing the parameter list on a newline” aren’t particularly useful - this is still a bug.

Maybe I am missing something, but my project has the following tslint.json file:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark": [
            "single"
        ],
        "no-console": [
            false
        ],
        "arrow-parens": false,
        "no-string-literal": false,
        "no-namespace": [
            "allow-declarations"
        ],
        "interface-name": [
            "never-prefix"
        ],
        "no-trailing-whitespace": [true, "ignore-comments"]
    },
    "rulesDirectory": []
}

And TSLint does complain about parameters not being aligned after I auto format (using default settings, I am pretty sure since I am not overriding anything with typescript.format). I know I can turn off TSLint’s rule, but I would prefer to control settings for this… I find what seems the default to not be the most readable option:

I’d like to add that the current indentation rule appear to work incorrectly when combined wth multiple nesting levels. In a naked VSCode install, auto format produces this:

this.client
      .getContinents()
      .subscribe(
      x => this.continents = x,
      e => this.errorMessage = e
      );

instead of:

this.client
      .getContinents()
      .subscribe(
          x => this.continents = x,
          e => this.errorMessage = e
      );

FWIW, we have been using prettier now for a couple of years. Really helped with this and other code formatting consistency issues across our teams/products.

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.

@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.