为什么 prettier 开始拆分短线？

Question

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.

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

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

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

Answer 1

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.

PS Hate to keep my questions unanswered;)