Add prettier plugin to sort imports in a consistent and automated way #877
Conversation
| "singleQuote": true | ||
| "singleQuote": true, | ||
| "importOrder": [ | ||
| "^.\\/components\\/patterns\\/(.*)Components$", |
There was a problem hiding this comment.
This regular expression ensures the imports for legacy components in the pattern library router are placed in their own group (as they are now), to ease eventual removal.
Once those are removed we can also remove this regexp.
There was a problem hiding this comment.
I'm adding removal of this to the list of small tasks for version 6: #876
|
I suggest getting @lyzadanger to look at this, since she has been doing most of the work in this repo. I confirm that the changes are consistent with the import ordering changes in the client and lms repos. |
| import PanelComponents from './components/patterns/PanelComponents'; | ||
| import SpinnerComponents from './components/patterns/SpinnerComponents'; | ||
| import TableComponents from './components/patterns/TableComponents'; | ||
| import ThumbnailComponents from './components/patterns/ThumbnailComponents'; |
There was a problem hiding this comment.
The block of legacy page imports used to be at the bottom. However, I couldn't find an easy way to keep that behavior. The closest I found was a way to keep them as their own group, but at the top instead of the bottom (see this comment).
Since we are soon removing this, I thought this would be good enough for now, but if it is preferred to keep the previous behavior, I can check a bit further and try to find a better regular expression.
For context, the reason it is at the top is because this plugin matches imports against regular expressions defined in importOrder prettier config. Each regexp defined there becomes an import group.
The one we usually use (^[./]) is too broad, and matches legacy pages as well, resulting in a mixture of imports.
I tried adding ^.\/components\/patterns\/(.*)Components$ after, which only matches legacy pages, but for the reason explained above, it does not work unless we put it before ^[./].
I have tried using a regexp which is "the opposite" of ^.\/components\/patterns\/(.*)Components$, but it's tricky and has weird side effects.
There was a problem hiding this comment.
@lyzadanger your feedback here would be very valuable.
acelaya
force-pushed
the
sort-imports
branch
from
bf2ca62 to
cc1d3f1
Compare
Codecov Report
@@ Coverage Diff @@
## main #877 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 59 59
Lines 710 710
Branches 255 255
=========================================
Hits 710 710
📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more |
acelaya
requested review from
lyzadanger
and removed request for
robertknight
| "singleQuote": true | ||
| "singleQuote": true, | ||
| "importOrder": [ | ||
| "^.\\/components\\/patterns\\/(.*)Components$", |
There was a problem hiding this comment.
I'm adding removal of this to the list of small tasks for version 6: #876
acelaya
force-pushed
the
sort-imports
branch
from
cc1d3f1 to
1b09530
Compare
|
Something went horribly wrong while resolving conflicts in yarn.lock, so I'm just replacing this PR with #885 |
This adds
@trivago/prettier-plugin-sort-importsto the project, so that we can ensure a consistent and automated imports sorting on front-end components viaprettier.This was already introduced in client. See hypothesis/client#5237 and hypothesis/client#5279