Learn JavaScript In Depth

Setting Up Your JavaScript Development Environment

Objective

Set up the tools required to write and run JavaScript — Visual Studio Code, Node.js, and a web browser.

Step 1: Install Visual Studio Code

1. Visit https://code.visualstudio.com/
2. Download the installer for your operating system (Windows, macOS, or Linux).
3. Run the installer and follow the on-screen instructions.
4. Launch Visual Studio Code after installation.

Step 2: Install Node.js

Node.js is required to run JavaScript files outside the browser.

1. Visit https://nodejs.org/
2. Download the LTS (Long Term Support) version.
3. Run the installer and accept the default settings.
4. After installation, reopen Visual Studio Code so it can recognize Node.js.

Step 3: Verify Node.js Installation

1. Open Visual Studio Code.
2. Open the integrated terminal: View → Terminal
3. Type the following command:

node -v

A version number confirms Node.js is installed correctly. If a "command not found" error appears, restart your computer and try again.

Step 4: Enable Auto Save in Visual Studio Code

Auto Save ensures your work is saved automatically and helps prevent data loss.

1. In Visual Studio Code, open: File → Auto Save
2. Confirm that Auto Save is checked (enabled).

Auto Save saves files after a short delay whenever you stop typing.

Step 5: Install Required VS Code Extensions

1. Open Visual Studio Code.
2. Open Extensions: use the left sidebar or press Ctrl + Shift + X
3. Search for and install the following:

• ESLint — Detects JavaScript errors and enforces coding standards while you write code.
• Prettier – Code Formatter — Automatically formats code for consistent style and readability.
• Code Runner — Run JavaScript files quickly without manually typing terminal commands.
• Live Server — Launches a local web server and automatically refreshes the browser when files change.

Step 6: Run a JavaScript File Using Node.js

Create a new file named hello.js and add the following code:

console.log('Hello, World!');

Open the integrated terminal (View → Terminal) and run:

node hello.js

Confirm that the output appears in the terminal.

Step 7: Run JavaScript Using the Browser Console

1. Open Google Chrome or Mozilla Firefox.
2. Right-click on any webpage and select Inspect.
3. Click the Console tab.
4. Type the following and press Enter:

console.log('Hello, World!');

Observe the output in the console panel.

Completion Checklist

• Installed Visual Studio Code
• Installed Node.js (LTS version)
• Verified Node.js using node -v
• Enabled Auto Save in Visual Studio Code
• Installed ESLint, Prettier, Code Runner, and Live Server
• Successfully ran JavaScript using both Node.js and the browser console