VSCode에서 React Native 개발 환경을 구성하는 방법-JS 튜토리얼-php.cn

VSCode에서 React Native 개발 환경을 구성하는 방법

亚连

풀어 주다： 2018-06-15 13:42:31

원래의

4044명이 탐색했습니다.

이번 글은 VSCode로 React Native 개발 환경을 구성하는 방법을 주로 소개하고 참고용으로 올려드립니다.

본 글에서는 VSCode로 React Native 개발 환경을 구성하는 방법을 소개하고, 자세한 내용은 다음과 같습니다.

1. 플러그인 설치

F1을 누르고 ext install을 입력하고 Enter를 누르거나 enter React-native를 사용하여 React Native 도구를 설치합니다.

기기에 React Native가 설치되어 있다고 가정합니다.

그렇지 않은 경우 npm install -g를 사용하세요.

를 설치하거나 공식 문서 Operation

을 따르십시오. 새 RN 프로젝트를 생성하고 VSCode로 엽니다

설치가 완료된 후 F1을 눌러 React Native에 대한 더 많은 옵션이 있는지 확인하세요. command

React Native Command

3. 디버깅 환경 구성

a 자동 구성

shift+cmd+D를 입력하거나 아이콘을 클릭

shift+cmd+D

그런 다음

Settings

React Native 선택:

Android 디버그, iOS 디버그, iOS 디버그, 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의 4가지 구성 옵션을 사용하여 launch.json 파일을 자동으로 생성합니다.

다음으로 구성을 지웁니다

구성 추가 버튼을 클릭하고 구성을 선택합니다

구성 추가

결과는 다음과 같습니다.

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

로그인 후 복사

여기에서 구성 추가 버튼을 클릭하고 React Native: Debug를 선택합니다. iOS

구성 옵션

이렇게 하면 실행 중인 iOS가 구성됩니다

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

로그인 후 복사

설정을 클릭하세요. 왼쪽 옵션에 iOS 디버그 옵션이 있습니다

iOS 디버그

그런 다음 실행 버튼을 클릭하세요. iOS