Nx: Feature Request: use installed prettier version

[tmtron]

Expected Behavior

I'd expect nx to use the installed prettier version for formatting.
Running prettier or nx format on the command line for the same file should yield the SAME results.

Current Behavior

Nx uses a fixed internal version of prettier and ignores the installed prettier version

Failure Information (for bugs)

Steps to Reproduce

• install nx version 8.5.0
• install prettier version 1.18.2

E.g. use else in an Angular template

<div *ngIf="someBoolean; else otherTemplate">
</div>

now the following checks should yield the same result:

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

But since nx version 8.5.0 uses an older version of prettier (1.16.4), the results are inconsistent.

Other

When nx uses the installed prettier version this can avoid

• confusion: e.g. Stackoverflow: prettier vs. nx format:check
• inconsistencies fix(nx): update workspace to use prettier v1.18.2
• and we can use newer prettier versions without updating nx

Notes:

• If using the installed prettier version is not possible, then maybe nx can at least show an error/warning when the installed prettier version does not match
• The nx format docs should mention that nx ignores the installed prettier version
• It would be helpful to have an nx command to print the internal prettier version

[FrozenPandaz]

This is inconsistency is confusing and detrimental to the dev experience. Unfortunately, the team probably won't get to this anytime soon. Would someone in the community be interested in working on a fix?

[mehrad-rafigh]

Ping @FrozenPandaz. I will take a look into this today and open a PR to fix this

[tmtron]

PR #1869 does not fix the issue at all: you just updated the internal prettier version to 1.18.2..

[jdpearce]

@tmtron Sorry, you're right - the PR shouldn't have closed this issue. It's a temporary band aid for now.

[wKovacs64]

Personally, I would be very surprised if a project used my globally installed version of a tool rather than the package-local version. The current behavior is exactly what I would expect. Running prettier (globally installed) vs. running yarn prettier (or nx format:check in this case) mean different things. Is this more of a documentation opportunity rather than a code/behavior change?

Maybe I am in the minority here and checking for a globally installed version of something to take precedence over a package-local version is more conventional than I realize. If so, can someone point to a common/popular example of where this happens? Always happy to educate myself.

Thanks.

[tmtron]

@wKovacs64 : Good point!

One thing I did not explain exactly, is that our prettier version is not really installed globally, but in the project (node_modules).
So in our case, we had specified a prettier version in our package.json and were very surprised that nx does not use this version.

Is see pros for both ways:

internal prettier version:

• always produces the same results on different PCs
• updating nx will also update the used prettier version

external prettier version:

• better consistency with other tools that use the installed prettier version: e.g. IDEs, command line tools, etc.
• prettier can be updated independently of nx (so we can use newer or older versions of prettier)

I think this would be ideal

• add a config option in nx.json to let the user choose if we prefer the internal or external prettier version (default should be the current behavior)
• when nx finds an installed prettier version it should print a warning message that the installed prettier version is ignored and the nx-prettier version is used

[kylecordes]

Ah, based on that above info, I think maybe this item should be titled something more like:

“Make prettier a peerDependency instead of a dependency”

I don't know if this is a good idea or if the Nx team wants it, but it's much more plausibly good than the earlier interpretation "use the globally installed prettier" that a bunch of us immediately dismissed.

[the-ult]

Would be great if NX could use the projects prettier version.

Atm we are using prettier: 1.19.1

[email protected] /home/the_ult/dev/bereslim/bsm-ui
├─┬ @nrwl/[email protected]
│ └── [email protected] 
└── [email protected] 

(which is know for this bug: https://github.com/prettier/prettier/issues/6921)

In VsCode (and running tslint with "tslint-plugin-prettier","tslint-config-prettier")
causes

stream1$.pipe(
  withLatestFrom(stream2$),
  distinctUntilChanged(),
  debounceTime(50)
)

to be formatted to

stream1$.pipe(withLatestFrom(stream2$), distinctUntilChanged(), debounceTime(50));

But running npm run format reformats it to:

stream1$.pipe(
  withLatestFrom(stream2$),
  distinctUntilChanged(),
  debounceTime(50)
)

On the one hand this is great. But on the other it creates unexpected output. Since it differs from what happens with VSCode and Tslint (in combination with prettier).

I would expect the result of npm run format and npm run prettier to be the same.