How to format automatically React library imports


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

import {Component} from "@mui/material";

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:

import Dialog from "@material-ui/core/Dialog";
=> import { Dialog }  from "@material-ui/core";

And then ESlint plugin automatically merged imports from same package.