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.5.2

Branches

Tags

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

Clone

HTTPS

Download ZIP

README.md

94lines · 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.
2af998b7Vladimir Kotikov8 years ago5Using this extension, 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.
885d5dd9Nisheet Jain10 years ago6
7![React Native features](images/react-features.gif)
8
9## Getting started
10
2af998b7Vladimir Kotikov8 years ago11* [Install VS Code](https://code.visualstudio.com).
10daaf2eEric Hamilton10 years ago12* [Install the extension](https://code.visualstudio.com/docs/editor/extension-gallery) in VS Code:
2af998b7Vladimir Kotikov8 years ago131. Press `Ctrl + Shift + X` (`Cmd + Shift + X` on macOS), wait a moment while the list of available extensions is populated
10bc5320thehenrytsai8 years ago142. Type `react-native` and install **React Native Tools**
10daaf2eEric Hamilton10 years ago153. 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:
2af998b7Vladimir Kotikov8 years ago171. Run `npm install -g react-native-cli` to install React Native CLI
182. 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 ago19* Open your React Native project root folder in VS Code.
f16656e9frogcjn9 years ago20
2af998b7Vladimir Kotikov8 years ago21Please 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 ago22
2af998b7Vladimir Kotikov8 years ago23## Debugging React Native applications
360d66e3Nisheet Jain10 years ago24
2af998b7Vladimir Kotikov8 years ago25Click the debug icon ![Choose React Native debugger](images/debug-view-icon.png) in the View bar, and then click the configuration (gear) icon ![Configure-gear](images/configure-gear-icon.png), then choose the React Native debug environment.
885d5dd9Nisheet Jain10 years ago26
27![Choose React Native debugger](images/choose-debugger.png)
28
2af998b7Vladimir Kotikov8 years ago29VS 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_ ![Configure-gear](images/debug-icon.png) button) to start debugging your app in VS Code.
885d5dd9Nisheet Jain10 years ago30
4cb2a3dfNisheet Jain10 years ago31![React Native launch targets](images/debug-targets.png)
885d5dd9Nisheet Jain10 years ago32
2af998b7Vladimir Kotikov8 years ago33You 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 ago34
10daaf2eEric Hamilton10 years ago35More information about debugging using VS Code can be found in this [guide](https://code.visualstudio.com/docs/editor/debugging).
885d5dd9Nisheet Jain10 years ago36
2af998b7Vladimir Kotikov8 years ago37See [Setting up debug environment](doc/debugging.md) for more details.
36ae0655Nisheet Jain10 years ago38
885d5dd9Nisheet Jain10 years ago39## Using React Native commands in the Command Palette
40
2af998b7Vladimir Kotikov8 years ago41In the Command Palette, type `React Native` and choose a command.
885d5dd9Nisheet Jain10 years ago42
43![React Native commands](images/command-palette.png)
44
2af998b7Vladimir Kotikov8 years ago45The **Run Android** command triggers `react-native run-android` and starts your app for Android.
885d5dd9Nisheet Jain10 years ago46
2af998b7Vladimir Kotikov8 years ago47The **Run iOS** command similarly triggers `react-native run-ios` and starts your app in the iOS simulator (iPhone 6).
885d5dd9Nisheet Jain10 years ago48
c6e71ae2Arnold Schrijver8 years ago49The **Packager** commands allow you to start/stop the [**Metro Bundler**](https://github.com/facebook/metro-bundler) (formerly React Packager).
885d5dd9Nisheet Jain10 years ago50
36ae0655Nisheet Jain10 years ago51## Using IntelliSense
885d5dd9Nisheet Jain10 years ago52
e44dc90cNisheet Jain10 years ago53IntelliSense helps you discover objects, functions, and parameters in React Native.
885d5dd9Nisheet Jain10 years ago54
55![IntelliSense](images/intellisense.png)
56
2af998b7Vladimir Kotikov8 years ago57IntelliSense is enabled automatically once you open the project in VS Code, so no additional action is required. Notice that in order to set it up, the extension might create a `jsconfig.json` file (if no such file exists) in the project root with `allowJs: true` to allow TypeScript to process JavaScript files.
cbb0e869Artem Egorov8 years ago58
2af998b7Vladimir Kotikov8 years ago59See also [Setting up Flowtype for IntelliSense](doc/intellisense.md) for more advanced setup.
cbb0e869Artem Egorov8 years ago60
2af998b7Vladimir Kotikov8 years ago61## Using Expo
cbb0e869Artem Egorov8 years ago62
2af998b7Vladimir Kotikov8 years ago63We support using exponentjs to run, debug and publish applications. For more information on exponent, see [here](https://docs.getexponent.com/).
cbb0e869Artem Egorov8 years ago64
2af998b7Vladimir Kotikov8 years ago65For more details about configuring and debugging Expo applications see [Expo docs](doc/expo.md)
5a8b1845Patricio Beltran9 years ago66
1c530236Artem Egorov8 years ago67## Build APK and Generate Bundle
68
7100cfc0Serge Svekolnikov8 years ago69You can add VSCode tasks to build an .apk file and generate iOS/Android bundles. See [here](tasks.md) for more info.
1c530236Artem Egorov8 years ago70
2af998b7Vladimir Kotikov8 years ago71## Contributing
1c4e79a1Jimmy Thomson9 years ago72
2af998b7Vladimir Kotikov8 years ago73Please see our [contributing guide](CONTRIBUTING.md) for more information
1c4e79a1Jimmy Thomson9 years ago74
4cb2a3dfNisheet Jain10 years ago75## Known Issues
fb81ad47Nisheet Jain10 years ago76
1a51a6f0Eric Hamilton10 years ago77Here is the list of common known issues you may experience while using the extension:
fb81ad47Nisheet Jain10 years ago78
29bae58aNisheet Jain10 years ago79Issue | Description
80------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------
2af998b7Vladimir Kotikov8 years ago81Debugger 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.
82'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.
83Targeting 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.
1c530236Artem Egorov8 years ago84Can't comunicate with socket pipe | (Linux only) If you have two workspaces open that only differ in casing, the extension will fail to comunicate effectively.
fb81ad47Nisheet Jain10 years ago85
90876b1cJimmy Thomson10 years ago86[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 ago87
2af998b7Vladimir Kotikov8 years ago88## Telemetry reporting
885d5dd9Nisheet Jain10 years ago89VS 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.
90
2af998b7Vladimir Kotikov8 years ago91If 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 ago92
93## Code of conduct
2af998b7Vladimir Kotikov8 years ago94This 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.