2 Steps to Setup Visual Studio Code Editor for React Native Development

Here are the 2 Steps to Setup Visual Studio Code Editor for React Native Development. To know more about the code editor for React Native Development please visit Choosing Code Editor for React Native Development.

Visual Studio Code is a source code editor developed by Microsoft. It is free and open-source also includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.

• Platform: Windows, Mac, Linux.
• Features:
  • Git commands built-in.
  • Extensible and customizable.
  • Code debugging right from the editor

2 Steps to Setup VS Code Editor

Here are the 2 steps to Setup VS Code Editor for React Native development

1. Installation of Visual Studio Code Editor

To start working with Visual Studio Code go to https://code.visualstudio.com/Download and download the Visual Studio Code setup as per your OS.

1.1. Windows user:

To install VS code editor in Windows you can download the executable file and follow the installer instructions to install the editor.

1.2. Linux users:

To install VS code editor in Linux operating system you can download the .deb file (code_1.XXX.deb) and can run the following command on the terminal to install it in your Linux machine.

sudo dpkg -i ~/path/to/code_1.XXX.deb

For Example, my .deb file is in the Downloads directory so the command will become

sudo dpkg -i Downloads/code_1.XXX.deb

After running the above command run the following command

sudo apt-get install -f

This will install the Visual Studio Code on your machine. Now you can search for it from the search menu or in your program files.

Click on the icon and here we go.

We are almost ready to open the integrated terminal of Visual Studio Code use ctrl+` or just go to “View” and then “Integrated terminal” click on it and you will get terminal right below your code.

2. Installation of Additional Extensions

You will also need to install some of the extensions that don’t get installed at the time of Visual Studio installation to work in react environment.

You can search and install as many extensions as you can but here are the must-have packages which will help you a lot:

• ReactNative Tools – This extension provides a development environment for React Native projects. 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.
• Babel JavaScript Which is fundamental for proper styling, since we’ll use “future-JS” (ES6+).
• ESLint (which requires ESLint, obviously) A Linter is conceptually a tool that runs through your code and tells you what you can do to write it “better”.
• Prettier — JavaScript formatter Which is helpful to format your code.

If you have any doubt or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂