CODEWITHSUNDEEP
react-nativevisual-studio-code
Steed-Asprey
Steed-Asprey

Reputation: 2191

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

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.

Upvotes: 17

Views: 24731

Answers (6)

user8195088
user8195088

Reputation: 11

Simply install npm i -D @types/react-native & it give auto suggestions to you about react native

Upvotes: 1

Aditya
Aditya

Reputation: 1

In my case, I've already installed many react-native extensions for autoSuggestion and another helper extension, e.g. "React Native Tools", and "React-Native/React/Redux snippets for es6/es7"

Issues:

  • autoSuggestion keywords not coming while typing.
  • command(in IOS) + click not letting me to jump on the target files.

Recently I have seen in VS Code editor for new React-native applications autoSuggestion not working.

Steps I have followed to solve:

  1. Go to Extensions extension image
  2. Search for React or React-native
  3. Remove the installed extension
  4. Reload it.

Upvotes: 0

Ashad
Ashad

Reputation: 2513

I am also not getting any IntelliSense and also package auto-import is not working. Since I am not using Typescript, deleting the tsconfig.json helped me.

Take backup of your tsconfig.json file first

Upvotes: 0

Ricky
Ricky

Reputation: 569

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"
    ]
}

Upvotes: 2

Jakub Synowiec
Jakub Synowiec

Reputation: 5959

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!!

Upvotes: 16

ToddQ
ToddQ

Reputation: 51

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

Upvotes: 5

Related Questions