Use prettier to provide a format command#4374
Conversation
|
cc. @gziolo |
|
Demo looks cool. I will give it a try later this week 👍 |
|
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 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? |
Uses prettier-eslint to add a 'format' script which automatically formats a JavaScript file according to our lint rules. Usage: npm run format -- path/to/file.js
c9683c3 to
790aabc
Compare
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
@aduth does it mean you rather suggest using "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 |
I more meant not having any scripts in Gutenberg proper, just encouraging developers to run on their own machines: I don't feel particularly strongly about this. |
|
I'm okey with having it exposed inside Gutenberg. If there are more people sharing this concern we can expose it indirectly with the |
|
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 |
|
Related: #4628 |
|
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. |
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:Notes:
prettier-eslint@8.5.0since there's a bug inprettier-eslint@8.7.0that affects us.max-lenin our.eslintrc.jsonwhich means that prettier defaults toprintWidth=80.--tab-width 4since we don't setmax-len'stabWidthproperty.react/jsx-closing-bracket-locationin our.eslintrc.jsonwhich means that prettier defaults tojsxBracketSameLine=false.arrow-parensin our.eslintrc.jsonwhich means that prettier defaults toarrowParens=avoid.