1809497 - Separate out prettier and ESLint to run as different processes

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task, P2)

Description

[Mark Banner (:standard8)]

Running ESLint with prettier integrated as part of it causes several issues:

• eslint-plugin-html and prettier conflict if prettier is enabled on html files, causing inconsistent formatting.
• We are unable to run separate formatting only linters (xref bug 1803229).
• Prettier itself recommends against integrating the two. Quoting:

You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in your face about it!
They are slower than running Prettier directly.
They’re yet one layer of indirection where things may break.

Hence I think we should work towards separating these. From a configuration perspective it should be reasonably simple, the biggest part will be getting the commands hooked up right so as not to break workflows.

Comment 1

[Mark Banner (:standard8)]

Actually, I think this bug should only separate the config & make ESLint and prettier run as separate commands behind the scenes - so that everything is the same from a developer's perspective.

Bug 1807711 should look at whatever ./mach <command> changes are necessary for what is required there.

Comment 2

[Mark Banner (:standard8)]

One downside here, is that prettier only supports one ignore file (the .prettierignore), and not importing from other files. Something like that would require changes in prettier. That's currently stalled, but maybe we can cope with merging the files for now, and maybe see if we can help that move forward.

Comment 3

[Mark Banner (:standard8)]

Attachment: Bug 1809497 - Separate out prettier and ESLint to run as different processes. r?#linter-reviewers!

This is enough to allow ESLint and Prettier to be run as different processes within the same lint command.
It does not fix all the failures with those two separate - that will be handled in follow-up bugs.

Comment 4

[Phabricator Automation]

Comment on attachment 9326034 [details]
Bug 1809497 - Separate out prettier and ESLint to run as different processes. r?#linter-reviewers!

Revision D174133 was moved to bug 1825507. Setting attachment 9326034 [details] to obsolete.

Comment 5

[Mark Banner (:standard8)]

Attachment: Bug 1809497 - Separate running of Prettier from ESLint completely. r?#linter-reviewers!

Depends on D174762

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/42c2bba671df
Separate running of Prettier from ESLint completely. r=linter-reviewers,devtools-reviewers,andi

Comment 7

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/42c2bba671df

Comment 8

[Magnus Melin [:mkmelin]]

It seems now if I try to use await in a non-async function I get an error message from prettier: SyntaxError: Unexpected token, expected ";"
IIRC earlier it told you pretty clearly "await can only be used in async functions" or something like this.

Are they run in the right order? Or are there ways to improve this?

Comment 9

[Mark Banner (:standard8)]

(In reply to Magnus Melin [:mkmelin] from comment #8)

It seems now if I try to use await in a non-async function I get an error message from prettier: SyntaxError: Unexpected token, expected ";"
IIRC earlier it told you pretty clearly "await can only be used in async functions" or something like this.

Are they run in the right order? Or are there ways to improve this?

ESlint is always run before Prettier when run via ./mach lint.

My guess would be that you're running Prettier on the file, but not ESLint. Maybe it is ignored in comm-central's .eslintignore but hasn't been added to .prettierignore? One of the later follow-ups is to fix that duplication (bug 1825508).