Contact Information

KodeBlog

We're Available 24/ 7. Drop us an email.

JavaScript Setting Up the Development Environment

For you to get started developing JavaScript applications, you need a code editor and a JavaScript interpreter. We have web browsers that already come with interpreters when you are working with web pages. You can also run JavaScript code using Node that you can install on your machine. In this lesson, we will look at web browsers, NodeJS and Visual Studio Code

Topics to be covered

We will cover the following topics in this lesson

Lesson Prerequisites

For you to successfully complete this lesson, you should have the following requirements

Web Browsers

You can work with browsers like Chrome, Firefox, Safari etc. They all come with good JavaScript interpreters and developer tools that allow you to write and execute JavaScript code from within the browser.

Google Chrome

Personally I like Google Chrome and it works on all platforms and has great tools for debugging JavaScript. You can download Google Chrome from the official website

NodeJS

NodeJS is a container program for Chrome's v8 engine that allows you to run JavaScript outside of the web browser. You can download NodeJS from the official website for NodeJS.

We have a detailed tutorial on How to Install and Configure NodeJS so we won't go into more details in this section.

JavaScript Code Editors

A code editor is a program that allows you to write source code for your application. You can basically use any text editor such as Notepad or TextEdit to write JavaScript code and it will work just fine. But professional code editors optimized for JavaScript or IDEs like just make it super easy to write JavaScript code. They provide features such as syntax highlighting, autocompletion, debugging tools etc. Some of the popular code editors include

In this lesson, we will work with Visual Studio Code but feel free to use any of the above mentioned tools if you want to.

What is Visual Studio Code?

Visual Studio Code is a text editor developed by Microsoft. Visual Studio Code is a cross platform application. You can run it on Windows. MacOS or Linux. It supports a large number of languages, has a built-in terminal and a marketplace where you can download a wide variety of extensions.

Downloading Visual Studio Code

You can download VSC from the official Microsoft website. You can download the installer for your operating system. If you are on Windows operating system, then the installer for windows is selected for you automatically but you can change it if you need to.

Installing Visual Studio Code

Installing VSC is just like installing any other program on your computer. You just have to follow the step by step installation instructions of the setup wizard. This section assumes that you have successfully downloaded the installer. We will assume that you are working on a Windows machine. Follow the following steps to install

How to install Visual Studio Code on Windows

You should be able to see the following window

VSC Installer Step 1

Click on the button, you will get the following screen

VSC Installer Step 2

Accept the software agreement after reading it then click on Next button

VSC Installer Step 3

We will work with the default destination so just click on Next button

VSC Installer Step 4

Click on Next button to proceed

VSC Installer Step 5

Click on Next button to proceed

VSC Installer Step 6

Click on Install button to install Visual Studio Code

VSC Installer Step 7

Relax and watch the magic happen

VSC Installer Step 8

Congratulations, you just installed Visual Studio Code on your machine. Click on Finish button.

When you open Visual Studio Code, you should be able to see the following window

VSC Main Window

Visual Studio Code Extensions For JavaScript

Visual Studio Code is a general purpose code editor. While it comes with most features that you need to get started, you can install extensions that will supercharge your productivity.

In this section, we will only look at 3 extensions to keep it simple

  • ESLint - statically analyzes your code to quickly find problems
  • Prettier Code formatter - just like the name suggests, it formats your code to make it pretty.
  • Live Server - allows you to turn your folder into a web server in case you need one for your JavaScript application. Note: this extension is not actively maintained but it still works for basic tasks

Of course you can customize VSC Code depending on what you will be using JavaScript for but for now we will end here. We will install more extensions as we proceed.

Summary

JavaScript development requires a code editor and an interpreter. You can either use the interpreters in web browsers or you can execute JavaScript outside the browser using a program like NodeJS. Visual Studio Code has great support for JavaScript and you can use extensions to increase your productivity as a JavaScript developer.

Rodrick is a developer who works on Desktop, Web and Mobile Applications. He is familiar with Python, Java, JavaScript, C++, C#, Kotlin, PHP, Python and the list goes on. Rodrick enjoys sharing knowledge especially when it comes to technology.

JavaScript in Browsers

Leave A Reply