Skip to content

VSCode auto import – how to force Material-UI full path import

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?



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’