Setting Up JavaScript Development Environment

What You Need

Before writing any code, it helps to understand what each tool does. Node.js is the runtime that lets JavaScript execute outside the browser — on your machine, on servers, anywhere. npm is the package manager bundled with Node.js that gives you access to millions of open-source libraries. VS Code is the editor: it understands JavaScript deeply, offering autocomplete, inline errors, and a built-in terminal.

To follow along with this tutorial series you need:

1. Node.js (LTS) — the JavaScript runtime for running code outside the browser
2. npm — the package manager, bundled with Node.js automatically
3. VS Code — the most widely used editor for JavaScript development
4. A terminal (PowerShell on Windows, Terminal on macOS/Linux)

Installing Node.js

Node.js has two release lines: Current (latest features) and LTS (Long-Term Support). For learning and for any serious project, always choose LTS — it receives security patches for 30 months and is what the broader ecosystem targets.

Go to nodejs.org and download the LTS installer for your operating system. The installer also installs npm.

After installation, verify both are available:

node --version
# v20.x.x  (LTS version)

npm --version
# 10.x.x

Using a Version Manager (Recommended)

As you work on more projects you’ll eventually encounter situations where different projects require different versions of Node. A version manager solves this cleanly — it lets you install multiple Node versions side by side and switch between them with one command.

• Windows: nvm-windows
• macOS/Linux: nvm or fnm

# With nvm installed:
nvm install --lts           # install latest LTS
nvm use --lts               # activate it
nvm install 18              # install a specific version
nvm use 18                  # switch to it

Installing VS Code

Download from code.visualstudio.com. It’s free and available for Windows, macOS, and Linux.

Essential Extensions

VS Code’s power comes from its extension ecosystem. These five extensions cover the essentials for JavaScript development — linting, formatting, path completion, and better error visibility. Install them from the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X):

Recommended VS Code Settings

These settings make the editor work the way most JavaScript teams expect. The most important one is formatOnSave — it means you never have to think about formatting; save the file and Prettier fixes it automatically.

Open settings (Ctrl+,) and add these to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "javascript.updateImportsOnFileMove.enabled": "always"
}

The Browser Developer Tools Console

You don’t always need Node.js. For quick experiments and debugging, your browser’s built-in console is always available — no setup, no files. It’s the fastest way to test a snippet or explore how a built-in method works.

1. Open Chrome, Edge, or Firefox
2. Press F12 (or right-click → Inspect)
3. Click the Console tab
4. Type JavaScript directly and press Enter

// Try this in the browser console
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

The browser console is perfect for exploring DOM APIs, testing snippets, and debugging live pages.

Your First Node.js Program

Running JavaScript through Node.js is the foundation for everything in this series. It lets you execute any .js file from your terminal, access the filesystem, and use npm packages. Create a new folder and open it in VS Code:

mkdir js-practice && cd js-practice
code .

Create a file called hello.js:

// hello.js
// A simple function that returns a greeting string
function greet(name) {
  return `Hello, ${name}! Welcome to JavaScript.`;
}

const names = ['Alice', 'Bob', 'Charlie'];

// forEach iterates the array and runs the callback for each element
names.forEach(name => {
  console.log(greet(name));
});

Run it from the terminal inside VS Code (`Ctrl+“ to open it):

node hello.js
# Hello, Alice! Welcome to JavaScript.
# Hello, Bob! Welcome to JavaScript.
# Hello, Charlie! Welcome to JavaScript.

Initializing a Project with npm

Most real projects depend on external packages — UI libraries, utility functions, testing frameworks. The package.json file is how Node.js tracks those dependencies and lets anyone clone your project and install everything they need with one command.

npm init -y

This creates a package.json with sensible defaults. The -y flag accepts all prompts automatically.

{
  "name": "js-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js"
  }
}

The scripts block lets you define shortcuts that any contributor can run without knowing the underlying commands:

npm run start   # runs "node index.js"
npm run dev     # runs with --watch, auto-restarts on file change

node --watch was added in Node 18 and replaces the popular nodemon package for simple cases.

Running a Script with a Dependency

Installing a package and using it is the core npm workflow. Once you run npm install, the package is downloaded into node_modules/ and recorded in package.json — anyone who clones the repo can run npm install to get the exact same versions.

npm install chalk

Now use it in a script:

// colorful.js
// chalk adds ANSI color codes to terminal output
import chalk from 'chalk';

console.log(chalk.green('Success:'), 'Server started');
console.log(chalk.red('Error:'), 'Connection refused');
console.log(chalk.yellow('Warning:'), 'Disk usage above 80%');

For ES module imports (import syntax) you need to add "type": "module" to package.json:

{
  "type": "module"
}

node colorful.js

You’ll see colored output in the terminal — chalk is a tiny but very practical package.

Project Structure Conventions

Keeping a predictable folder structure matters once a project grows beyond a handful of files. The most important rule: never commit node_modules/ — it can contain thousands of files and is always reproducible from package.json.

js-practice/
├── node_modules/     # installed packages (never commit this)
├── src/
│   └── index.js      # your application code
├── .gitignore
├── package.json
└── package-lock.json # exact locked versions (commit this)

Your .gitignore should always include:

node_modules/
.env
dist/

What’s Next

With your environment ready, the next tutorial dives into variables — var, let, and const — and the scoping rules that trip up beginners and experienced developers alike.