What steps need to be taken to get autocomplete working for React Native in Visual Studio Code?

Question

I have followed the steps outlined in the VS Code documentation for getting Intellisense working for React Native by installing typings for React Native. Now, what do I need to do to get autocomplete working? For instance, if I type <Text>, I would like to see an automatic closing of that tag. What am I missing here? This seems like it shuld work out of the box.

Answer 1

To enable IntelliSense (autocomplete) you have to install the official React Native Tools extension.

Installation

Open Command Palette by pressing F1, type ext install and press Enter, then look for React Native Tools extension.

Create a jsconfig.json file

You should create a jsconfig.json file in you root directory. It can be empty but must be present. The presence of such a file in a directory indicates that the directory is the root of a JavaScript project.

(Optional)

The file itself can optionally list the files belonging to the project, the files to be excluded from the project, as well as compiler options.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules"
  ]
}

You can find more at https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson

Create a .babelrc file for ReactNative Packger transformer (optional, if you want to use TypeScript)

You should create a .babelrc file with sourceMaps = true and "presets": [ "react-native" ] for better source-mapping support. (required if you want TypeScript support).

{
  "presets": [
    "react-native" // this is required for debugging with react-native/packager/transformer
  ],
  "plugins": [],
  "sourceMaps": true // must be true react-native/packager/transformer using with node-module-debug
  // because of some bugs from vscode-node-debug & vscode-react-native, "sourceMaps" cannot be "inline" or "both"
}

Install typings for React Native (optional)

To get IntelliSense for React Native, run npm install typings -g and then typings install dt~react-native --global in your terminal.

Hope this helps!!

Answer 2

React Native Tools in VSCode can't help you close the Tag after you typed<Text>,you can try to install Auto Close Tag and Auto Rename Tag

Answer 3

In my case, I have to copy jsconfig.json to tsconfig.json, close Visual Code and reopen it. Then it works properly.

jsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules"
    ]
}