When using VSCode’s auto import feature to import Material-UI components, it will use a named import to import from the top-level file:
import { Button } from "@material-ui/core"
However, I would like the auto import to use the full path import instead:
import Button from "@material-ui/core/Button
I’ve tried to find a way to configure VSCode’s auto import to do this to no avail.
Does anyone know if this is possible / how to configure this?
Advertisement
Answer
You can change the type of material UI import in vscode by installing material-ui-snippets. You can follow the instruction here
go to the extension setting, first check the Material-ui-snippets: Add Completion Imports and then change the type of Material-ui-snippets: Import Paths according to you preference. (In your case, it would be second level)
Import Paths
- auto – uses top level if other top level imports are found, second level otherwise
- top level – import { Button } from ‘@material-ui/core’
- second level – import Button from ‘@material-ui/core/Button’