Claude Code Essentials

What You'll Learn

This lesson is your Claude Code power-user crash course. We'll cover the IDE integration, the shortcuts that matter, how to give Claude laser-focused context and how settings and configuration work. All of this is demonstrated live inside the course project so you can follow along.

IDE Integration

Claude Code works best when it's connected to your editor. We're focusing on VS Code for this course, but the same concepts apply to other supported IDEs.

Installing the VS Code Extension

1. Open VS Code and press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open Extensions
2. Search for "Claude Code" and install the official extension by Anthropic
3. Open the Claude panel with Cmd+Esc. If that shortcut isn't working, open your key bindings (Cmd+K Cmd+S) and check it's mapped correctly. We'll walk through this in the video.

What the Extension Gives You

• Automatic context so Claude sees your currently open file and any highlighted selection
• Native diff viewer where file changes appear in VS Code's side-by-side diff view
• @-mentions to reference files with fuzzy matching (e.g., @auth finds auth.ts, AuthService.ts). This works in Claude Code itself, not just the IDE extension
• Line ranges like @file.ts#5-10 to reference specific lines

Other IDE Support

While this course uses VS Code, Claude Code also supports:

• JetBrains IDEs (IntelliJ, WebStorm, PyCharm, etc.) via an official beta plugin with native diff viewing and diagnostic sharing. Install it from the JetBrains Marketplace.
• Neovim via a community plugin (claudecode.nvim) with selection tracking, file management and native diff viewing.
• Cursor and Windsurf work with the same VS Code extension since they're VS Code forks.

Keyboard Shortcuts & Tips

These are the shortcuts you'll reach for constantly.

Navigation & Output

Modes & Control

Thinking & Models

Terminal note: Shift+Enter and Alt shortcuts work out of the box in iTerm2, WezTerm, Ghostty and Kitty. If Shift+Enter isn't working in your terminal, run /terminal-setup and follow the Claude Code guide to configure it. For VS Code's integrated terminal, you'll also need to enable the Option key as Meta by setting terminal.integrated.macOptionIsMeta to true in Settings.

Quick Input Prefixes

Essential Commands

Beyond the interactive mode we've been using, there are a few ways to run Claude Code:

Passing a prompt with claude "..." launches interactive mode but injects your prompt straight away, saving you the step of typing it after launch. The -p flag is the non-interactive mode. It runs the query, prints the response and exits. This is useful for scripting or when you just want a quick answer without starting a session.

Note: There are also commands for resuming and continuing previous sessions. We'll cover those in the Session Management section later in the course.

Surgical Selection

One of Claude Code's most powerful IDE features is surgical selection, where you highlight specific code in your editor and add it to Claude's context. Instead of pointing Claude at an entire file, you give it exactly the lines you want it to focus on.

Demo: Extract a Shared Component

Our AI Prompt Library has two pages that render prompt data as cards: the homepage (app/page.tsx) and the detail page (app/prompt/[id]/page.tsx). Both render a title, category badge and description, but the card markup is duplicated across both files with inconsistent styling:

Two files, same card pattern, different styles. This is exactly the kind of duplication that compounds as a codebase grows. A senior developer would look at this and say: "We need a shared component."

Try It Yourself

1. Open app/page.tsx and app/prompt/[id]/page.tsx side-by-side
2. In app/page.tsx, select lines 33-41 (the card <div> inside the .map())
3. Press Cmd+Option+K to add that selection to Claude's context
4. Switch to app/prompt/[id]/page.tsx and select lines 37-68 (the main card <div> with all its contents)
5. Press Cmd+Option+K again to add this second selection
6. Prompt: "These two pages render prompt cards with duplicated, inconsistent markup. Extract a shared PromptCard component that both pages can use, with a compact variant for the homepage list and an expanded variant for the detail page."

Watch what happens. Claude sees exactly the two card implementations, recognises the shared pattern, and extracts a single component with consistent styling. Before: duplicated markup in two files. After: one PromptCard component, two clean imports, consistent visuals.

That's the power of focused context. You didn't point Claude at two entire page files. You selected the exact code that mattered, and Claude understood the relationship.

Commands & Skills

Commands and skills are interchangeable in Claude Code. Two worth knowing right away:

• /status shows your current version, model, account and connectivity info. Good for a quick sanity check that everything is connected.
• /config opens the Settings interface right inside your session, so you can tweak configuration without hunting for JSON files.

We'll introduce more commands and skills as they become relevant throughout the course.

Settings & Configuration

Claude Code uses a scope system to determine where configurations apply and who they're shared with:

For now, just know these scopes exist. We'll build on this as we go through the course, configuring different scopes as they become relevant.

You can open the settings interface at any time with /config inside Claude Code, or edit the JSON files directly.

Status Line

The status line is a live dashboard that sits below your Claude Code input, showing you real-time information about your session. You can configure it to display whatever matters to you, like git status, token usage, cost, connected MCP servers and more.

Claude Code has a built-in /statusline command that generates a status line for you. Third-party libraries offer more features. For this course, we'll install one I've built and open-sourced called cc-pulse that shows:

• Git status with branch name and new/modified/deleted file counts
• Engine info including model, context usage percentage, token breakdown and session cost
• MCP servers with connection health for each server
• Hooks showing active hook count with broken path warnings
• Skills listing your custom slash commands at a glance

To install it:

npm install -g cc-pulse

Then add it to your global settings (~/.claude/settings.json):

{
  "statusLine": {
    "type": "command",
    "command": "cc-pulse"
  }
}

Restart Claude Code and you'll see it. The status line is entirely optional, but once you start using one, you'll wonder how you worked without it.

Permissions: A Quick Note

Claude Code has a full permissions system with allow and deny lists. We'll cover it properly in a later section where it becomes important. For now, to keep things moving, we'll run Claude Code with bypass permissions:

claude --dangerously-skip-permissions

This tells Claude to act without asking for permission on every file edit or command. It's fine for learning and for solo projects where you're the only one working. We'll tighten this up later when we cover security and team workflows.

Important: Don't use --dangerously-skip-permissions on shared codebases or in production environments. It exists for development speed, not as a default.

Key Takeaways

• Install the VS Code extension for the best experience. It gives you diffs, @-mentions and surgical selection
• JetBrains and Neovim are also supported if VS Code isn't your editor
• Toggle verbose output with Ctrl+O when you want to see what Claude is doing under the hood
• Surgical selection lets you give Claude precise context instead of entire files
• Settings follow a priority hierarchy from enterprise down to local
• The status line gives you real-time session visibility. Try cc-pulse for a batteries-included option
• We're bypassing permissions for now with --dangerously-skip-permissions and we'll configure them properly later

Checkpoint: This is the end of Section 1. If you want to save your progress or need to come back later, the checkpoint/s2 branch has the project in this exact state.