DEV Community

loading...

JavaScript Import in VSCode IntelliSense

matthias profile image Matthias 🤖 ・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"]
}
Enter fullscreen mode Exit fullscreen mode

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

Would be awesome if anyone can help 🥳

Discussion (6)

pic
Editor guide
Collapse
t7yang profile image
t7yang • Edited

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

Collapse
matthias profile image
Matthias 🤖 Author

Does that work in JavaScript projects?

Collapse
t7yang profile image
t7yang

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

Collapse
morbec profile image
Fabio Morbec

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.

Collapse
matthias profile image
Matthias 🤖 Author

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).

Collapse
morbec profile image
Fabio Morbec

I see,

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