How do you configure VSCode jsconfig for React?

Question

I am trying to make VSCode to work smoothly with my React project. I am refering to the ability to click into a component and go inside, peek at the component or propose stuff for auto completion (intellisense).

I have this so far:

{
  "compilerOptions": {
      "module": "es6",
      "target": "es2019",
      "jsx": "react",
      "baseUrl": ".",
      "paths": {
        "@Reducers/*": ["./src/reducers/*"],
        "@Selectors/*": ["./src/selectors/*"],
        "@Components/*": ["./src/components/*"],
        "@App/*": ["./src/components/App/*"],
        "@Footer/*": ["./src/components/Footer/*"],
        "@Header/*": ["./src/components/Header/*"],
    }
  },
  "include" : ["src/**/*"],
  "exclude": ["node_modules", "dist", "config", ".vscode"]
}

I do not use CRA.

Any idea why is not working? Any help would be appreciated. Thank you in advance and regards

edit: it seems that with module:commonjs instead of es6 is working better, any idea of why is this? I am using es6 imports!

edit2: the reason is explained here: https://github.com/Microsoft/vscode/issues/24715

Answer 1

We need more information about you project. but, All most problem about absolute path is base url.

If you used Webpack, Read Webpack - Alias . and then read this too. Github CRA Path Issues

Examples

I used this.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

const path = require('path');

// Webpack Config
export default {
  // ...
  resolve: {
    alias: {
      ['@']: path.join(root, 'src')
    }   
  }
}

If you have a root path, this is easy to change paths. So I recommend that don't use multiple '@' pahts too.

Refs

• Webpack - https://webpack.js.org/configuration/resolve/#resolvealias
• CRA:Github - https://github.com/facebook/create-react-app/issues/5118

Answer 2

The solution at the end was to use module: commonjs instead of module: es6

This is explained here: https://github.com/Microsoft/vscode/issues/24715

Quote: "In a jsconfig, the module option only changes how paths are resolved"

Answer 3

You need to install extensions for ReactJs like: ES7 React/Redux/GraphQL/React-Native snippets or Simple React Snippets . Try these two.