Dev Basics Lesson 3 of 3

Editor Setup

What this lesson teaches

A good code editor makes development faster and less error-prone. This lesson covers setup for VS Code or Cursor—both work well with Claude Code.

Choosing an editor

VS Code — Free, widely used, huge extension ecosystem. Download from code.visualstudio.com

Cursor — VS Code fork with built-in AI features. Download from cursor.sh

Recommendation: If you're new, start with VS Code. It's the industry standard and what most tutorials assume.

Essential setup

Open folders, not files

Always open the project folder (File → Open Folder). This gives you the file tree and proper project context.

Integrated terminal

Press Ctrl+` (backtick) to open the built-in terminal. No need to switch windows.

Command Palette

Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows). This is how you access most features.

Useful extensions

Install via the Extensions panel (click the blocks icon or Cmd+Shift+X):

  • Prettier — Auto-format code on save
  • ESLint — JavaScript/TypeScript error checking
  • GitLens — See who changed what and when
  • Error Lens — Show errors inline

Key shortcuts

These will save you hours:

  • Cmd/Ctrl + P — Quick file open
  • Cmd/Ctrl + Shift + F — Search across all files
  • Cmd/Ctrl + D — Select next occurrence
  • Cmd/Ctrl + / — Toggle comment
  • Alt + Up/Down — Move line up/down

Pro tip: Enable "Auto Save" in settings. You'll never lose work to forgetting to save.

Key Takeaways

  • VS Code or Cursor — both work well
  • Open folders, not individual files
  • Learn Cmd/Ctrl + P for quick file navigation
  • Install Prettier and ESLint for cleaner code