Use prettier to provide a format command

[noisysocks]

See #2819.

Uses prettier-eslint to add a format command to Gutenberg. This lets a developer easily re-format a JavaScript file to meet our existing linter rules.

Demo:

Testing:

Check out this branch, npm install, then run:

$ npm run format -- path/to/a/file.js

Notes:

• I had to explicitly install prettier-eslint@8.5.0 since there's a bug in prettier-eslint@8.7.0 that affects us.
• We don't specify max-len in our .eslintrc.json which means that prettier defaults to printWidth=80.
  • On a related note, I explicitly set --tab-width 4 since we don't set max-len's tabWidth property.
• We don't specify react/jsx-closing-bracket-location in our .eslintrc.json which means that prettier defaults to jsxBracketSameLine=false.
• We don't specify arrow-parens in our .eslintrc.json which means that prettier defaults to arrowParens=avoid.

[noisysocks]

cc. @gziolo

[gziolo]

Demo looks cool. I will give it a try later this week 👍

[aduth]

Demo is cool indeed. I worry in general usage this might introduce many undesirable (or at least unrelated) changes to existing files when applied. I also don't have strong confidence that ESLint's --fix is yet able to force all styles to our standard (though it has improved significantly over the past while).

Is this something we need to have built-in tooling for, or could we just encourage developers to install these packages globally and at worst create an alias to run the command?

[gziolo]

Demo is cool indeed. I worry in general usage this might introduce many undesirable (or at least unrelated) changes to existing files when applied. I also don't have strong confidence that ESLint's --fix is yet able to force all styles to our standard (though it has improved significantly over the past while).

We can follow the approach Calypso devs took. They added prettier setup to the repository without any integration provided. This enabled transition period where everyone could experiment on their own. This would allow to verify if --fix is reliable enough to use it on a larger scale. If there would be any issues we can always try calypso-prettier fork which is solid enough to consume it in a larger project and respects WordPress coding styles.

Is this something we need to have built-in tooling for, or could we just encourage developers to install these packages globally and at worst create an alias to run the command?

@aduth does it mean you rather suggest using npx instead like this:

"format": "npx prettier-eslint-cli@4.7.0 -p prettier-eslint@8.5.0 --tab-width 4 --write",

I haven't executed it, but it should work in one of the variations with the -p flag positioned properly :)

[aduth]

@aduth does it mean you rather suggest using npx instead like this:

I more meant not having any scripts in Gutenberg proper, just encouraging developers to run on their own machines:

prettier-eslint --tab-width 4 --write

I don't feel particularly strongly about this.

[gziolo]

I'm okey with having it exposed inside Gutenberg. If there are more people sharing this concern we can expose it indirectly with the @wordpress/scripts package I started working on with this PR: WordPress/packages#62. You would then use it as ./node_modules/.bin/wp-scripts format.

[noisysocks]

I definitely don't think we're at a stage where it's sensible to enforce this or to run it automatically.

Still, I think there's value in having this command set up in scripts (or @wordpress/scripts) with some documentation in the README so that there's a very low barrier of entry into this useful (in my opinion) tooling.

[ntwb]

Related: #4628

[ahmadawais]

Thanks for the PR @noisysocks but I don't think this is the right way to integrate Prettier. I shared my thoughts over at a similar PR by @ntwb #4628 — in an initial PR review here.

Check it out, let me know.