How to Set Up an Emulator For VSCode?

VSCode is an Advanced source code editor which can be used with a variety of programming languages, including Java, JavaScript, Go, Node.js, Python, and C++. VSCode was developed by Microsoft for Windows to develop GUI, Mobile Applications and also Web Applications, and many more.  

To download and set up with VSCode you can follow the VSCode Setup tutorial. An emulator is software or hardware that enables one device to behave like another device. It can be simply defined as the ability of a computer program in an electronic device to emulate (imitate) another program or device.

When we create Mobile Applications using VSCode we need to deploy it somewhere to examine the GUI and working of our application and modify accordingly. But it takes a lot of time to make it into APK and open it in the mobile phone again and again when we need to see our output and modify it. The Android Emulator simulates Android devices on your computer so that you can test your application on a variety of devices and Android API levels without needing to have each physical device.

Here in this article, we are going to see the different ways to Set Up an Emulator for VSCode.

Method  1: Using Genny motion Emulator

Step by step implementation

Step 1: Download Genny motion Emulator along with Virtual box. https://www.genymotion.com/download/

Step 2: Open Genny motion Emulator.

If you don’t have a virtual box installed on your PC then you may encounter this error

Then install the Virtual box from this link, and after installation, you can follow the Genny motion tutorial for the remaining setup of genny motion and the details of how to install the virtual devices and all.

Step 3: Once you install the virtual device Start the Virtual device from Virtual box or Genny Motionx. When you open Genny motion your installed devices would be shown like in the below image and to install new devices you need to click on the plus (“+”) symbol at the top right.

When you click on some device. The device will run and you can see a virtual mobile on your screen.

The virtual mobile on the screen

Step 4: That’s it you are sorted out and when you run the code in VSCode it would run directly in the virtual device and you can feel the UI as it is in the mobile phone and examine the UI, make necessary changes in the code if any, and hot reload the device again by clicking CTRL+R to view the updated changes.

Method  2: Using Android iOS Emulator extension in VSCode

Step by step implementation

Step 1: Go to the Extensions button on VSCode and search for Android and iOS Emulator and install it.

Install that extension

Step 2: Click on the Settings icon>click on the Extension settings button then you see page as below image

Give Emulator path as same as mentioned in the image 

Note: Change the Emulator path windows address based on the location of the emulator file on your PC but make the Emulator path as default it would be given as default by the VSCode.

Step 3: Now you are sorted out and you will get the mobile icon on the top right as you click that icon you will get the list of available virtual devices.

If you click on the device, you want that would open as a virtual mobile device and when you run the code it runs directly into the virtual device and you can feel the UI as it is in the mobile phone and examine the UI, make necessary changes in the code and hot reload the device again by clicking CTRL+R to view the updated changes.

Method 3: Using AVD (Android Virtual Device) manager

Step by step implementation

Step 1: We need to have Android Studio in our System to manage Virtual devices using AVD Manager and for installing AVD Manager in Android Studio you can follow this tutorial.

Step 2: As you install a new virtual device in the AVD Manager that would be reflected in the VSCode.

Here you can see No device initially

Step 3: If you click on the No Device you will get a list of devices that you have created an AVD Manager and also browsers

Step 4: If you click on the device, you want that would open as a virtual mobile device and when you run the code it runs directly into the virtual device and you can feel the UI as it is in the mobile phone and examine the UI, make necessary changes in the code and hot reload the device again by clicking CTRL+R to view the updated changes.