CODEWITHSUNDEEP
typescriptvisual-studio-codeformattingangular7prettier
Ajay Verma
Ajay Verma

Reputation: 564

Import statement automatically converted to multi-line in VSCODE

My VSCode editor automatically wraps import statements into new lines on save or format document:

Before: enter image description here

After:

enter image description here

I don't want this behaviour. How to disable this rule?

I am programming in Angular 7 typescript and following extension is installed on it:

  1. Angular Essentials
  2. Prettier
  3. TSlint

Please, help me to remove this rule or behavior.

Thank you.

Upvotes: 16

Views: 17971

Answers (2)

Mike Simmonds
Mike Simmonds

Reputation: 161

You cannot disable prettier.printWidth, but you can increase the line-length until it so that it stops wrapping your imports.

You can do this by opening (or creating) a file called prettier.rc in the root dir (one above /src in an Angular project) and adding the property:

"printWidth": 250

or whatever number is required.

A word of warning: As the printWidth is a central theme of Prettier - as an opinionated formatter, what you are trying to do may not be the best option in the long-term.

For Angular project, as opposed to using Prettier consider adding new rules to tslint or even creating custom rules where required.

Upvotes: 13

Matt Bierner
Matt Bierner

Reputation: 65273

This is caused by Prettier.

I don't think you can disable this on its own (short of using a // prettier-ignore comment above the import) but you can try increasing the line length at which prettier starts wrapping with the prettier.printWidth setting

Upvotes: 8

Related Questions