Use VSCode to develop correct poses for react-native

preface

Use VSCode to develop React Native. The React Native editor is simple and smooth. Microsoft provides React Native Tools with code highlighting, debugging, and prompts. And VSCode’s own code jump is excellent. However, I downloaded the plugin and found that everything worked except the code didn’t show up correctly and salsa wasn’t displayed in the lower right corner. After much googling and looking at the official documentation: JavaScript in VS Code, I finally found an alternative solution.

React Native Communication Group :536404410 At the same time, the right side of the blog welcome wechat scan to pay attention to the subscription number, mobile technology dry goods, wonderful article technology push!

The solution
Configure Typescript

1. Install typescript globally

npm install typescript@next -g

The installation will be completed as shown in the figure:

When we restart VSCode, we are prompted that the globally installed typescript does not match the version that VSCode points to, so we need to proceed to the next step.

2. Configure user Settings. Json to open, choose File > Preferences > User Settings.

Specify the path to typescript’s lib folder as shown above when the installation is complete. Based on my installation path, add the following changes to the user Settings:

“Typescript. TSDK” : “C: / Users/Qian Tao/AppData/Roaming/NPM/node_modules/typescript/lib”

When you restart your VSCode, the Typescript version number will appear below it, for example:

With this setup, we’ll be prompted to import component modules from the React-Native package, and we can go further

TypeScript Definition Files (Typings)

The official explanation is as follows:

Typings can be used to indicate variables and methods of third-party libraries such as react-native.

1. Install Typings globally

npm install typings --global

The installation is completed as shown below:

2. Install the typings package in the current project root directory

You can open the console and navigate to the root directory of the current project by pressing Ctrl+Shift+C in VSCode, and then install globally:

typings install dt~react-native –save –global

The installation is completed as shown below:

You will also have a typings.json file in your VSCode root directory.

After the configuration is completed, the code can be automatically prompted to complete:

And mouse over the past can also have the corresponding document prompts

The plugin is recommended

For ease of development, I also recommend the following plug-ins:

  • Auto Close Tag Automatically closes the label
  • Auto Rename Tag Automatically Rename a label. If you use this plugin, you can almost catch up with IntelliJ IDEA
  • Reactjs code Snippets react code prompts, such as componentWillMount methods, are available directly through CWM
  • Path Intellisense Indicates the file Path completion

Follow me on codeDev123 to share Android/iOS apps,React Native apps, Project management, app apps, and other related articles every day.

Review images