VS Code Open File from src Folder

Question

I can't get VS Code (for Windows, but I don't think that matters) to locate and open files that are not relative to the current file. I have a React app that follows a standard structure where the src folder is at the top of the hierarchy. Refer to the attached screen shot below.

The src\components\App\index.js file contains a lot of code, among which are the following two import statements:

import App from './App';
import Routes from 'src/routes/Routes';

When I have the above index.js file open, I want to open both files referenced by the import statements. You will notice that the first import statement references a file path './App' that begins with a period indicating it is relative to the current file whereas the second import statement does not, but rather references a file path that begins at the root of the project starting with 'src/'.

VS Code has no problem with the first import. I right-click on './App', choose 'Go to Definition' from the pop-up context menu, and it opens the file src\components\App\App.js in a new tab as desired. But when I right-click on 'src/routes/Routes', VS Code reports 'No definition found for Routes'.

If I were writing the code from scratch, I could eliminate the issue by just coding the second import in a relative fashion...

import Routes from '../../routes/Routes';

...but I don't have that option. It is a huge enterprise app with thousands of source files and 300+ components and a typical file has maybe 20 import statements. When I am reading the code, almost nothing is fully defined in one file, I have to navigate a complex folder structure to find code that leads to other code and so on. It is not easy to manually navigate in the explorer window pane on the left. The app was built by consultants who all use WebStorm which easily can jump to referenced code and I am trying to accomplish the same thing in VS Code.

I thought I was onto something when I read about jsconfig.json (https://code.visualstudio.com/docs/languages/jsconfig) and I created the following file that I placed in the root folder above src which contains src...

{
  "compilerOptions": {
    "baseUrl": "src/"
  },
  "include": ["src/**/*", "./"],
  "exclude": ["node_modules"]
} 

...but it did not work. I tried it with or without the 'include' part.

In conclusion, I don't want to lose VS Code's native ability to open files from a relative path but I want to add the capability for it to also open files whose path begins with 'src/'.

Answer 1

the solution is to remove// "baseUrl": "./", from the file then you will be good to go my jsonconfig.json is

{
  "exclude": ["node_modules"],
  "compilerOptions": {
    // "baseUrl": "./",
    "checkJs": true,
    "jsx": "react"
  },
  "include": ["./"]
}

Answer 2

Okay, I figured it out. I was on the right path when I discovered jsconfig.json, but I just needed to define the starting path as dot slash. The file should be written as follows and placed at the root of the project.

{
    "compilerOptions": {
        "baseUrl": "./"
    },
    "include": [
        "./"
    ],
    "exclude": [
        "node_modules"
    ]
}