Visual Studio Code supports over 40 programming languages and is a free cross-platform text editor mainly used for front-end development. It is a product of Microsoft and can be used in almost all the major operating systems like Linux, Windows, and macOS. Visual Studio Code is widely used for JavaScript development as it is lightweight yet has powerful inbuilt features like IntelliSense (code quicker as it shows intelligent code completion), formatting, refactorings, code navigation, debugging, and much more.
We’ll look at how to set up Visual Studio Code for JavaScript in this post. Let’s take the first step, which is to install Visual Studio Code in our Windows.
Visual Studio Code Installation
To install Visual Studio Code, first, we have to download it from the below-mentioned link:
https://code.visualstudio.com/
When you visit the above URL, you’ll see a blue button that will say Download for Windows. Click on this button.
When you click the blue button, downloading will start:
Once your download is finished, click on the downloaded file shown in the above screenshot.
Once done, you will see a window pop up which is a License agreement for Visual Studio Code. Select the “I accept the agreement” option and then click on the Next button:
The next window that will pop up will be for selecting additional tasks. Select all the options you need and then click on Next button:
Once you click the Next button, the Ready to Install window will show up where you have to click on the Install button:
The installation will now start:
Once the installation is complete click on the finish button and your Visual Studio Code will launch.
Setup Visual Studio Code
Now that we are done with downloading and installing Visual Studio Code, let us set up our editor for JavaScript. The first step in setting up our Visual Studio Code is to install the required extensions, which will help us code efficiently and quickly. The extension icon is present at the left shown in the below screenshot:
Once you click the extension’s icon, search for the desired extension you want to install.
Let’s install the LiveServer extension which is very useful as it has the automatic live reload feature. We don’t need to save our file, it will automatically save and show the output on our browser whenever we make changes to our code.
Search the Live Server in the extension tab and click on the below-mentioned icon:
Once you click on the Live Server, you will see the install option on the right-hand side. Click on the install button to install Live Server:
Once you click on the install button, your Live Server will install:
Another extension we can install in our Visual Studio Code is the JavaScript (ES6) code snippet which is very useful as this extension comes in numerous built-in code snippets. The procedure for installing ES6 code snippets is the same as installing the Live Server extension.
Conclusion
JavaScript is a web programming language that makes our web applications and web pages dynamic and interactive by giving them the ability to think and act. To code efficiently and quicker, a developer needs an IDE. IDE is software where common developer tools are combined and are available in a single GUI interface. One of the best IDE used for JavaScript is Visual Studio Code that offers powerful developing tools and features such as code completion, IntelliSense, debugger, and much more.
In this post, we set up Visual Studio Code for JavaScript by first downloading and installing it and then installing extensions in the Visual Studio Code IDE.
