Search code examples
prettiernrwl

prettier vs. nx format:check


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

Solution

  • 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