Use Prettier

[ibc]

Details

• Format .ts and .mjs files using Prettier (proper paths filtered).
• New script added: npm run format:node (plus npm run format which now formats Node and Worker).

Why?

• Because I'm tired of having to revisit tons of files and reformat them.
• Because what I like today may not match what I like tomorrow.
• Because it's not me alone in the project.

Bonus Tracks

• Improve (even fix) .eslintrc.js file. For example, it was not linting npm-scripts.mjs properly.
• Run Jest with --detectOpenHandles (no issues so far).

[nazar-pc]

I have not worked with these for some time, just wondering if it is necessary to have so many manual no- things in there, maybe there is a preset for this? Also not clear what has changed in the config in the way things are committed, would have been great to see one commit where file is renamed, and separate when it is changed. "change everything" approach is very hard to review.

[ibc]

All the no-xxx options here were carefully selected in the past to satisfy our wishes and fears. Honestly I don't want to use a "preset" and adhere to it. Anyway, I'll explain in a separate comment the rationale behind changes done here.

[jmillan]

Why not ignore whole /worker ?

[nazar-pc]

Since .prettierignore uses .ignignore syntax, I'd say ignore everything and un-ignore only things that we do want to check instead, that is often a better long-term solution.

[ibc]

We cannot ignore worker/ because we want to include worker/scripts/clang-format.mjs. More about this:

• Unfortunately there is no way to tell prettier which explicit folders/paths it must observe/write via .prettierrs conf file.
• When calling prettier command we pass the explicit list of folders/paths via argument (see formatNode() in npm-scripts.mjs):

  function formatNode() {
    logInfo('formatNode()');
  
    const paths = [
    	'npm-scripts.mjs',
    	'.eslintrc.js',
    	'node/src',
    	'worker/scripts/clang-format.mjs',
    ];
  
    executeCmd(`prettier ${paths.join(' ')} --write`);
  }

• The problem is that we also want to make Prettier work on our text editors to automatically format code. And the text editor just runs prettier --write on any folder/file included in whatever root folder in which .prettierrs is.
• So if I open any TypeScript file in Rust frontend-examples/ folder and edit it in my text editor, Prettier will format it, and we don't want it (at least not now since it would require that we also run ESlint on those files and that's another story).
• So the only way to limit the forlders/paths in which Prettier works when using the text editor is by blacklisting some of them via .prettierrcignore. That's sad but that's what we have. Here a feature request about it that was rejected due to "inactivity" (as tons of other similar ones): Proposal: Filter using ".gitignore" first, then ".prettierignore" second prettier/prettier#8506
• In the other side, Prettier is supposed to also ignore everything in .gitignore according to the docs (https://prettier.io/docs/en/ignore.html) but it's not true. Probably it only works if there is no .prettierrcignore file.

[nazar-pc]

What I'm suggesting then is the following in .prettierignore (if it works the way I expect it to):

*
!/npm-scripts.mjs
!/.eslintrc.js
!/node/src
!/worker/scripts/clang-format.mjs

This will ignore everything and then strategically include just a few things we actually care about.

[ibc]

I tried that syntax in .prettierrcignore and it didn't work for me. Will try again.

[ibc]

Nope. This .prettierrcignore file:

*
!/npm-scripts.mjs
!/.eslintrc.js
!/node/src
!/worker/scripts/clang-format.mjs

• Doesn't ignore /npm-scripts.mjs (good).
• Ignores any file in /node/src (bad).
• Ignores worker/scripts/clang-format.mjs (bad).

Tested right now.

[nazar-pc]

Very strange, I hope there is a way to make it work, that would be the cleanest solution.

[ibc]

This is what I have to do to make Prettier reformat node/src/* TS files and ignore node/lib/* JS compiled files:

/*
!/npm-scripts.mjs
!/.eslintrc.js
!/node
/node/lib

Terrible, and still I don't know how to make it work with /worker/scripts/clang-format.mjs.

[ibc]

I give up. I've tested everything. It's buggy.

[ibc]

So about changes in .eslintrc.js:

• It's been moved to root folder since it must also lint worker/scripts/clang-format.mjs.
• It has 3 sectioons:
  1. First section is global to all JavaScript or TypeScript files.
  2. Second section is only about TypeScript files, so it adds typescript-eslint rules.
  3. Third section is only about TypeScripts files in test files, so it adds Jest stuff.
• I added plugin:prettier/recommended in last position of the extends array in eslintrc.js as per documentation.
• I added 'prettier/prettier': 2 in rules to make ESlint fail if some file doesn't adhere to Prettier syntax.
• I added eslint-config-prettier package and call it in npm run lint:node task to ensure that we are not declaring any ESLint rule that is later gonna be overridden by plugin:prettier/recommended rules:

  // Ensure there are no rules that are unnecessary or conflict with Prettier
  // rules.
  executeCmd('eslint-config-prettier .eslintrc.js');