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

user_12126897 0
Viewed 3237

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?

material-ui visual-studio-code reactjs javascript
1 Answers

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'
user_117669470
Related