How to set VScode intellisense for custom local npm module in package.json?

Question

In the past, we had a problem importing files from the local working directory when using React Native. Then we found a way from React Native Github: https://github.com/facebook/react-native/issues/3099#issuecomment-221815006.

So for example, we had the folder structure like this:

src
- core/
- config/
  - package.json
  - file1.js

- index.js
- package.json
- package-lock.json

And we could declare our config/ folder as a custom npm module by setting this in config/package.json:

{
  "name": "@config"
}

Then we could import the file1 from anywhere using:

import { something } from "@config/file1";

But the problem is that, in this way, VScode lost the ability to auto-complete and intellisense the import path import from "@somewhere", and VScode could not detect the actual content of the imported variables like something above from file1

So is there a way to configure our React Native project such that VScode could intellisense and detect this kind of custom import?

Answer 1

Here's a simple solution I've found from the VS docs here

Declare a jsconfig.json file at the same level as your index.js file. Declare all the custom modules in the paths object.

A config file I've used for one of my projects:

{
    "compilerOptions": {
        "target": "es6",
        "baseUrl": "./",
        "paths": {
            "@assets/*": [
                "./src/assets/*"
            ],
            "@config/*": [
                "./src/config/*"
            ],
            "@screens/*": [
                "./src/screens/*"
            ],
            "@library/*": [
                "./src/library/*"
            ],
        }
    }
}