Dev Basics Lesson 3 of 3

Editor Setup

Overview

A properly configured code editor reduces development friction and error rates. This lesson covers setup for VS Code and Cursor, both of which integrate with Claude Code. Claude Code also provides native extensions for VS Code and JetBrains IDEs.

Editor Selection

VS Code — Open-source, widely adopted, extensive extension ecosystem. Available at code.visualstudio.com

Cursor — VS Code fork with integrated AI capabilities. Available at cursor.sh

Recommendation: VS Code is the industry standard and the assumed environment in most documentation and tutorials.

Configuration Essentials

Project-level opening

Open the project directory (File → Open Folder), not individual files. This provides the file tree, project-scoped search, and correct extension context.

Integrated terminal

Ctrl+` (backtick) opens the built-in terminal, eliminating the need for external window switching.

Command Palette

Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) provides access to all editor commands.

Recommended Extensions

Accessible via the Extensions panel (Cmd+Shift+X):

  • Prettier — Automatic code formatting on save
  • ESLint — Static analysis for JavaScript/TypeScript
  • GitLens — Inline Git blame and history annotations
  • Error Lens — Inline diagnostic display

Keyboard Shortcut Reference

High-frequency operations:

  • Cmd/Ctrl + P — File quick-open
  • Cmd/Ctrl + Shift + F — Project-wide search
  • Cmd/Ctrl + D — Multi-cursor: select next occurrence
  • Cmd/Ctrl + / — Toggle line comment
  • Alt + Up/Down — Move line vertically

Configuration note: Enabling "Auto Save" in editor settings eliminates data loss from unsaved buffers.

Key Takeaways

  • VS Code and Cursor both provide effective development environments
  • Open project directories, not individual files, for proper context
  • Cmd/Ctrl + P provides the fastest file navigation
  • Prettier and ESLint enforce code quality standards automatically