No jsconfig.json, no fun

I switched to VS Code recently and had an issue that really bogged me: Often Functions/Components did not appear in the list of IntelliSense autocomplete suggestions. But after opening the file containing the Function it suddenly got added to the list.

No IntelliSense suggestion for ExampleCard

Suggestion shows up after opening ExampleCard.js

jsconfig.json to the rescue

To be honest, it took me some time to find out what was going on.

Visual Studio Code's JavaScript support can run in two different modes: File Scope and Explicit Project.

And this was the cause of my issue: Some of my projects ran in File Scope mode and JavaScript files were treated as independent units by VS Code.

To solve my issue I just had to enabled Explicit Project mode by creating a jsconfig.json in my project.

You can more about the jsconfig.json file and and the two modes in the official documentation.

Everything shows up now 🥳

So all good now and lesson learned: When working with Visual Studio Code always make sure you have a jsconfig.json set up when working in a Javascript project.

Examples for a jsconfig.json

Here is the jsconfig.json I use for a Gatsby project:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ES2020",
    "jsx": "react",
    "lib": [
      "esnext",
      "dom"
    ]
  },
  "include": [
    "./src/**/*",
    "./gatsby-node.ts",
    "./gatsby-config.ts",
    "./plugins/**/*"
  ]
}

And this is a more general version for React web projects that includes all files except files in node_modules:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ES2020",
    "jsx": "react",
    "lib": [
      "esnext",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}