JavaScript Import in VSCode IntelliSense

twitter logo github logo ・1 min read

I try to set up a JavaScript project in Visual Studio Code.
Everything works fine, except IntelliSense. In my particular case, I added Styled Components and PropTypes, but both packages won't get suggested as import.

I already created a jsconfig.json file in my project root, but that didn't help either.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "public", ".cache"]
}

Is there anything else I need to configure, or do I have to install an extension?

Would be awesome if anyone can help 🥳

twitter logo DISCUSS (6)
markdown guide
 

code has no idea about the package inside node_modules, even in TypeScript, so you have to install types for those packages you need types declaration. You can manually install @types/styled-components, then code can provide auto import via its type definition.

img

 
 

Yes, my screen capture is a JavaScript project not a TypeScript project.

 

Hi Matthias,
You have to import both packages

Not remember well the styled components but I think it's something like

import { styled } from 'styled-components'

And for the prop types something like :

import PropTypes from 'prop-types'

I hope it helps.

 

Thank you!

The problem however is, that VSCode does not include the auto import options in the IntelliSense menu (see my screenshot in the article).

 

I see,

I didn't know VS Code auto import also works for packages, it just work for components in my case.

Classic DEV Post from Mar 3 '18

Tools you need to use in your react components development 

As a react developer, I believe that everyone who is working on a react project must develop all the components separately for taking advantage of that components philosophy behind this amazing front-end framework.

Matthias 🤖 profile image
👨‍💻 Software Engineer 🚀 Working on all stacks 🏷️ #typescript #react #docker #kubernetes #devops #cloud #webdev