I am working with javascript. Usual cases the imports would look like:

import reducerUtils from '../../utils/reducerUtils'

And the peek definition or go to definition on reducerUtils works as expected.

Things goes different when I change the import to:

import reducerUtils from 'projectname/src/utils/reducerUtils'

The path is definitely valid and the app works too but in the editor the peek definition or go to definition does not work anymore

I understand this could be a standard issue looking from the editors perspective but I was just looking for any solution here to make it work. It might involve into some configuration changes somewhere but my search had no luck. Help Would be appreciated.

I am working with javascript. Usual cases the imports would look like:

import reducerUtils from '../../utils/reducerUtils'

And the peek definition or go to definition on reducerUtils works as expected.

Things goes different when I change the import to:

import reducerUtils from 'projectname/src/utils/reducerUtils'

The path is definitely valid and the app works too but in the editor the peek definition or go to definition does not work anymore

I understand this could be a standard issue looking from the editors perspective but I was just looking for any solution here to make it work. It might involve into some configuration changes somewhere but my search had no luck. Help Would be appreciated.

• javascript
• visual-studio-code

1 Answer 1

Adding a jsconfig.json file at the root(or wherever appropriate depending on the project). Specify the paths under pilerOptions. eg,

{
  "pilerOptions": {
    "baseUrl": "./",
    "paths": {
      "projectname/*": ["./*"], //it's root in my case
    }
  },
  "exclude": ["node_modules"]
} 

Bit more closer look: https://medium./@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

Official Doc: https://code.visualstudio./docs/languages/jsconfig