Intellisense, navigation (ctrl+click) stops working for react-native projects

[dbaeumer]

From @miqmago on April 30, 2016 11:15

• VSCode Version: 1.1.0-insider
• OS Version: 10.10.5

In a react-native project, in this issue facebook/react-native#3099 (comment) it is suggested to follow this steps in order to avoid ../../../../.. paths in requires:

package.json:

{
  "name": "@whatever"
}

(or without @ it works too)
Then in your files you can load a package like this:

import MyComponent from '@whatever/components/myComponent';

The problem with this is that navigation (ctrl+click), intellisense, etc. stops working

Copied from original issue: microsoft/vscode#6015

[basarat]

package.json / name is not supported at the moment. That said one can use baseUrl : '.' and paths: : #5039 (comment)

I haven't looked at baseUrl / paths myself yet. Will try and write up sometime simple (but incomplete) for the TypeScript deep dive 🌹

[mhegazy]

As @basarat noted, baseUrl and paths would be the best way to handle this. so your tsconfig.json would look like:

{
    "compilerOptions": {
        "paths": {   "@whatever/*" : [ "node_modules/components/*" ]  }
    }
}

Documentation for paths is available at: https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#base-url

[basarat]

I might be wrong, but from #5039 I read paths can only be used if baseUrl is set So maybe all examples showing paths should also show baseUrl 🌹

[mhegazy]

sorry about that.

{
    "compilerOptions": {
        "baseUrl" :  "./",
        "paths": { "@whatever/*": [ "node_modules/components/*" ] }
    }
}

[miqmago]

Maybe I'm doing something wrong. This is for a react-native app. My tsconfig.json looks like this:

{
    "compilerOptions": {
        "allowJs": true,
        "paths": {
            "baseUrl": "./",
            "app/*": [
                "./*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

Then I have the following structure:

tsconfig.json
components
     └── settings.js
selectors
     └──  index.js

Then in index.js:

import { getSettingsType } from 'app/components/settings';

It still doesn't work: cmd+click not working, neither intellisense.

[miqmago]

(I've also tried to place paths inside jsconfig.json and the result is the same, additionally I'm getting a warning: Property paths is not allowed)