Detailed example of VSCode configuring React Native development environment

This article mainly introduces the method of configuring the React Native development environment in VSCode. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1.InstallVSCode

2.Install the plug-in

Press F1 and enter ext install and press Enter, or use

to enter react-native to install React Native Tools

Assume you have already installed react native on the device,

If it is not installed, please use npm install -g react-native-cli to install it

Or follow the official documentation

Create a new RN project and open it with VSCode

After the installation is complete, press F1 to see that there are many more options for React Native in the command

React Native Command

3. Configure debugging environment

a. Automatic configuration

Type shift+cmd+D or click icon

shift+cmd+D

Click again

Settings

Select React Native:

will automatically generate a launch.json file with 4 configuration options Debug Android, Debug iOS, Debug iOS, Debug iOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "target": "iPhone 5s",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Attach to packager",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug in Exponent",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "exponent",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

b. Manual configuration

Next we clear the configurations

Click the Add Configuration button and select configuration

Add configuration

The results are as follows:

{
  "version": "0.2.0",
  "configurations": [
    
  ]
}

Click the Add Configuration button here and select React Native: Debug iOS

Configuration options

In this way, running iOS After configuration

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "sourceMaps": true,
      "target": "iPhone 6s",
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

Click on the option on the left side of the settings, there will be Debug iOS option

Debug iOS

Next, you can click the run button of the above option to successfully run iOS

Hello world

4. Other practical plug-ins

1. Auto Close Tag

2. ##Auto Complete Tag

3. AutoFileName

4. Auto Rename Tag

5. Auto Import

6. Path Intellisense

7. Color Highlight

Related recommendations:

Detailed examples of steps to configure react development environment with VSCode

Example detailed explanation of vue-cli vscode configuration eslint

Essential plug-ins and configurations for using VSCode for PHP development

The above is the detailed content of Detailed example of VSCode configuring React Native development environment. For more information, please follow other related articles on the PHP Chinese website!