1.3 Development Environment Setup

Required Tools

Here are the tools needed for JavaScript development.

Tool	Purpose	Required
Node.js	JavaScript runtime	Essential
VS Code	Code editor	Strongly recommended
Git	Version control	Recommended
ESLint	Code quality checker	Recommended
Prettier	Code formatter	Recommended

---

Installing Node.js

Using nvm (Recommended)

nvm (Node Version Manager) lets you manage multiple Node.js versions.

macOS / Linux

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# After restarting terminal
nvm install 20        # Install LTS version
nvm use 20           # Activate version
nvm alias default 20  # Set as default

# Verify
node --version  # v20.x.x
npm --version   # 10.x.x

Windows

# Install nvm-windows: https://github.com/coreybutler/nvm-windows
# After installation:

nvm install 20.11.0
nvm use 20.11.0

# Verify
node --version
npm --version

Direct Installation (Alternative)

Download the LTS version from https://nodejs.org and install.

---

VS Code Setup

Installation

Download from https://code.visualstudio.com.

Essential Extensions

Install from the Extensions tab in VS Code's left sidebar:

# Essential
- ESLint (Microsoft)
- Prettier - Code formatter (Prettier)

# Strongly recommended
- JavaScript (ES6) code snippets
- Path Intellisense
- GitLens

# Theme/Icons (optional)
- One Dark Pro
- Material Icon Theme

VS Code Settings (settings.json)

Ctrl+Shift+P → Type "Open User Settings (JSON)":

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": ["javascript", "typescript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

---

Creating Your First Project

# Create project folder
mkdir my-js-project
cd my-js-project

# Initialize npm
npm init -y

# Check generated package.json
cat package.json

{
  "name": "my-js-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "test": "node --test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Adding "type": "module" enables ES module (import/export) syntax in .js files.

---

ESLint Setup

ESLint is a static analysis tool that catches code issues early.

Install and Initialize

npm install --save-dev eslint @eslint/js
# Manually create eslint.config.js (Flat Config format, ESLint v9+)

eslint.config.js (Flat Config)

import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2024,
      sourceType: 'module',
      globals: {
        console: 'readonly',
        process: 'readonly',
        setTimeout: 'readonly',
        clearTimeout: 'readonly',
        setInterval: 'readonly',
        clearInterval: 'readonly',
      },
    },
    rules: {
      // Errors (red underline)
      'no-unused-vars': 'error',
      'no-undef': 'error',
      'no-console': 'warn',

      // Warnings (yellow underline)
      'prefer-const': 'warn',
      'no-var': 'warn',

      // Code style
      'eqeqeq': ['error', 'always'], // Enforce ===
      'curly': 'error',              // Require curly braces
    },
  },
];

Running ESLint

# Check a file
npx eslint index.js

# Auto-fix fixable errors
npx eslint --fix index.js

# Check entire project
npx eslint .

---

Prettier Setup

Prettier is a code formatter that automatically formats your code.

Installation

npm install --save-dev prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid"
}

Running Prettier

# Check formatting (no changes)
npx prettier --check .

# Apply formatting
npx prettier --write .

---

package.json Scripts

{
  "scripts": {
    "start": "node index.js",
    "dev": "node --watch index.js",
    "test": "node --test",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

---

Chrome DevTools

Console Tab

// Various console methods
console.log('Regular log');
console.info('Info');
console.warn('Warning');
console.error('Error');

// Display objects/arrays as table
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
];
console.table(users);

// Time measurement
console.time('array sort');
[3, 1, 4, 1, 5, 9, 2, 6].sort();
console.timeEnd('array sort');

---

Pro Tips

Node.js --watch Mode

Node.js 18.11+ has built-in file change detection:

node --watch index.js

Previously nodemon was used for this, but it can now be replaced with the built-in feature.

Useful VS Code Shortcuts (JavaScript Development)

Shortcut	Function
F12	Go to definition
Alt+F12	Peek definition
Shift+F12	Find references
F2	Rename (refactoring)
Ctrl+.	Quick Fix
Ctrl+Shift+P	Command palette
Ctrl+`	Open integrated terminal
Ctrl+/	Toggle line comment