I always think that I am a Magpie developer. I don’t know if others do this often; But, most of the times, I switch between my IDEs, trying out new frameworks ( even though it doesn’t solve most of my problems ).
So far I was using — and pretty happy with — Webstorm, Atom and Sublime. As I started with react-native development these days, I was searching for all the tools that will make my life easier. That’s when I added Visual studio Code to my IDEs list again. I tried Visual studio code initially when it’s released but didn’t give much importance. However, after trying the new version 1.0.0, I really liked it. The one main reason is the smooth debugging support they added using
This post is all about setting up Visual studio code for react-native development. I’m going to list down all the plugins I am using for linting, debugging and some of the settings I had to change to support ES6 code in Visual studio code.
Download and Install
Download the latest version of visual studio code from here. It’s just lightweight as Atom or Sublime.
install the following npm packages globally.
Installing the plugins in visual studio code is far easy. You just need to open the editor, press
CMD+SHIFT+P ( in OSX ) and type
ext install. Wait for some seconds, then VS code will show the available plugins ( extensions ).
Install the following plugins:
- React Native Tools
- Visual studio code settings sync ( this is useful for sharing the settings between multiple systems )
- Material theme of OneDark theme ( depends on your interest, you can choose any other )
- Babel ES6/ES7 ( for syntax highlighting )
Let’s add the following configurations to fix these issues. Press
CMD+, VS Code will open the settings window for you.
This should disable the default warnings and enable JSX highlighting inside the JS files.
.eslintrc in the root folder and add the following code:
Before moving on, try to use these keyboard shortcuts. They’ll come in handy soon.
- Toggle output console: CMD+SHIFT+U
- Open debugger panel: CMD+SHIFT+D
- Toggle debug console: CMD+SHIFT+Y
- Toggle file panel: CMD+B
- Open command pallete: CMD+SHIFT+P
- Search any file: CMD+P
- Search any symbol: CMD+SHIFT+O
- Rename any variable: F2
React native debugging
Once you install the react-native-tools extension, you can start debugging your react native application. For this, first, you need to add the configuration settings for the debugger.
CMD+SHIFT+D and click on the small play icon as shown in the below pic:
VS Code will now ask you to select the environment for debugging. Select
react-native from the dropdown, so a new launch.json will get created.
To start debugging, open the command window by pressing
CMD+SHIFT+P and type Debug Run
Now you can see that the debugger will attach to the react native packager itself and run
If you have the chrome debugger for react-native running in any of the browser tabs, you need to close that. Else the debugging from visual studio code doesn’t work.
That’s for now!
That’s all required for the initial set-up. Now you can put breakpoints in your code and start debugging. You’ll get the same environment like Chrome debugger, but right inside your editor. I will post more stuff about better debugging later. Enjoy!