Search code examples
angulartypescriptwebstorm

WebStorm Code Style Templates - TypeScript


Currently based on the TypeScript code style settings in my WebStorm IDE, the Angular @Component decorator code is is being formatted as follows:

@Component({
               selector: 'my-component',
               templateUrl: 'my.component.html',
               styleUrls: ['my.component.scss']
           })
export class MyComponent implements OnInit {

What I would like is that it is formatted like this when performing an auto format:

@Component({
    selector: 'my-component',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.scss']
})
export class MyComponent implements OnInit {

However I'm failing to find the correct settings. I have the following settings on the Tabs and Indents tab under Editor > Code Style > Typescript in WebStorm Settings:

enter image description here


Solution

  • Thanks to @jonrsharpe for pointing me in the right direction, I've managed to figure this out...

    1. In WebStorm go to File > Settings, then Editor > Code Style > Typescript

    2. Click on the Wrapping and Braces tab

    3. Ensure the Method call arguments > Align when multiline checkbox is unchecked:

    enter image description here