Header Ads Widget

How to configure Visual Studio Code (IDE) for JavaScript Development



New to JavaScript development? Thinking about which IDE should you use and how to configure your IDE? How to test JavaScript code? How to debug JavaScript Code?

All these are valid and important questions to ask. I am going to create three posts covering each of these above three important points. Today's post is all about answering the first question. From this post, you can expect -
  • How to configure Visual Studio Code (IDE) for JavaScript Development

Configuring Visual Studio Code (IDE) for JavaScript Development

I personally like using Visual Studio Code for all my development work including JavaScript development. It is a very powerful source code editor. It is available for Windows, macOS and Linux. 
You can install it from here.

Once you install it, launch the application. Open the Command Palette and type 'shell command' to execute Shell Command: Install 'code' command in PATH.
Restart VS Code and that makes your editor ready to be configured for JavaScript. Pretty quick, right? Trust me this editor is also very lightweight.

Now to develop JavaScript and execute JavaScript, all you need is node.js. Installing node.js is very simple. You can refer this link

I personally prefer installing node through Brew. To do that, execute the below command from terminal in macOS.
brew install node
You can verify whether node is installed correct by doing this -

 sudipta@Sudiptas-MacBook-Pro-2  ~/Documents/JavaScript node --version

v14.5.0


With that launch Visual Studio code and open Extension. Search for Babel ES6 and install the same. You can also open Babel ES6/ES7 from here. I highly recommend this as this will help you in coloring your JavaScript code and also highlight any syntax error. That's all you need to configure your IDE (Visual Studio Code) for JavaScript development.

With your Visual Studio code configured, you can execute your JavaScript code from Visual Studio code's terminal by executing node <JavaScript File Name>. Refer the below screenshot -


Post a Comment

0 Comments