Setting Up Your Environment

A good development environment removes friction so you can focus on the code instead of the tooling. For JavaScript you need surprisingly little: a modern browser for the front end, a capable editor, and the Node.js runtime for everything outside the browser. This page walks through installing each piece, adding a few high-value editor extensions, and building a tiny project to confirm the whole setup actually runs.

A modern browser and DevTools

Start with an evergreen browser — Chrome, Firefox, or Edge. They auto-update, ship the latest JavaScript features quickly, and include powerful DevTools for inspecting pages and running code.

Open DevTools with F12, or Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS). The Console tab gives you a live JavaScript interpreter; the Sources tab lets you set breakpoints and step through code; the Network tab shows every request a page makes. You will live in these panels while building anything visual.

// Paste into the Console to confirm it works
console.log(`Browser is ready: ${navigator.userAgent.split(") ")[0]})`);

Tip: Keep one browser as your “clean” profile with no extensions. Ad blockers and other add-ons can interfere with your own scripts and make bugs harder to reproduce.

Installing VS Code

Visual Studio Code is the de facto editor for JavaScript: free, fast, and deeply integrated with the language. Download the installer for your platform and accept the defaults. On Windows, enable Add to PATH so you can launch it from a terminal with code ..

A few extensions pay for themselves immediately:

Extension	What it does
ESLint	Flags bugs and style issues as you type
Prettier	Formats code automatically on save
Path Intellisense	Autocompletes file paths in imports
Error Lens	Shows errors and warnings inline
Live Server	Serves your HTML with auto-reload

To enable format-on-save with Prettier, open settings (Ctrl+,) and add this to your settings.json:

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

Installing Node.js and npm

Node.js runs JavaScript outside the browser and is required for build tools, package management, and server-side code. Installing it also gives you npm, the package manager used to pull in libraries.

Download the LTS (Long-Term Support) release rather than the bleeding-edge build — it is the version most projects and CI systems target. If you expect to juggle multiple Node versions, install a version manager like nvm (macOS/Linux) or nvm-windows instead of the raw installer.

Verify both tools from a terminal:

node --version
npm --version

Output:

v22.11.0
10.9.0

Note: If node is not found after installing, close and reopen your terminal so it picks up the updated PATH. On a fresh machine this is the single most common setup snag.

Building a minimal project

With the tools in place, scaffold a tiny project to prove everything connects. Create a folder, then add two files.

my-app/
├── index.html
└── script.js

The HTML loads your script as a module so it runs in strict mode and supports import/export:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <h1 id="status">Loading…</h1>
    <script type="module" src="script.js"></script>
  </body>
</html>

The script updates the page and logs to the console:

const status = document.getElementById("status");
status.textContent = "Environment is working!";
console.log("Front-end script ran successfully");

Open index.html with Live Server (right-click in VS Code → Open with Live Server). The heading should change and the Console should show your log line.

Verify a hello-world Node run

To confirm the Node side, create a standalone script — no browser involved:

const stack = ["browser", "VS Code", "Node"];
const greeting = `Hello, ${stack.join(" + ")}!`;
console.log(greeting);

Save it as hello.js and run it:

node hello.js