microsoft/vscode-react-native
Publicmirrored from https://github.com/microsoft/vscode-react-nativeAvailable
README.md
111lines · modecode
| 1 | # React Native Tools |
| 2 | [](https://travis-ci.org/Microsoft/vscode-react-native) |
| 3 | |
| 4 | This extension provides a development environment for React Native projects. |
| 5 | You 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. |
| 6 | |
| 7 |  |
| 8 | |
| 9 | ## Getting started |
| 10 | |
| 11 | * [Install VS Code](https://code.visualstudio.com) (0.10.10+ is preferred). |
| 12 | * [Install the extension](https://code.visualstudio.com/docs/editor/extension-gallery) in VS Code: |
| 13 | 1. Type `F1`, then `ext install` + `Enter`, wait a moment while the list of available extensions is populated |
| 14 | 2. Type `react-native` and select **React Native Tools** |
| 15 | 3. For more guidance view [VS Code Extension Gallery](https://code.visualstudio.com/docs/editor/extension-gallery) |
| 16 | * If you haven't already, install React Native: |
| 17 | 1. Run `npm install -g react-native-cli` to install React Native CLI (0.1.10+) |
| 18 | 2. 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. |
| 20 | |
| 21 | ## Debugging |
| 22 | |
| 23 | ### Setup debug environment |
| 24 | |
| 25 | Click the debugging icon  in the View bar, and then click the configure gear icon  to choose the React Native debug environment. |
| 26 | |
| 27 |  |
| 28 | |
| 29 | VS Code will generate a `launch.json` in your project with some default configurations such as shown below. |
| 30 | |
| 31 |  |
| 32 | |
| 33 | You can modify these configurations or add new ones to the list. You can use other fields in these configurations as well. |
| 34 | |
| 35 | For example, you can modify the `target` field to specify the simulator you want to target for iOS debugging. |
| 36 | |
| 37 | ### Start debug session |
| 38 | To start the debug session, select a configuration from the Configuration dropdown, and then click the start button  (or press F5). |
| 39 | |
| 40 |  |
| 41 | |
| 42 | You 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. |
| 43 | |
| 44 | More information about debugging using VS Code can be found in this [guide](https://code.visualstudio.com/docs/editor/debugging). |
| 45 | |
| 46 | #### Debugging on iOS device |
| 47 | Debugging 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). |
| 49 | * Choose **Debug iOS** configuration from the Configuration dropdown and press F5. |
| 50 | * Shake the device to open development menu and select "Debug in Chrome". |
| 51 | |
| 52 | ## Using React Native commands in the Command Palette |
| 53 | |
| 54 | In the Command Palette, type ```React Native``` and choose a command. |
| 55 | |
| 56 |  |
| 57 | |
| 58 | The **Run Android** command triggers ```react-native run-android``` and starts your app for android. |
| 59 | |
| 60 | The **Run iOS** command similarly triggers ```react-native run-ios``` and starts your app in iOS simulator (iPhone 6). |
| 61 | |
| 62 | The **Packager** commands allow you to start/stop the [**React-packager**](https://github.com/facebook/react-native/tree/master/packager). |
| 63 | |
| 64 | ## Using IntelliSense |
| 65 | |
| 66 | IntelliSense helps you discover objects, functions, and parameters in React Native. |
| 67 | |
| 68 |  |
| 69 | |
| 70 | ### Enabling IntelliSense |
| 71 | * **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 | |
| 74 | React Native IntelliSense depends on experimental features to support JSX in VS Code. |
| 75 | To enable these experimental features, you will see the following prompt immediately after opening a React Native project. |
| 76 | |
| 77 |  |
| 78 | |
| 79 | This is a one-time prompt and will enable JSX support. You will need to restart VS Code once for changes to take effect. |
| 80 | |
| 81 | You 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 |  |
| 84 | |
| 85 | Once 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. |
| 86 | |
| 87 | Here is what happens behind the scenes to enable JSX support: |
| 88 | 1. The environment variable VSCODE_TSJS=1 is set to enable [Salsa](https://github.com/Microsoft/TypeScript/issues/4789) |
| 89 | 2. Salsa requires TypeScript 1.8, the extension will install `typescript@1.8.2` in `~/.vscode`. |
| 90 | 3. A settings.json file is created in the .vscode directory with typescript.tsdk pointing to the typescript install location. |
| 91 | 4. A tsconfig.json file is created in the project root with `allowJs: true` to allow TypeScript to process JavaScript files. |
| 92 | 5. Typings for React Native are copied into the .vscode directory. |
| 93 | |
| 94 | ## Known Issues |
| 95 | |
| 96 | Here is the list of common known issues you may experience while using the extension: |
| 97 | |
| 98 | Issue | Description |
| 99 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| 100 | Debugger 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. |
| 102 | Targeting 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 |
| 103 | |
| 104 | [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. |
| 105 | |
| 106 | ## Disable telemetry reporting |
| 107 | VS 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 | |
| 109 | If you don’t wish to send usage data to Microsoft, please follow the instructions below to disable its collection. |
| 110 | |
| 111 | * Edit VSCodeTelemetrySettings.json file at ~/.vscode-react-native and add `optIn:false`. |
| 112 | |