GitVita
New repositoryImport repositoryNew issue
Your repositories Your dashboard Sign in

microsoft/vscode-react-native

Public

mirrored from https://github.com/microsoft/vscode-react-nativeAvailable

Watch0Fork0Star0
CodeCommitsIssuesPull requestsActionsInsightsSecurity
0.1.2

Branches

Tags

  • No tags available.
0Branches0Tags
Go to file
Add file
Code

Clone

HTTPS

Download ZIP

README.md

111lines · modeblame

RawDownload
Latest commit unavailable.
51e48cdbJimmy Thomson10 years ago1# React Native Tools
cffa43bcGuillaume Jenkins10 years ago2[![Build Status](https://travis-ci.org/Microsoft/vscode-react-native.svg?branch=master)](https://travis-ci.org/Microsoft/vscode-react-native)
885d5dd9Nisheet Jain10 years ago3
9f3386c6Nisheet Jain10 years ago4This extension provides a development environment for React Native projects.
5You can debug your code, quickly run `react-native` commands from the command palette and use IntelliSense to browse objects, functions and parameters for React Native APIs.
885d5dd9Nisheet Jain10 years ago6
7![React Native features](images/react-features.gif)
8
9## Getting started
10
4bdf966eEric Hamilton10 years ago11* [Install VS Code](https://code.visualstudio.com) (0.10.10+ is preferred).
10daaf2eEric Hamilton10 years ago12* [Install the extension](https://code.visualstudio.com/docs/editor/extension-gallery) in VS Code:
131. Type `F1`, then `ext install` + `Enter`, wait a moment while the list of available extensions is populated
142. Type `react-native` and select **React Native Tools**
153. For more guidance view [VS Code Extension Gallery](https://code.visualstudio.com/docs/editor/extension-gallery)
4bdf966eEric Hamilton10 years ago16* If you haven't already, install React Native:
10daaf2eEric Hamilton10 years ago171. Run `npm install -g react-native-cli` to install React Native CLI (0.1.10+)
182. Set up React Native (0.19+) using the steps detailed on the React Native [getting started documentation ](https://facebook.github.io/react-native/docs/getting-started.html)
19* Open your React Native project root folder in VS Code.
885d5dd9Nisheet Jain10 years ago20
360d66e3Nisheet Jain10 years ago21## Debugging
22
23### Setup debug environment
885d5dd9Nisheet Jain10 years ago24
9f3386c6Nisheet Jain10 years ago25Click the debugging icon ![Choose React Native debugger](images/debug-view-icon.png) in the View bar, and then click the configure gear icon ![Configure-gear](images/configure-gear-icon.png) to choose the React Native debug environment.
885d5dd9Nisheet Jain10 years ago26
27![Choose React Native debugger](images/choose-debugger.png)
28
e44dc90cNisheet Jain10 years ago29VS Code will generate a `launch.json` in your project with some default configurations such as shown below.
885d5dd9Nisheet Jain10 years ago30
31![React Native launch configuration file](images/launch-config.png)
32
33You can modify these configurations or add new ones to the list. You can use other fields in these configurations as well.
34
e44dc90cNisheet Jain10 years ago35For example, you can modify the `target` field to specify the simulator you want to target for iOS debugging.
885d5dd9Nisheet Jain10 years ago36
360d66e3Nisheet Jain10 years ago37### Start debug session
9f3386c6Nisheet Jain10 years ago38To start the debug session, select a configuration from the Configuration dropdown, and then click the start button ![Configure-gear](images/debug-icon.png) (or press F5).
885d5dd9Nisheet Jain10 years ago39
4cb2a3dfNisheet Jain10 years ago40![React Native launch targets](images/debug-targets.png)
885d5dd9Nisheet Jain10 years ago41
36ae0655Nisheet Jain10 years ago42You can debug your app on an Android emulator, Android device or iOS simulator. This extension provides [experiemental support](#debugging-on-ios-device) for iOS devices.
c8282f33Nisheet Jain10 years ago43
10daaf2eEric Hamilton10 years ago44More information about debugging using VS Code can be found in this [guide](https://code.visualstudio.com/docs/editor/debugging).
885d5dd9Nisheet Jain10 years ago45
360d66e3Nisheet Jain10 years ago46#### Debugging on iOS device
10daaf2eEric Hamilton10 years ago47Debugging on iOS device would require following manual steps.
48* Change the `jsCodeLocation` IP in your app using the steps detailed [here](https://facebook.github.io/react-native/docs/running-on-device-ios.html#accessing-development-server-from-device).
36ae0655Nisheet Jain10 years ago49* Choose **Debug iOS** configuration from the Configuration dropdown and press F5.
10daaf2eEric Hamilton10 years ago50* Shake the device to open development menu and select "Debug in Chrome".
36ae0655Nisheet Jain10 years ago51
885d5dd9Nisheet Jain10 years ago52## Using React Native commands in the Command Palette
53
54In the Command Palette, type ```React Native``` and choose a command.
55
56![React Native commands](images/command-palette.png)
57
58The **Run Android** command triggers ```react-native run-android``` and starts your app for android.
59
4cb2a3dfNisheet Jain10 years ago60The **Run iOS** command similarly triggers ```react-native run-ios``` and starts your app in iOS simulator (iPhone 6).
885d5dd9Nisheet Jain10 years ago61
62The **Packager** commands allow you to start/stop the [**React-packager**](https://github.com/facebook/react-native/tree/master/packager).
63
36ae0655Nisheet Jain10 years ago64## Using IntelliSense
885d5dd9Nisheet Jain10 years ago65
e44dc90cNisheet Jain10 years ago66IntelliSense helps you discover objects, functions, and parameters in React Native.
885d5dd9Nisheet Jain10 years ago67
68![IntelliSense](images/intellisense.png)
69
e44dc90cNisheet Jain10 years ago70### Enabling IntelliSense
1a51a6f0Eric Hamilton10 years ago71* **Note:** This section relates to older versions of VS Code and React Native Tools. The latest version of VS Code (0.10.10+) natively supports IntelliSense for Salsa. These instructions apply to older versions of VS Code (<= 0.10.9).
72* When using VS Code 0.10.10+ with a newer React Native Tools extension (> 0.1.0) the extension will update project settings to remove the workaround described below if it was applied while using an older version of this extension or VS Code.
73
e44dc90cNisheet Jain10 years ago74React Native IntelliSense depends on experimental features to support JSX in VS Code.
36ae0655Nisheet Jain10 years ago75To enable these experimental features, you will see the following prompt immediately after opening a React Native project.
885d5dd9Nisheet Jain10 years ago76
e44dc90cNisheet Jain10 years ago77![IntelliSense prompt](images/intellisense-prompt.png)
4cb2a3dfNisheet Jain10 years ago78
0c7adb02Nisheet Jain10 years ago79This is a one-time prompt and will enable JSX support. You will need to restart VS Code once for changes to take effect.
885d5dd9Nisheet Jain10 years ago80
4cb2a3dfNisheet Jain10 years ago81You can verify that you have Salsa enabled and you have an installed TypeScript version that supports Salsa by checking the status indicator in the Status Bar. This shows that all is OK
82
83![Salsa Enabled](https://code.visualstudio.com/images/January_salsa-status.png)
84
36ae0655Nisheet Jain10 years ago85Once you have enabled IntelliSense by following the above steps, you can start typing in the code editor to see the objects, functions, and parameters of your React Native libraries and your own code.
4cb2a3dfNisheet Jain10 years ago86
1a51a6f0Eric Hamilton10 years ago87Here is what happens behind the scenes to enable JSX support:
36ae0655Nisheet Jain10 years ago881. The environment variable VSCODE_TSJS=1 is set to enable [Salsa](https://github.com/Microsoft/TypeScript/issues/4789)
b1df983eEric Hamilton10 years ago892. Salsa requires TypeScript 1.8, the extension will install `typescript@1.8.2` in `~/.vscode`.
8a9925eeEric Hamilton10 years ago903. A settings.json file is created in the .vscode directory with typescript.tsdk pointing to the typescript install location.
36ae0655Nisheet Jain10 years ago914. A tsconfig.json file is created in the project root with `allowJs: true` to allow TypeScript to process JavaScript files.
925. Typings for React Native are copied into the .vscode directory.
4cb2a3dfNisheet Jain10 years ago93
94## Known Issues
fb81ad47Nisheet Jain10 years ago95
1a51a6f0Eric Hamilton10 years ago96Here is the list of common known issues you may experience while using the extension:
fb81ad47Nisheet Jain10 years ago97
29bae58aNisheet Jain10 years ago98Issue | Description
99------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------
100Debugger doesn't stop at breakpoints | The debugger only works if the packager is started by VS Code. Stop the packager if it is already running outside VSCode.
101'adb: command not found' | If you receive an error `adb: command not found`, you need to update your path variable to include the location of your *ADB* executable.The *ADB* executable file is located in a subdirectory along with your other Android SDK files.
102Targeting iPhone 6 doesn't work | There is a known issue [#5850](https://github.com/facebook/react-native/issues/5850) while running an app targeting iPhone 6
fb81ad47Nisheet Jain10 years ago103
90876b1cJimmy Thomson10 years ago104[Known-Issues](https://github.com/Microsoft/vscode-react-native/issues?q=is%3Aissue+label%3Aknown-issues) provides a complete list of active and resolved issues.
4cb2a3dfNisheet Jain10 years ago105
9f3386c6Nisheet Jain10 years ago106## Disable telemetry reporting
885d5dd9Nisheet Jain10 years ago107VS Code React Native extension collects usage data and sends it to Microsoft to help improve our products and services. Read our [privacy statement](https://www.visualstudio.com/en-us/dn948229) to learn more.
108
109If you don’t wish to send usage data to Microsoft, please follow the instructions below to disable its collection.
110
48107162Adam Patridge10 years ago111* Edit VSCodeTelemetrySettings.json file at ~/.vscode-react-native and add `optIn:false`.