Auto-import problems
If you work on JavaScript projects in VS Code, you’ve almost certainly been frustrated with the hit-or-miss nature of the auto-import suggestions. When you try to import code from elsewhere in your project, the correct suggestion is nowhere to be found.
There are extensions to help with this, but it turns out VS Code now handles this natively – using the jsconfig.json
file – and luckily it’s very simple to setup.
Create the jsconfig.json
file
As of 2018, VS Code treats all JS files as separate from one another. In order to tell it that your files are all part of an Explicit Project , you need to create and configure a jsconfig.json
file (this is a descendant of tsconfig.json
, which is required for TypeScript projects).
Here’s how:
- Create the
jsconfig.json
file at the root of your project. - (Optional) Configure the compiler options.
Technically an empty file will suffice to tell VS Code this is a project, but you’ll likely want to configure a few things.
There’s a lot of options that can be set, but a few that I like to set for React projects are:
// jsconfig.json at project root
{
"compilerOptions": {
"module": "ES6",
"jsx": "preserve",
"checkJs": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}
See the docs for details and more config settings.
And it works! 👍
Now that VS Code knows to treat all your JS files as an explicit project, auto-import suggestions will populate with all your relevant exported code.
Hope that helps! For more VS Code import tips, see my post on automatic import sorting.
Top comments (11)
I'm a software engineer too and I use TypeScript, React.js, and Node.js daily.
Thanks for this article who helped me to solve this automatic import in Vs Code issue.
May I ask you which font and theme you use in Vs Code?
I saw it many times in tutos and I would like to have it :)
Have a nice day!
Emanuela
Cobalt2 by Wes Bos
Glad it helped!
Like Andrejs said, the theme is Cobalt2 and the font is Operator Mono. Fira Mono is another similar, free mono spaced font :)
Nice, helpful and to the point
Hi Shane,
After reading your post I have a doubt. In the last line of your script:
Shouldn't it be
"node_modules/**/*"
instead of"**/node_modules/*"
?Hi @zonaguillermo, thanks for reading :)
This is the suggested pattern from the VS Code docs.
It is supposed to exclude any
node_modules
folders at any depth, not just the root levelnode_modules
folder (see this stack overflow post.TBH I'm not entirely sure when this case would come up, but it certainly won't hurt to include it, since you wouldn't want Intellisense to be searching any
node_modules
folders.It's likely that
"exclude": ["node_modules"]
is sufficient though.For anyone reading in the future,
"**/node_modules/*"
helps when you have sub-directories/sub-projects that have their ownnode_modules
[and package.json]Thanks Shane for de response,
I read these post and I see it more clearly now
I'm using TailwindCSS, so after creating jsconfig.json I had an issue:
If I delete "module": "ES6", the error will disappear.
I don't know why, but if you add the string into jsconfig.json:
it will work.
This can be helpful -> github.com/romansndlr/react-vite-r...
Doesn't work. I am using Vue.js