Setting Up a Modern JavaScript Dev Environment

Alright, before we dive into JavaScript land, let’s make sure your setup isn’t a mess. No point writing beautiful code if your tools are stuck in 2015, right? So let’s get your dev environment leveled up — fast, clean, and future-proof.

Here’s the vibe: we’re not just installing stuff. We’re setting you up to actually enjoy coding. Fewer bugs. Less waiting. Cleaner output. More flow.

🧰 What You’ll Need

We’re going with the good stuff:

• VS Code – everyone uses it for a reason. Smart, slick, and it just gets JavaScript.
• Node.js (v20+) – so your JS doesn’t need a browser to run.
• pnpm – think npm install but…not painfully slow.
• ESLint + Prettier – your code’s personal stylist and grammar police.
• Volta (optional but 🔥) – makes managing Node versions ridiculously easy.

⚙️ Let’s Set It Up

1. Install Node.js

Head to nodejs.org and grab the latest LTS version (not the “current” one unless you like living on the edge).

Pro move: install Volta first. It’ll handle Node, npm, pnpm — everything — without polluting your system. Zero drama.

2. Install pnpm

Open your terminal and run:

npm install -g pnpm

That’s it. You’re now using the fast lane for package management.

3. Get VS Code + Extensions

If you don’t have VS Code yet, fix that.

Then install these extensions — they’ll do a lot of heavy lifting:

• ESLint
• Prettier
• GitLens (makes your Git history actually readable)
• JavaScript/TypeScript Essentials Pack (solid all-in-one)

4. Start a Project

Let’s kick off a new folder and init a project:

mkdir js-tutorial && cd js-tutorial
pnpm init

Just follow the prompts. Nothing scary.

5. Set Up Linting & Formatting

Install ESLint and Prettier as dev dependencies:

pnpm add -D eslint prettier

Now run:

npx eslint --init

Choose:

• “To check syntax, find problems, and enforce code style”
• “JavaScript modules (import/export)”

Done. Your code’s about to look real good.

✅ You’re Ready

Congrats — your environment’s now rock-solid. Next time, we’ll write some actual JavaScript and run it like we know what we’re doing (because we do).

Bonus tip: Save this setup as a boilerplate. That way, next time you can spin up a new project in seconds. No more reinventing the wheel.

Let’s be honest — half the battle with coding is just getting your tools out of the way. Now that we’ve handled that? You’re free to focus on the fun stuff.

Catch you in the next one.

Part of the Series

This is part of the Ultimate JavaScript Tutorial series.