1.7K Views

JS102 - JavaScript Environment Setup

Learn how to set up your JavaScript development environment using VS Code, Node.js, and browser DevTools.

Before writing JavaScript code, you need a proper development environment.
In this lesson, you will learn how to install the necessary tools and configure your system for modern JavaScript development.

Why You Need a Development Environment

JavaScript can run directly in the browser, but using the right tools makes coding easier.
A good environment includes:

  • A code editor
  • A JavaScript runtime (Node.js)
  • Browser developer tools
  • Helpful extensions and linters

Installing VS Code

VS Code is one of the most popular editors for JavaScript.
It offers syntax highlighting, debugging, extensions, and built-in terminal support.

Download from the official website:
https://code.visualstudio.com

Recommended extensions:

  • ES7 React/JS Snippets
  • Prettier
  • ESLint
  • Live Server

Installing Node.js

Node.js allows you to run JavaScript outside the browser.
It also includes npm (Node Package Manager), which is essential for installing libraries.

Download Node.js from:
https://nodejs.org

Verify the installation:

node -v
npm -v

Using the Browser Console

All modern browsers include built-in developer tools.
The console tab allows you to run JavaScript instantly.

Open DevTools:

  • Chrome: Ctrl + Shift + J
  • Firefox: Ctrl + Shift + K
  • Edge: Ctrl + Shift + I

Example commands:

console.log("Testing JS");
5 * 7
"hello".toUpperCase()

Creating Your First JavaScript File

Create a file named script.js:

console.log("Hello JavaScript environment!");

Link it in an HTML file:

<html>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Open the HTML file in your browser and see the output in the console.

Using the Terminal

You can also run JavaScript using Node.js in the terminal:

node script.js

This is useful for learning core JavaScript without needing a webpage.

Summary

In this lesson, you learned:

  • How to install VS Code
  • How to install Node.js and npm
  • How to run JavaScript in the browser and terminal
  • How to create your first JS file

In the next lesson, we will explore JavaScript variables and data types.