How to configure the React Native development environment in VSCode

This time I will show you how to configure the React Native development environment with VSCode. What are the precautions for configuring the React Native development environment with VSCode. The following is a practical case, let’s take a look.

This article introduces the method of configuring the React Native development environment in VSCode and shares it with everyone. The details are as follows:

1.InstallationVSCode

2. Install plug-in

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

Enter react-native to install React Native Tools

Assuming you have react native installed on your device,

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

Or follow the official documentation

Create a new RN project and open it using 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. ConfigurationDebuggingEnvironment

a. Automatic configuration

Type shift cmd D or click icon

shift cmd D

Select React Native:

The launch.json file will be automatically generated, 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 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 is configured

{
  "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 the option on the left side of Settings, and 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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to configure the React Native development environment in VSCode. For more information, please follow other related articles on the PHP Chinese website!