Getting jsconfig and VS Code to Work Together for Your Gatsby Site

What is jsconfig.json?

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.

Tip: jsconfig.json is a descendant of tsconfig.json, which is a configuration file for TypeScript. jsconfig.json is tsconfig.json with “allowJs” attribute set to true.

VSCode uses a jsconfig.json file to aid your JavaScript language service and significantly improve your development experience.

Learn more about jsconfig

Create a file in the root of your project jsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "jsx": "react",
    "checkJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "moduleResolution":"node",
    "baseUrl": "src",
    "paths": {
      "*": ["*", "src/*"]
    }
  },
  "paths": {
    "components/*": ["./src/components/*"],
    "utils/*": ["./src/utils/*"]
  },
  "typeAcquisition": {
    "enable": true
  },
  "typingOptions": {
    "enableAutoDiscovery": true
  },
  "compileOnSave": true,
  "allowJS": true,
  "include": ["src/**/*"]
}

Webpack aliases

If you have set up Webpack aliases in gatsby-node.js, to make your imports nicer. Ex like import { Stuff } from "components/stuff" you can specify this in paths: {}

JSON data

If you import JSON data you can use json"resolveJsonModule": true. With that being done, you should be able to import a JSON file as a JavaScript module.

VS Code settings

To make your configuration smooth and play nice with VS Code I recommend these settings.

{
	...
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "js/ts.implicitProjectConfig.checkJs": true,
  "javascript.validate.enable": false,
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true
  },
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
	...
}

Notes:

You can use javascript.validate turns off all error reporting for JS files. But it doesn’t change how TypeScript operates. You need to set javascript.implicitProjectConfig.checkJs to specify the settings for an implicit jsconfig project. This is the equivalent of having a jsconfig.json with the contents { "compilerOptions": { "checkJs": true}}

Emmet

Emmet is always handy to have. You can include "emmet.includeLanguages": { "javascript": "javascriptreact" } to enable Emmet support for JSX. The makes typoing HTML in React (.js) so much easier. And faster.

Now you can get full auto-complete and file browsing support in your IDE!