How to format automatically React library imports
Hi,
I just came across that import must be made in a certain manner for material-ui react components, and I was wondering if there was a way to automatically format all the files in my projects to follow this rule:
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContentRename from "@material-ui/core/DialogContent";
=> import { Dialog, DialogTitle, DialogContent as DialogContentRename } from "@material-ui/core";
请先登录再写评论。
Imports work as expected for me (react@18.2.0, @mui/material@5.9.2):
components are auto-imported using the
syntax; it works out of the box in 2022.2, no special steps are required...
Indeed if I work on a new file I can choose to import the components using the correct syntax.
But my usecase is different I was talking about reformatting existing files with imports already written as I described. And since it's a project with a lot of files I can't review all of them to re import every components.
Anyway I found a way to do it by replacing all imports with a regexp to obtain this:
And then ESlint plugin automatically merged imports from same package.