Search code examples
angularvisual-studio-codeprettier

Why prettier started splitting short lines?

I used prettier for Angular project in VSCode for a few months. It worked ok-ish.

Today I upgraded Angular to v11 and the moment I've started changing my ts file (in this case I was changing file with unit tests, extension .spec.ts) and one line which has 85 characters is being split from:

const tblRows = fixture.debugElement.nativeElement.querySelectorAll('table tr');

to

const tblRows =
      fixture.debugElement.nativeElement.querySelectorAll('table tr');

At the same time, a much longer line in the same file is not being split:

it('Loaded map descriptions should load names and set state for "Edit" buttons', () => {

I've started learning this more, found settings "print width", it was 80. I've changed it to 140, then to 120 - it does not make any visible difference.

enter image description here

I've checked another file, the line with 120 characters is not being split...

I've checked, prettier is used as a default formatted:

enter image description here

Please help to find the cause of this problem. Thanks!

Solution

  • I still dunno why prettier stopped working, but today I figured out how to FORCE it working.

    TBH, it's shame I could not do it earlier, the only excuse I have is that there were lots of things to learn and I was just overwhelmed.

    Anyway, today I gave it another try and googled on "vscode prettier how to define line length", which led me to https://prettier.io/docs/en/options.html. On this page, I've noticed that the recommended way to apply settings is via the configuration file, which is documented here: https://prettier.io/docs/en/configuration.html

    Upon reading the last link, I've just added ".prettierrc" file to the root of my project and added a single key so file looks as follow:

    {
  "printWidth": 120
}

    After that, prettier works like a charm.

    P.S. Hate to keep my questions unanswered ;)