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.
- 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.
- 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”.
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. 🙂