prettier vs. nx format:check

Question

nx format:check expects no colon after else in html files:

<div *ngIf="isValid; else errors">

but when I run prettier in the same project it expects a colon after else

<div *ngIf="isValid; else: errors">

• why is this different?
  I thought that nx format:check just executes prettier in my root directory?
• Is there some config-option that I am missing?

More info:

In a subdirectory which includes an angular template, I can verify the issue:

$ nx format:check --files login.component.html

$ prettier -c login.component.html
Checking formatting...
login.component.html
Code style issues found in the above file(s). Forgot to run Prettier?

Note, that nx does not report an issue, but prettier does: here are the versions:

$ nx --version
8.5.0
$ prettier --version
1.18.2

Unchartered

Answer 1

Yes that's right, nx format:check uses prettier under the hood. However, the inconsistency that you are seeing here could be due to two different Prettier versions.

In my case, I was using prettier-vscode plugin which was using prettier version 1.8 which was different from the prettier version being used with nx lib.

There is a related issue for nx: Feature Request: use installed prettier version
The prettier version of nx can be found in their package.json

Nipper

I've updated the question with more info and the versions. I don't even use an IDE or plugin: just execute nx and prettier in the same directory to check the same file. – Unchartered

@Unchartered Exactly what I thought, So current version of nx (8.5) does not use latest prettier, instead it uses prettier version 1.16.4, so I if you downgrade your prettier to be 1.16.4 until nrwl releases new version using prettier 1.18.2. I already did a PR for it and it is merged to master now but not released, You can watch it here: github.com/nrwl/nx/pull/1809. – Nipper

so nx has some fixed prettier version that it is built with and does not just use the installed prettier version? Wo we must always make sure to keep the nx and prettier versions on our system in sync? – Unchartered

Kind of. I think there was already an issue about this, where the proposal was to make nx use prettier from project if there is one. But for now yes we will have to manually keep both prettier versions in sync. – Nipper

I also thought that nx will just use the installed prettier version. Do you have a link to the proposal? Otherwise I'll file a new feature-request issue for nx. Maybe they can at least show a warning in that case or mention it in the docs. – Unchartered

unfortunately, I do not. Cann you please post a link here when you have filled new issue, so that anyone else that hits this issue can also track that issue on github – Nipper

Let us continue this discussion in chat. – Nipper

I've filed an issue for nx: Feature Request: use installed prettier version – Unchartered

This sort of issue is best avoided by not globally installing tools like prettier. You can easily use the locally installed version by running npx prettier, so you don't actually need the global one, even for manual use on the command line. You should install the dependency in every project where you use prettier anyway, so if it helps you could always add alias prettier="npx prettier" – Respectful

@Thor84no in my case prettier was not installed globally - the issue was that the nx did not use the prettier version specified in package.json, but instead used it's own (hardcoded) version – Unchartered