visual-studio-code - vs code prettier - adds new line after @Input() decorator in angular

Question

I've been using prettier for near 2 years now to format my angular code. Starting last week prettier starts to insert a new line behind all angular statements with decorators like @Input(), @Output(), @ViewChild(),..

resulting in something like

@Input()
property1

@Output()
emitter

which doubles the line count and doesn't add to readability.

My prettier settings are:

  "editor.tabSize": 2,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.printWidth": 120,
  "prettier.eslintIntegration": true,

Event when I reset to default settings, this new line thing still occurs. Does anybody has suggestions? Thanks.

Answer 1

I found the following related open feature request: https://github.com/prettier/prettier/issues/1974

It looks like, for now, they do not have an option to change the behaviour...

According to Angular style guideline, it should be on one line: https://angular.io/guide/styleguide#decorate-input-and-output-properties

Answer 2

Visual Studio code prettier adds a new line to every parameter in the statement when the Print width option is a very small number eg: 80.

Please follow the steps mentioned below to overcome this problem in code formatting:

1. In Visual Studio code go to File -> Preferences -> Settings
2. Type Prettier in the search bar.
3. Navigate to the option Prettier: Print Width Fit code within this line limit
4. Modify the width option as per your need, I made it to 800 to get back everything in the same line.
5. Also, check the js same line tag option as shown the screenshot below.

Thanks hope this helps...