Typescript: Reformat ternary operator

[mjbvz]

_From @lijunray on March 6, 2017 22:4_

• VSCode Version: 1.9.1
• OS Version: MacOS 10.12.3

Steps to Reproduce:

The default reformatting for ternary operator is working unexpectedly.

What I want:

After Reformatting:

How can I config the reformatting so that it works as I expect?

_Copied from original issue: Microsoft/vscode#22110_

[mjbvz]

Example code:

const test = (a) => (
    a === '1' ? (
        10 
    ) : (
        12
    )
)

Format request:

[Trace - 2:09:16 PM] Sending request: format (187). Response expected: yes. Current queue length: 0
Arguments: {
    "file": "untitled:Untitled-6",
    "line": 1,
    "offset": 1,
    "endLine": 7,
    "endOffset": 2
}
[Trace - 2:09:16 PM] Response received: format (187). Request took 3 ms. Success: true 
Result: [
    {
        "start": {
            "line": 3,
            "offset": 5
        },
        "end": {
            "line": 3,
            "offset": 6
        },
        "newText": ""
    },
    {
        "start": {
            "line": 5,
            "offset": 1
        },
        "end": {
            "line": 5,
            "offset": 3
        },
        "newText": "\t\t\t"
    },
    {
        "start": {
            "line": 6,
            "offset": 1
        },
        "end": {
            "line": 6,
            "offset": 2
        },
        "newText": "\t\t"
    }
]

[jamesst20]

This bug is still present as of 1.17.2 (latest version)

[hipstersmoothie]

I def still see this bug

[reujab]

I've discovered a slightly less ugly workaround by using two parentheses:

const test = (a) => (
    a === '1' ? (
        10 
    ) : ((
        12
    ))
)

I hope to see this fixed soon.

[ranisalt]

Still broken

[marnixhoh]

Still broken... I assume given how old this issue is that it will never get fixed? :(

[jamesst20]

Yeah.. I don't get how Microsoft think. TypeScript is their own technogy and so is VSCode.. it's been 3 years soon.

[isaacalves]

What is everyone doing in regards to this?

• disable formatOnSave entirely for TypeScript files?
• refactor ternary operators and use something else?
• live with the pain of having to deal with unwanted automatic changes in formatting (for example, committing these changes by mistake and then having to fix them)?

[ranisalt]

@isaacalves prettier

[jamesst20]

@isaacalves I use WebStorm instead

[isaacalves]

I've just found out that if you have the ? of the ternary operator in a new line (instead of in the same line of the conditional), the formatting will be like this:

const test = (a) => (
    a === '1'
        ? (
            10
        ) : (
            12
        )
)

That seems to be ideal actually, and probably related to this
By the way I use prettier, and VS Code.