microsoft/vscode-react-native
Publicmirrored from https://github.com/microsoft/vscode-react-nativeAvailable
README.md
122lines · modeblame
51e48cdbJimmy Thomson10 years ago | 1 | # React Native Tools |
35c07fedRuslan Bikkinin6 years ago | 2 | |
3ab41beaRuslan Bikkinin7 years ago | 3 | [](https://dev.azure.com/vscode-webdiag-extensions/VS%20Code%20WebDiag%20extensions/_build/latest?definitionId=2) |
885d5dd9Nisheet Jain10 years ago | 4 | |
9f3386c6Nisheet Jain10 years ago | 5 | This extension provides a development environment for React Native projects. |
daa5e58eRuslan Bikkinin8 years ago | 6 | Using this extension, you can debug your code and quickly run `react-native` commands from the command palette. |
885d5dd9Nisheet Jain10 years ago | 7 | |
| 8 |  | |
| 9 | | |
| 10 | ## Getting started | |
| 11 | | |
2af998b7Vladimir Kotikov8 years ago | 12 | * [Install VS Code](https://code.visualstudio.com). |
10daaf2eEric Hamilton10 years ago | 13 | * [Install the extension](https://code.visualstudio.com/docs/editor/extension-gallery) in VS Code: |
2af998b7Vladimir Kotikov8 years ago | 14 | 1. Press `Ctrl + Shift + X` (`Cmd + Shift + X` on macOS), wait a moment while the list of available extensions is populated |
10bc5320thehenrytsai8 years ago | 15 | 2. Type `react-native` and install **React Native Tools** |
10daaf2eEric Hamilton10 years ago | 16 | 3. For more guidance view [VS Code Extension Gallery](https://code.visualstudio.com/docs/editor/extension-gallery) |
4bdf966eEric Hamilton10 years ago | 17 | * If you haven't already, install React Native: |
2af998b7Vladimir Kotikov8 years ago | 18 | 1. Run `npm install -g react-native-cli` to install React Native CLI |
35c07fedRuslan Bikkinin6 years ago | 19 | 2. Set up React Native using the steps detailed on the React Native [getting started documentation](https://facebook.github.io/react-native/docs/getting-started.html) |
10daaf2eEric Hamilton10 years ago | 20 | * Open your React Native project root folder in VS Code. |
f16656e9frogcjn9 years ago | 21 | |
2af998b7Vladimir Kotikov8 years ago | 22 | Please notice that the extension uses `.vscode/.react` directory at the project root to store intermediate files required for debugging. Although these files usually get removed after debug session ends, you may want to add this directory to your project's `.gitignore` file. |
57fea366Vladimir Kotikov8 years ago | 23 | |
2af998b7Vladimir Kotikov8 years ago | 24 | ## Debugging React Native applications |
360d66e3Nisheet Jain10 years ago | 25 | |
e6f8520eRuslan Bikkinin7 years ago | 26 | To start debugging create a new debug configuration for your ReactNative app in your `.vscode/launch.json`. Adding a new configuration can be done by opening your `launch.json` file and clicking on `Add Configuration...` button and choosing a relevant debug configuration. All available debug configurations for ReactNative can be accessed by typing in *ReactNative* and picking one from the list populated by Intellisense as shown in the image below. |
| 27 | | |
| 28 |  | |
| 29 | | |
cc07055bKristian Sakarisson7 years ago | 30 | In case if you haven't created the `.vscode/launch.json` file yet, you can add a whole default debug configuration set. To do that click the debug icon  in the View bar, and then click the configuration (gear) icon , then choose the React Native debug environment. |
885d5dd9Nisheet Jain10 years ago | 31 | |
| 32 |  | |
| 33 | | |
2af998b7Vladimir Kotikov8 years ago | 34 | VS Code will generate a `launch.json` in your project with some default configuration settings as shown below. You can safely close this file, choose the appropriate configuration in the Configuration dropdown, and then press F5 (or click _Green Arrow_  button) to start debugging your app in VS Code. |
885d5dd9Nisheet Jain10 years ago | 35 | |
4cb2a3dfNisheet Jain10 years ago | 36 |  |
885d5dd9Nisheet Jain10 years ago | 37 | |
eba0de58Ruslan Bikkinin7 years ago | 38 | Once app is loaded and ran, [open Developer Menu](https://facebook.github.io/react-native/docs/debugging#accessing-the-in-app-developer-menu) inside your application and enable remote debugging by clicking on `Debug JS Remotely` button. |
| 39 | | |
| 40 |  | |
| 41 | | |
2af998b7Vladimir Kotikov8 years ago | 42 | You can debug your app on an Android emulator, Android device or iOS simulator. This extension provides [experimental support](doc/debugging.md#debugging-on-ios-device) for iOS devices. |
c8282f33Nisheet Jain10 years ago | 43 | |
10daaf2eEric Hamilton10 years ago | 44 | More information about debugging using VS Code can be found in this [guide](https://code.visualstudio.com/docs/editor/debugging). |
885d5dd9Nisheet Jain10 years ago | 45 | |
2af998b7Vladimir Kotikov8 years ago | 46 | See [Setting up debug environment](doc/debugging.md) for more details. |
36ae0655Nisheet Jain10 years ago | 47 | |
d8cf3d51Yuri Skorokhodov6 years ago | 48 | ## React Native debug configuration properties |
35c07fedRuslan Bikkinin6 years ago | 49 | |
| 50 | |Name |Description|Type|Defaults| | |
d8cf3d51Yuri Skorokhodov6 years ago | 51 | |---|---|---|---| |
| 52 | |`cwd`|The path to the project root folder|`string`|`${workspaceFolder}`| | |
| 53 | |`sourceMaps`|Whether to use JavaScript source maps to map the generated bundled code back to its original sources|`boolean`|`true`| | |
| 54 | |`sourceMapPathOverrides`|A set of mappings for rewriting the locations of source files from what the source map says, to their locations on disk. See [Debugging with TypeScript and Haul](https://github.com/Microsoft/vscode-react-native/blob/master/doc/debugging.md#debugging-with-typescript-and-haul) for details|`object`|n/a| | |
| 55 | |`trace`|Logging level in debugger process. May be useful for diagnostics. If set to "Trace" all debugger process logs will be available in `Debug Console` output window|`string`|`log`| | |
| 56 | |`address`|TCP/IP address of packager to attach to for debugging|`string`|`localhost`| | |
| 57 | |`port`|Port of packager to attach to for debugging|`string`|`8081`| | |
| 58 | |`remoteRoot`|The source root of the remote host|`string`|`null`| | |
| 59 | |`localRoot`|The local source root that corresponds to the 'remoteRoot'|`string`|`${workspaceFolder}`| | |
| 60 | |`skipFiles`|An array of file or folder names, or glob patterns, to skip when debugging|`array`|`[]`| | |
| 61 | |`debuggerWorkerUrlPath`|Path to the app debugger worker to override. For example, if debugger tries to attach to http://localhost:8081/debugger-ui/debuggerWorker.js and you get 404 error from packager output then you may want to change debuggerWorkerUrlPath to another value suitable for your packager (\"debugger-ui\" will be replaced with the value you provide)|`string`|`debugger-ui/`| | |
| 62 | |`platform`|The platform to target. Possible values: `android`, `ios`, `exponent`, `windows`, `wpf`|`string`|n/a| | |
| 63 | |`target`|Target to run on. Possible values: `simulator`, `device`, `<Android emulator/device id>`, `<iOS simulator/device name>`|`string`|`simulator`| | |
| 64 | |`logCatArguments`|Arguments to be used for LogCat (The LogCat output will appear on an Output Channel). It can be an array such as: `[":S", "ReactNative:V", "ReactNativeJS:V"]`|`array`|`["*:S", "ReactNative:V", "ReactNativeJS:V"]`| | |
| 65 | |`runArguments`|Run arguments to be passed to `react-native run-<platform>` command (override all other configuration params)|`array`|n/a| | |
| 66 | |`env`|Environment variables passed to the debugger and `react-native run-<platform>` command|`object`|`{}`| | |
| 67 | |`envFile`|Absolute path to a file containing environment variable definitions|`string`|`${workspaceFolder}/.env`| | |
| 68 | |`variant`|A variant to be passed to `react-native run-android`, e.g. use `devDebug` to specify `--variant=devDebug`|`string`|n/a| | |
| 69 | |`scheme`|A scheme name to be passed to `react-native run-ios`, e.g. `devDebug` to specify `--scheme=devDebug`|`string`|n/a| | |
| 70 | |`productName`|iOS bundle display name e.g. `AwesomeProject` value means that extension will search for `AwesomeProject.app` bundle|`string`|n/a| | |
| 71 | | |
885d5dd9Nisheet Jain10 years ago | 72 | ## Using React Native commands in the Command Palette |
| 73 | | |
2af998b7Vladimir Kotikov8 years ago | 74 | In the Command Palette, type `React Native` and choose a command. |
885d5dd9Nisheet Jain10 years ago | 75 | |
| 76 |  | |
| 77 | | |
2af998b7Vladimir Kotikov8 years ago | 78 | The **Run Android** command triggers `react-native run-android` and starts your app for Android. |
885d5dd9Nisheet Jain10 years ago | 79 | |
2af998b7Vladimir Kotikov8 years ago | 80 | The **Run iOS** command similarly triggers `react-native run-ios` and starts your app in the iOS simulator (iPhone 6). |
885d5dd9Nisheet Jain10 years ago | 81 | |
c6e71ae2Arnold Schrijver8 years ago | 82 | The **Packager** commands allow you to start/stop the [**Metro Bundler**](https://github.com/facebook/metro-bundler) (formerly React Packager). |
885d5dd9Nisheet Jain10 years ago | 83 | |
2af998b7Vladimir Kotikov8 years ago | 84 | ## Using Expo |
cbb0e869Artem Egorov8 years ago | 85 | |
e6f8520eRuslan Bikkinin7 years ago | 86 | We support using Expo to run, debug and publish applications. For more details about configuring and debugging Expo applications see [Expo docs](doc/expo.md) |
5a8b1845Patricio Beltran9 years ago | 87 | |
1c530236Artem Egorov8 years ago | 88 | ## Build APK and Generate Bundle |
| 89 | | |
26fa493aandrey8 years ago | 90 | You can add VSCode tasks to build an .apk file and generate iOS/Android bundles. See [here](doc/tasks.md) for more info. |
1c530236Artem Egorov8 years ago | 91 | |
daa5e58eRuslan Bikkinin8 years ago | 92 | ## Customization |
| 93 | | |
| 94 | Extension can be customized for different use cases. Please, follow [Customization](doc/customization.md) section for more details. | |
| 95 | | |
2af998b7Vladimir Kotikov8 years ago | 96 | ## Contributing |
1c4e79a1Jimmy Thomson9 years ago | 97 | |
2af998b7Vladimir Kotikov8 years ago | 98 | Please see our [contributing guide](CONTRIBUTING.md) for more information |
1c4e79a1Jimmy Thomson9 years ago | 99 | |
4cb2a3dfNisheet Jain10 years ago | 100 | ## Known Issues |
fb81ad47Nisheet Jain10 years ago | 101 | |
1a51a6f0Eric Hamilton10 years ago | 102 | Here is the list of common known issues you may experience while using the extension: |
fb81ad47Nisheet Jain10 years ago | 103 | |
29bae58aNisheet Jain10 years ago | 104 | Issue | Description |
| 105 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | |
a7336533Yuri Skorokhodov7 years ago | 106 | Debugger doesn't stop at breakpoints | Breakpoints require sourcemaps to be correctly configured. If you are using TypeScript, then make sure to follow the `Getting started` section for how to ensure sourcemaps are correctly set up. Also, similar issues may occur on React Native version `0.58.*` in some special cases (see [#928](https://github.com/Microsoft/vscode-react-native/issues/928), [#907](https://github.com/Microsoft/vscode-react-native/issues/907)), bumping dependencies versions of `react` and `react-native` package to the more recent ones should resolve these. |
2af998b7Vladimir Kotikov8 years ago | 107 | 'adb: command not found' | If you receive an error `adb: command not found`, you need to update your system Path to include the location of your *ADB* executable.The *ADB* executable file is located in a subdirectory along with your other Android SDK files. |
| 108 | Targeting iPhone 6 doesn't work | There was a known issue with React Native ([#5850](https://github.com/facebook/react-native/issues/5850)) but it was fixed. Please upgrade your version of React Native. | |
daa5e58eRuslan Bikkinin8 years ago | 109 | Can't communicate with socket pipe | (Linux only) If you have two workspaces open that only differ in casing, the extension will fail to communicate effectively. |
d8cf3d51Yuri Skorokhodov6 years ago | 110 | "Add configuration" button doesn't work when trying to add debug configuration to `launch.json` | You may need to have to add in some json to `launch.json` manually. Please, see ([#985](https://github.com/Microsoft/vscode-react-native/issues/985)) |
fb81ad47Nisheet Jain10 years ago | 111 | |
90876b1cJimmy Thomson10 years ago | 112 | [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 ago | 113 | |
2af998b7Vladimir Kotikov8 years ago | 114 | ## Telemetry reporting |
35c07fedRuslan Bikkinin6 years ago | 115 | |
885d5dd9Nisheet Jain10 years ago | 116 | 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. |
| 117 | | |
2af998b7Vladimir Kotikov8 years ago | 118 | If you don’t wish to send usage data to Microsoft, edit `VSCodeTelemetrySettings.json` file at `~/.vscode-react-native` and add `optIn:false`. |
26dfc482Jimmy Thomson10 years ago | 119 | |
| 120 | ## Code of conduct | |
35c07fedRuslan Bikkinin6 years ago | 121 | |
26fa493aandrey8 years ago | 122 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. |