Install a Code Editor for JavaScript

Introduction

In the previous chapter, you ran JavaScript from the terminal. That workflow is essential, but plain terminals lack rich syntax highlighting, autocomplete, and debugging integration. This chapter installs a modern editor so you can write JavaScript with better feedback and fewer typos.

Prerequisites

  • Node.js LTS installed (node --version, npm --version)
  • Completed terminal Hello World
  • Internet access to download an editor
  • At least 4 GB RAM (8 GB recommended)

Why Use a Code Editor for JavaScript

A capable editor speeds up learning and surfaces mistakes early.

Key benefits:

  • Syntax highlighting for keywords, strings, and template literals
  • IntelliSense for built-ins and project dependencies
  • Integrated terminal to run node and npm in one window
  • Debugger support for breakpoints (used in later chapters)
  • Extensions for ESLint, Prettier, and framework tooling

Editor Options Used Most in Practice

For JavaScript beginners, these two dominate:

EditorBest for
VS Code (recommended)Web and Node.js work, huge extension ecosystem, free
WebStormJavaScript-first IDE with strong refactoring (paid, free trial)

Tip

Choosing Quickly

If you are unsure, install VS Code. It matches most tutorials, teams, and open-source docs in the JavaScript world.

Step 1: Download VS Code

  1. Open https://code.visualstudio.com/
  2. Download the installer for your OS (Windows .exe, macOS .dmg, Linux .deb / .rpm / Snap)
  3. Run the installer with default options unless your IT policy says otherwise

Step 2: First Launch

  1. Open VS Code
  2. Pick a theme and keyboard layout in the welcome flow (defaults are fine)
  3. Open the integrated terminal: Terminal → New Terminal (or Ctrl+` / Cmd+`)

Verify Node from the VS Code terminal:

bash
# Confirm Node.js is visible inside VS Code
node --version

Step 3: Helpful Extensions (Optional Now, Useful Soon)

Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X) and consider:

ExtensionPurpose
ESLintLinting and style feedback
PrettierConsistent formatting
JavaScript (ES6) code snippetsFaster boilerplate (often bundled)

You do not need every extension on day one. Add ESLint after coding standards.

Warning

Install extensions from trusted publishers (Microsoft, ESLint org, Prettier org). Random “JavaScript helper” extensions can be low quality or noisy.

Option B: Install WebStorm (Alternative)

  1. Download from https://www.jetbrains.com/webstorm/
  2. Install with the wizard (Node.js detection usually works if node is on PATH)
  3. Open a folder as a project and use the built-in terminal to run scripts

WebStorm is excellent but paid for long-term commercial use. VS Code is enough for this entire tutorial track.

Connect the Editor to Your Node.js Install

VS Code and WebStorm both rely on the same Node.js binary you configured in install chapters.

Checklist:

  • node --version works in the editor’s integrated terminal
  • You open a folder (project root), not only a single loose file, when starting real projects
  • Line endings and encoding stay UTF-8 (VS Code default)

FAQ

Do I need VS Code to write JavaScript?

No. Any text editor works at minimum. VS Code is recommended because integration with terminals, debuggers, and extensions is smooth for beginners and professionals.

Is Visual Studio the same as VS Code?

No. Visual Studio is a large Microsoft IDE often used for .NET. Visual Studio Code (VS Code) is a lightweight, cross-platform editor widely used for JavaScript.

Should I install Node.js inside VS Code?

No. Install Node.js on your system (or via nvm), then let VS Code’s terminal call that node binary.

Can I use IntelliJ IDEA for JavaScript?

Yes—IDEA Ultimate includes JavaScript support. This course still demonstrates VS Code because it is the most common default in web teams.

Why does autocomplete not work in a new file?

Save the file with a .js extension, open a folder workspace, and ensure Node/npm are installed. For bigger projects, a package.json helps tooling understand dependencies.