
Table of Contents
What this lesson is about
So far in this course you have worked with Claude Code through the terminal — the text-only command window. In this lesson you will learn how to bring Claude Code directly into a visual text editor called VS Code, so you can talk to Claude, see your files, and make changes all in the same place. This approach is particularly useful for non-developers who use Claude Code to edit documents, write content, and manage project notes.
Core concept: the colleague next door vs the colleague in another building
Imagine you are working at your desk and you have a question for a colleague. If that colleague is sitting right next to you, you can simply lean over and ask. They can see your screen, point at specific lines, and respond immediately. The whole exchange takes thirty seconds.
Now imagine that same colleague works in a separate building across the street. Every time you have a question, you must save your work, walk over, explain the context from scratch, wait for an answer, walk back, and resume. The information is exactly the same — but the friction of getting to it makes you ask fewer questions, miss details, and lose momentum.
Running Claude Code in a separate terminal window while editing files in a separate programme is the “colleague in another building” experience. You switch between windows, lose track of where you were, copy and paste text back and forth, and gradually find the process tiring.
IDE integration means Claude is sitting right next to you. You highlight a sentence in your document, ask Claude a question, and see the suggested change appear directly in the file you are looking at — without ever leaving the editor. That is the colleague next door.
What an IDE actually is
IDE stands for Integrated Development Environment. That sounds very technical, but the idea is simple: it is a text editor with superpowers.
A regular text editor (like Notepad on Windows or TextEdit on a Mac) opens files and lets you type. That is all. An IDE does the same thing — it opens files and lets you type — but it also understands the content of the files well enough to help you work with them. It can highlight important words, show you a list of all the files in your project, flag problems, and — with the right extension — talk to Claude.
VS Code (short for Visual Studio Code) is the most widely used IDE in the world. It is:
- Free — no subscription or purchase required
- Made by Microsoft — reliable, regularly updated, and widely supported
- Not just for developers — it works beautifully for editing any kind of text file: markdown documents, notes, project plans, course content, configuration files, and more
An extension (also called a plugin) is a small add-on that gives VS Code a new capability. Installing the Claude Code extension is like adding a new tool to a toolbox — VS Code stays the same, but it gains the ability to talk to Claude.
Why VS Code is useful for non-developers specifically
You do not need to write code to benefit from VS Code and Claude Code together. Here are the kinds of tasks that become noticeably easier with the two tools working side by side:
- Editing your
CLAUDE.mdfile — you can see the file, ask Claude to improve a section, and watch the change appear inline - Writing and editing course content — like this very lesson: draft in VS Code, ask Claude to tighten the language, accept the changes with one click
- Managing markdown lesson pages — Claude can reformat, restructure, or expand any section while you look at the full document
- Writing project notes and reports — highlight a rough paragraph, ask Claude to make it professional, done
- Reviewing and approving Claude’s suggestions — the extension shows you exactly what Claude wants to change before anything is saved, so you stay in control
The common thread is that you are always looking at your full document while Claude is working, rather than copying snippets into a chat window and trying to piece the results back together.
How to install the Claude Code extension in VS Code
Before you start
You will need:
- VS Code version 1.98.0 or newer installed on your computer. You can download it for free from code.visualstudio.com.
- An Anthropic account with access to Claude Code (included with Claude Pro, Max, Team, or Enterprise plans).
- The Claude Code CLI (command-line interface) already installed on your machine. If you completed earlier lessons in this course, it is already there.
Installing the extension
There are two ways to install the extension. Use whichever feels easier.
Option 1 — From inside VS Code:
Open VS Code. Press Ctrl+Shift+X on Windows or Linux, or Cmd+Shift+X on a Mac. This opens the Extensions panel — a searchable list of all available add-ons.
Type Claude Code into the search bar. Look for the result that says “published by Anthropic” — this is the official extension. Click Install.
Option 2 — From the VS Code Marketplace website:
Go to the VS Code Marketplace in your browser and search for “Claude Code.” Click the Install button on the official Anthropic listing, and your browser will open VS Code and start the installation automatically.
After installation
Once the extension is installed, a small Spark icon (a stylised lightning bolt) will appear in the left sidebar of VS Code. This is your entry point to Claude. Click it to open the Claude Code panel.
The first time you open the panel, you will be prompted to sign in to your Anthropic account. Follow the on-screen steps — it is the same sign-in process as claude.ai.
If the Spark icon does not appear after installation, restart VS Code. If it still does not appear, open the Command Palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac), type Developer: Reload Window, and press Enter.
How to use the extension day to day
Opening Claude without leaving your editor
Once the extension is installed, you never need to switch to a separate window to talk to Claude. The Spark icon in the left sidebar opens the Claude panel at any time. The panel sits alongside your document — you can see both at once.
You can also open a new Claude conversation using Ctrl+N (Windows/Linux) or Cmd+N (Mac) while the Claude panel is in focus. This starts a fresh conversation without losing the one you had before — previous conversations are accessible through the Sessions list in the sidebar.
Selecting text and asking Claude to work on just that section
This is one of the most useful features for writers and content creators. Instead of describing which paragraph you want Claude to look at, you can simply highlight it with your mouse and ask your question.
Here is how it works:
- Click at the start of the text you want Claude to focus on.
- Hold
Shiftand click at the end of it, or click and drag to select the whole section. - With the text highlighted, click into the Claude panel and type your question — for example, “Make this more concise” or “Rewrite this in a more formal tone.”
- Claude will know which text you selected and respond in the context of that specific section.
You can also type @ in the Claude prompt box to reference a specific file anywhere in your project. For example, typing @CLAUDE.md will pull that file into Claude’s view even if you are not currently looking at it.
Reviewing and accepting Claude’s suggested changes
When Claude edits a file, the extension shows you exactly what it wants to change before anything is permanently saved. You will see the original text alongside the proposed replacement — additions highlighted in one colour and removals in another. This is called an inline diff (diff is short for “difference”).
You can accept the change, reject it, or edit it further before accepting. Nothing is applied to your file until you say so.
How the extension reads your CLAUDE.md automatically
When you open a project folder in VS Code with the Claude Code extension installed, Claude automatically reads the CLAUDE.md file in that project — the same way it does in the terminal. All the instructions, context, and preferences you have set up in earlier lessons are available to Claude without you having to do anything extra.
This means your team’s writing style guide, your project background, and your preferred tone settings are all active from the moment you open the editor. You do not repeat yourself.
IDE integration vs the terminal: when to use which
Both approaches use the same underlying Claude Code. The difference is comfort and workflow fit, not power.
| Situation | Best approach | Why |
|---|---|---|
| Editing a document and wanting Claude’s help with specific sections | VS Code extension | You can highlight text and see changes inline without switching windows |
Writing or maintaining your CLAUDE.md | VS Code extension | You can edit and ask Claude for improvements side by side |
| Creating and refining markdown lesson pages or reports | VS Code extension | Full document visible while Claude makes changes |
| Running a one-off task from any folder (“summarise all files here”) | Terminal | Faster to type a quick command than to open VS Code first |
| Automated or scheduled tasks (running hooks, scripts) | Terminal | Terminal is the natural environment for automation |
| Asking a quick question without any file context | Either | Both are equally capable; use whichever is already open |
| Sharing a project setup with a team | Terminal (for initial setup) | Commands like claude init are run once; VS Code handles ongoing work |
The practical rule for non-developers: if you are going to be looking at files and making changes, use VS Code. If you are running a task and walking away, use the terminal.
Practical Exercise
In this exercise you will install the Claude Code extension, open a project, and use the text-selection feature to ask Claude to improve a specific paragraph.
a. Download and install VS Code if you do not already have it, from code.visualstudio.com. Once installed, open it. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac) to open the Extensions panel. Search for Claude Code, find the official Anthropic listing, and click Install. Wait for the installation to complete, then look for the Spark icon in the left sidebar.
b. Open your project folder in VS Code. Go to File → Open Folder and navigate to the folder where your project lives — the one that contains your CLAUDE.md file and .claude folder from earlier lessons. Once the folder is open, click the Spark icon to open the Claude Code panel, and sign in to your Anthropic account if prompted.
c. Open any markdown file in your project — for example, your CLAUDE.md or any lesson page you have been working on. Find a paragraph that could be improved. Click and drag to highlight just that paragraph. With the text selected, click into the Claude panel and type: Make this clearer and more concise for a non-technical reader. Watch how Claude proposes a change specifically for the section you highlighted. Review the inline diff, and accept or reject the suggestion. Notice that the rest of the document is untouched.
Common problems and how to fix them
The Spark icon does not appear after installation
This usually means VS Code needs to reload. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette, type Developer: Reload Window, and press Enter. If the icon still does not appear, check that your VS Code version is 1.98.0 or newer — older versions do not support the extension. You can check your version by going to Help → About in VS Code.
Claude is not responding after I open the panel
The most likely cause is that you are not signed in. Click the Spark icon, look for a sign-in prompt, and complete the Anthropic authentication. If you are signed in but Claude is still not responding, check your internet connection, then try reloading the window using the Command Palette as described above.
I searched for “Claude Code” but only see unofficial extensions
Make sure you are looking at the result that says “Anthropic” as the publisher. There are several unofficial Claude Code tools in the Marketplace — they may have similar names. The official one has a verified publisher badge and shows “Anthropic” clearly. Do not install unofficial versions, as they are not supported and may not have access to your Claude subscription.
My text selection is not being used by Claude
Make sure you highlight the text before you type your question in the Claude panel, and that the text is highlighted in the main editor (the document view), not inside the Claude panel itself. If Claude is responding to your full document rather than your selection, try clicking back into the document to confirm the selection is still active, then click into the Claude panel and type your question.
Claude does not seem to know anything about my project
Check that you have opened the folder (not just a single file) in VS Code. Go to File → Open Folder and select the root folder of your project — the one that contains CLAUDE.md and the .claude folder. If you open a single file directly, Claude Code does not have access to the project context.
What you have learned in this lesson
- An IDE (Integrated Development Environment) is a text editor with superpowers — VS Code is the most widely used, is free, and works for any kind of text file, not just code
- IDE integration means running Claude from inside your editor, so you can see your files and talk to Claude in the same place — like having a colleague sitting next to you rather than in a separate building
- The Claude Code extension for VS Code is installed through the Extensions panel (
Ctrl+Shift+Xon Windows/Linux,Cmd+Shift+Xon Mac) by searching for “Claude Code” and installing the official Anthropic extension - After installation, the Spark icon in the left sidebar opens the Claude Code panel at any time
- You can highlight any section of text in your document and ask Claude to work on just that section — Claude will see the selection automatically and respond in context
- The extension shows proposed changes as an inline diff before anything is saved — you review and accept or reject each suggestion
- When you open a project folder in VS Code, Claude automatically reads your
CLAUDE.mdfile, so all your project context and instructions are active from the start - VS Code with the extension is best when you are actively working on documents; the terminal is better for one-off commands, automation, and initial project setup