How to Set Up Your JavaScript Development Environment

Before writing any JavaScript code, you need the right tools. A well-configured development environment makes the difference between struggling with tooling and focusing on learning the language itself. The good news is that JavaScript has one of the simplest setups of any programming language. You likely already have the most important tool installed: a web browser.

This guide walks you through choosing and configuring a code editor, mastering the browser developer console, installing Node.js to run JavaScript outside the browser, organizing your project files, and finally writing and running your first JavaScript code in three completely different ways.

Choosing the Right Code Editor

A code editor is where you will spend most of your development time. While you could write JavaScript in Notepad or TextEdit, a proper code editor provides syntax highlighting, auto-completion, error detection, and dozens of other features that dramatically speed up your workflow.

Visual Studio Code (VS Code): Recommended Choice

Visual Studio Code (commonly called VS Code) is a free, open-source code editor made by Microsoft. It has become the most popular code editor in the world among JavaScript developers, and for good reason.

Why VS Code dominates JavaScript development:

• Free and open source with no limitations
• Built-in JavaScript and TypeScript support out of the box, including IntelliSense (smart auto-completion)
• Integrated terminal so you can run commands without leaving the editor
• Built-in Git integration for version control
• Massive extension marketplace with thousands of free extensions
• Cross-platform: runs on Windows, macOS, and Linux
• Lightweight compared to full IDEs, but powerful enough for professional projects
• Regular monthly updates with new features and improvements

Download VS Code: https://code.visualstudio.com

Installing and Configuring VS Code

After downloading and installing VS Code, here are the first settings you should adjust. Open the Settings panel with Ctrl + , (Windows/Linux) or Cmd + , (macOS):

Essential settings to change:

Setting	Recommended Value	Why
Editor: Font Size	14-16	Comfortable for long coding sessions
Editor: Tab Size	2	Standard for JavaScript projects
Editor: Word Wrap	on	Prevents horizontal scrolling
Files: Auto Save	afterDelay	Saves files automatically
Editor: Format On Save	checked	Automatically formats code when you save
Editor: Minimap Enabled	unchecked (optional)	Frees up screen space

You can also edit settings directly in JSON format. Open the Command Palette with Ctrl + Shift + P (or Cmd + Shift + P on macOS), type "settings json", and select Preferences: Open User Settings (JSON):

{
    "editor.fontSize": 15,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "files.autoSave": "afterDelay",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true
}

Essential VS Code Keyboard Shortcuts

Learning a handful of shortcuts will save you hours over time:

Action	Windows/Linux	macOS
Open Command Palette	Ctrl + Shift + P	Cmd + Shift + P
Open Terminal	Ctrl + `	Cmd + `
Quick File Open	Ctrl + P	Cmd + P
Toggle Sidebar	Ctrl + B	Cmd + B
Find in File	Ctrl + F	Cmd + F
Find in All Files	Ctrl + Shift + F	Cmd + Shift + F
Duplicate Line	Shift + Alt + Down	Shift + Option + Down
Move Line Up/Down	Alt + Up/Down	Option + Up/Down
Comment/Uncomment	Ctrl + /	Cmd + /
Multi-Cursor Select	Ctrl + D	Cmd + D

WebStorm (Premium Alternative)

WebStorm by JetBrains is a full-featured IDE (Integrated Development Environment) designed specifically for JavaScript and TypeScript development.

Advantages over VS Code:

• Smarter refactoring tools built in (not via extensions)
• More powerful debugging and profiling
• Better out-of-the-box experience (fewer extensions needed)
• Superior code navigation in large projects

Disadvantages:

• Paid software (free for students and open-source contributors)
• Heavier on system resources
• Slower startup time

Best for: Professional developers working on large, complex projects who want everything configured out of the box.

Other Alternatives

Editor	Best For	Notes
Sublime Text	Speed enthusiasts	Extremely fast, lightweight, paid license
Vim / Neovim	Terminal-based workflow	Steep learning curve, ultimate customization
Zed	Modern, fast editing	New editor written in Rust, gaining popularity
Atom	N/A	Discontinued by GitHub in 2022, do not use

tip

If you are just starting out, use VS Code. It is the industry standard, it is free, and virtually every JavaScript tutorial and course assumes you are using it. You can always switch later once you know what you need.

Essential VS Code Extensions for JavaScript Development

VS Code's real power comes from its extension ecosystem. Here are the extensions every JavaScript developer should install.

Must-Have Extensions

To install any extension, click the Extensions icon in the sidebar (or press Ctrl + Shift + X / Cmd + Shift + X) and search by name.

1. ESLint

ESLint is a linter that analyzes your code for potential errors and enforces coding style rules. It catches bugs before you even run your code.

// ESLint would flag this: 'x' is assigned but never used
const x = 10;

// ESLint would flag this: unexpected use of '==' instead of '==='
if (name == "Alice") { }

2. Prettier - Code Formatter

Prettier automatically formats your code to be consistent and readable. No more arguing about indentation, semicolons, or quote styles. When you save a file, Prettier reformats it instantly.

Before Prettier:

const   user={name:"Alice",age:30,   city:  "New York"}
function greet(   name){return "Hello, "+name   }

After Prettier:

const user = { name: "Alice", age: 30, city: "New York" };
function greet(name) {
  return "Hello, " + name;
}

info

To make Prettier your default formatter, add this to your VS Code settings:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

3. Live Server

Live Server launches a local development server that automatically refreshes the browser every time you save an HTML or JavaScript file. This eliminates the need to manually reload the page.

Right-click any HTML file and select "Open with Live Server" to start.

4. Error Lens

Error Lens displays errors and warnings inline, directly next to the problematic line of code, instead of making you hover over squiggly underlines to see the message.

Recommended Extensions

Extension	Purpose
JavaScript (ES6) code snippets	Shortcuts for common JS patterns (clg → console.log())
Path Intellisense	Auto-completes file paths when importing
Auto Rename Tag	Renames matching HTML tags automatically
Bracket Pair Colorization	Built into VS Code now, but ensure it is enabled
GitLens	Enhanced Git integration and blame annotations
Thunder Client	API testing tool inside VS Code (Postman alternative)

A Word of Caution

Do not install dozens of extensions at once. Start with ESLint, Prettier, Live Server, and Error Lens. Add others only when you encounter a specific need. Too many extensions can slow down VS Code and create conflicts.

Using the Browser Developer Console

Every modern web browser includes Developer Tools (DevTools), and the Console tab within DevTools is one of the most important tools for JavaScript development. It allows you to execute JavaScript code instantly, inspect errors, and debug your programs.

Opening the Developer Console

Browser	Keyboard Shortcut	Alternative
Chrome	F12 or Ctrl + Shift + J (Windows) / Cmd + Option + J (macOS)	Right-click page → Inspect → Console tab
Firefox	F12 or Ctrl + Shift + K (Windows) / Cmd + Option + K (macOS)	Right-click page → Inspect → Console tab
Edge	F12 or Ctrl + Shift + J	Right-click page → Inspect → Console tab
Safari	Cmd + Option + C	Enable Developer menu first in Safari → Settings → Advanced

Writing JavaScript in the Console

The console is a REPL (Read-Eval-Print Loop). You type a JavaScript expression, press Enter, and the console immediately shows the result.

Try these examples by typing them directly into the console:

// Basic arithmetic
2 + 3
// Output: 5

// String manipulation
"Hello, " + "World!"
// Output: "Hello, World!"

// Creating variables
let name = "Alice";
console.log(name);
// Output: Alice

// Working with dates
new Date().toLocaleDateString()
// Output: "1/15/2025" (varies by date and locale)

// Checking the current page URL
window.location.href
// Output: the URL of the current page

Multi-Line Code in the Console

To write multiple lines of code in the console, press Shift + Enter to create a new line without executing:

// Press Shift + Enter after each line, then Enter on the last line
function greet(name) {
  return `Hello, ${name}! Welcome to JavaScript.`;
}

greet("Alice");
// Output: "Hello, Alice! Welcome to JavaScript."

Useful Console Features

console.log() is the most common, but the console object has several other helpful methods:

// Standard output
console.log("Regular message");

// Warning (yellow background)
console.warn("This is a warning");

// Error (red background)
console.error("Something went wrong!");

// Tabular data
console.table([
  { name: "Alice", age: 30 },
  { name: "Bob", age: 25 }
]);

// Timing code execution
console.time("loop");
for (let i = 0; i < 1000000; i++) { }
console.timeEnd("loop");
// Output: loop: 3.456ms

// Clearing the console
console.clear();

tip

The browser console is perfect for quick experiments and testing small snippets. You do not need to create a file every time you want to try something. Throughout your JavaScript learning journey, keep the console open and experiment constantly.

Beyond the Console Tab

The browser DevTools include several other panels that you will use frequently:

• Elements: Inspect and modify the HTML/CSS of any page in real time
• Sources: Set breakpoints and step through JavaScript code line by line
• Network: Monitor all HTTP requests (API calls, images, scripts)
• Application: Inspect cookies, localStorage, sessionStorage, and IndexedDB
• Performance: Profile your application's performance

Running JavaScript Outside the Browser: Introduction to Node.js

JavaScript was originally designed to run only inside web browsers. That changed in 2009 when Ryan Dahl created Node.js, a runtime that allows JavaScript to run on your computer as a standalone program, just like Python, Java, or any other programming language.

What Is Node.js?

Node.js is a JavaScript runtime built on Chrome's V8 engine. It takes the same engine that runs JavaScript in Chrome and wraps it with APIs for file system access, networking, operating system interaction, and more.

With Node.js, you can:

• Run JavaScript files directly from your terminal
• Build web servers and APIs
• Create command-line tools
• Interact with databases
• Read and write files on your computer

Installing Node.js

Step 1: Go to https://nodejs.org

Step 2: Download the LTS (Long-Term Support) version, not the "Current" version. LTS is more stable and recommended for most developers.

Step 3: Run the installer and follow the prompts. Accept the default settings.

Step 4: Verify the installation by opening your terminal (or VS Code's integrated terminal) and running:

node --version
# Output: v20.x.x (or similar, depending on version)

npm --version
# Output: 10.x.x (or similar)

If both commands display version numbers, Node.js is installed correctly.

info

npm (Node Package Manager) is installed automatically with Node.js. It is the tool you will use to install third-party libraries and manage project dependencies. You do not need to install it separately.

Running JavaScript with Node.js

Once Node.js is installed, you can run any JavaScript file from the terminal:

# Create a file called hello.js, then run it:
node hello.js

You can also start an interactive REPL (similar to the browser console) by simply typing node in the terminal:

node
# Now you can type JavaScript directly:
> 2 + 3
5
> "Hello".toUpperCase()
'HELLO'
> .exit

Type .exit or press Ctrl + C twice to leave the Node.js REPL.

Alternative Runtimes

While Node.js is the standard, two newer JavaScript runtimes are gaining traction:

Runtime	Created By	Key Feature
Node.js	Ryan Dahl (2009)	The established standard, massive ecosystem
Deno	Ryan Dahl (2018)	Secure by default, built-in TypeScript, modern APIs
Bun	Jarred Sumner (2022)	Extremely fast, aims to replace Node.js entirely

For learning JavaScript, stick with Node.js. It has the largest ecosystem, the most tutorials, and the widest industry adoption.

Setting Up Your First Project Folder and File Structure

Organization matters from day one. A clean project structure helps you find files quickly, makes your projects understandable to others, and prepares you for real-world development.

Creating a Project Folder

Create a folder on your computer for your JavaScript learning projects. Here is a recommended structure:

javascript-learning/
├── 01-fundamentals/
│   ├── index.html
│   ├── script.js
│   └── style.css
├── 02-functions/
│   ├── index.html
│   └── script.js
├── 03-objects/
│   ├── index.html
│   └── script.js
└── sandbox/
    ├── index.html
    └── test.js

The Minimal HTML File

For browser-based JavaScript, you need an HTML file that loads your JavaScript. Here is the minimal template you will use throughout your learning:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Practice</title>
</head>
<body>
    <h1>JavaScript Practice</h1>
    <p id="output"></p>

    <!-- JavaScript file loaded at the end of body -->
    <script src="script.js"></script>
</body>
</html>

caution

Notice that the <script> tag is placed at the end of the <body>, just before </body>. This ensures the HTML content is fully loaded before the JavaScript runs. Placing scripts in the <head> without defer or async can cause errors because the JavaScript tries to access HTML elements that have not been created yet. We will cover this in detail later.

Opening a Folder in VS Code

The most important habit: always open the entire folder in VS Code, not individual files.

Method 1: In VS Code, go to File → Open Folder and select your project folder.

Method 2: From the terminal, navigate to your folder and type:

cd javascript-learning
code .

The code . command opens the current folder in VS Code. If this command does not work, open VS Code, press Ctrl + Shift + P, type "shell command", and select "Install 'code' command in PATH".

Hands-On: Write and Run Your First JavaScript in 3 Different Ways

Now let us put everything together. You will write and execute JavaScript using three different methods. Each method has its own use case, and you will use all three throughout your learning.

Method 1: The Browser Console

This is the quickest way to test JavaScript. No files needed.

Step 1: Open any browser (Chrome recommended).

Step 2: Open the Developer Console (F12 or Ctrl + Shift + J).

Step 3: Type the following and press Enter:

console.log("Method 1: Hello from the browser console!");

Output:

Method 1: Hello from the browser console!

Now try something interactive:

let yourName = prompt("What is your name?");
console.log(`Nice to meet you, ${yourName}!`);

A dialog box appears asking for your name. After you type it and click OK, the greeting appears in the console.

Best for: Quick experiments, testing small code snippets, debugging.

Method 2: An HTML File with an External JavaScript File

This is how JavaScript is used in real websites.

Step 1: Create a new folder called first-project inside your javascript-learning directory.

Step 2: Inside that folder, create two files:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First JavaScript</title>
</head>
<body>
    <h1>My First JavaScript Program</h1>
    <p id="output">Waiting for JavaScript...</p>

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

script.js:

// Change the text on the page
document.getElementById("output").textContent =
  "Method 2: Hello from an external JavaScript file!";

// Also log to the console
console.log("Method 2: JavaScript file loaded successfully!");
console.log("Check the browser page: the text has changed!");

Step 3: Open index.html in your browser. You can either:

• Double-click the file in your file explorer
• Right-click the file in VS Code and select "Open with Live Server" (if you installed the extension)

Result: The page displays "Method 2: Hello from an external JavaScript file!" instead of "Waiting for JavaScript..." and the console shows the log messages.

Best for: Building websites, learning DOM manipulation, front-end development.

Method 3: Node.js in the Terminal

This method runs JavaScript without any browser at all.

Step 1: Create a file called hello-node.js in your project folder.

hello-node.js:

// This runs directly on your computer, no browser needed
console.log("Method 3: Hello from Node.js!");

// Node.js can do things browsers cannot
const os = require("os");
console.log(`Your computer: ${os.platform()}, ${os.cpus().length} CPU cores`);
console.log(`Free memory: ${Math.round(os.freemem() / 1024 / 1024)} MB`);

Step 2: Open the terminal in VS Code (Ctrl + `) and run:

node hello-node.js

Output:

Method 3: Hello from Node.js!
Your computer: win32, 8 CPU cores
Free memory: 5765 MB

note

Your output will vary depending on your operating system and hardware.

Best for: Server-side programming, scripting, automation, learning core JavaScript without HTML/CSS.

tip

Notice that document.getElementById() would not work in Node.js because there is no browser and no web page. Similarly, require("os") would not work in a browser because browsers do not expose operating system information. This is the difference between the browser runtime and the Node.js runtime we discussed earlier.

Which Method Should You Use?

Method	When to Use
Browser Console	Quick tests, experimenting with syntax, debugging
HTML + JS File	Learning DOM manipulation, building web pages, visual output
Node.js	Learning core JavaScript, server-side code, running scripts

For learning JavaScript fundamentals (variables, functions, loops, objects), any method works. The browser console is fastest for small experiments, while creating files is better for longer exercises you want to save and revisit.

Summary

Your JavaScript development environment is now ready. Here is what you have set up:

• VS Code as your code editor, configured with essential settings
• Extensions for linting (ESLint), formatting (Prettier), and live reloading (Live Server)
• Browser DevTools for quick JavaScript experimentation and debugging
• Node.js for running JavaScript outside the browser
• A project folder structure to keep your work organized
• Three methods for writing and running JavaScript code

With these tools in place, you have everything you need to start writing JavaScript. The next step is to create your first real program: the classic "Hello, World!" exercise, where you will explore how JavaScript connects to HTML and learn the different ways to produce output.