Using Claude Code in VS Code and JetBrains on a website project

If your developer already works in VS Code or a JetBrains editor such as WebStorm or PhpStorm, the editor version of Claude Code is usually the best place to run it on a website project. Claude's proposed edits appear in the editor's own diff view, plans open as documents you can comment on, and the files Claude touches sit right next to the ones your developer is reading.

The two integrations work differently. The VS Code extension is a full graphical panel that bundles its own copy of Claude Code. The JetBrains plugin connects the editor to the command-line version running in the editor's built-in terminal, so you install that separately. Both need a paid Claude plan or an Anthropic Console account, and neither is a substitute for working in git on a copy of the site.

Which integration you have

Both read the same project settings and CLAUDE.md file as the terminal and desktop app. If you haven't written project instructions yet, start with our guide to writing a CLAUDE.md for a website.

Setting up the VS Code extension

1. Install it. In VS Code, open the Extensions view (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows and Linux), search for "Claude Code" and install Anthropic's extension. In other VS Code-based editors, search the same way or install from Open VSX.
2. Open the panel. Click the Spark icon in the editor toolbar (it appears when a file is open), in the Activity Bar, or "Claude Code" in the status bar.
3. Sign in. Click Sign in and approve in your browser.
4. Open your site's repository as the workspace folder, not a parent folder full of unrelated projects. Claude works within the folder you open.
5. Check the permission mode at the bottom of the prompt box. With Claude Code v2.1.283 or later, Auto is the built-in starting mode. For a first session on a real site, switch to Manual or Plan.
6. Ask a read-only question first, such as "Which files control the site header and footer?" The check that proves setup worked is an answer naming files that exist in your project.

Anthropic's docs note that the extension's version number is the Claude Code version it bundles, which matters when a feature needs a minimum version.

Features that matter for website work

Plan review as a document

In plan mode, Claude explores and proposes changes without editing your files. VS Code "automatically opens the plan as a full Markdown document where you can add inline comments to give feedback before Claude begins." For a template change or a redirect batch, that is the step where a person catches a wrong assumption before any file changes. Our plan mode guide covers when to use it.

Reviewing edits one change at a time

In Manual mode, each proposed edit appears side by side with the original, and you accept, reject, or tell Claude what to do instead. Per-change Accept and Reject buttons let you keep part of an edit. If you edit the proposed text yourself before accepting, Claude is told you changed it. A diff with more than 100 changes opens without per-change buttons, which is a sign the task is too big to review comfortably.

Pointing Claude at exact code

Claude sees your selected text automatically. Option+K on Mac or Alt+K on Windows and Linux inserts a reference to the selected lines, like @file.ts#5-10. You can also reference a terminal's output with @terminal:name, useful for a failed build.

Checkpoints

Hover any message to rewind. The three options are "Fork conversation from here", "Rewind code to here" and "Fork conversation and rewind code." Checkpoints don't track changes Claude makes through shell commands, and can't undo anything on a remote system, so git remains your real safety net. Our guide to checkpoints and rewind explains the limits.

Testing pages in Chrome

With the Claude in Chrome extension (version 1.0.36 or later), type @browser followed by a task, for example @browser go to localhost:3000 and check the console for errors. Claude shares your browser's login state, so treat it as acting as you. Our separate guide to Claude Code and Chrome covers permissions and risks.

MCP servers and git

Type /mcp in the chat panel to add, remove or reconnect MCP servers, which connect Claude to outside tools. Claude can also stage changes, write commit messages and create pull requests when you ask, for example "commit my changes with a descriptive message." Read the commit before it goes anywhere.

When to open the terminal instead

The extension covers most interactive work, but some features are CLI-only. Anthropic's comparison lists the full set of commands and skills, the ! shell shortcut and tab completion as terminal features, while the extension has "a subset." To use them inside VS Code, install the standalone command-line tool, open the integrated terminal and run claude. It connects to the editor automatically for diffs and diagnostics. If you use an external terminal, run /ide to connect it.

The extension and the terminal share conversation history, so claude --resume in a terminal picks up an extension conversation. Scripted, unattended runs with claude -p are terminal-only.

You can also continue a cloud session from claude.ai in VS Code, from the Web tab in Session history, if you signed in with a Claude subscription. The extension downloads a copy of the conversation, and changes don't sync back to claude.ai.

Setting up the JetBrains plugin

1. Install the command-line tool using Anthropic's setup instructions. The plugin shows "Cannot launch Claude Code" if claude isn't found.
2. Install the Claude Code plugin from the JetBrains Marketplace and restart the IDE.
3. Run claude in the IDE's terminal from your project root. All integration features turn on. From an external terminal, run /ide; it reports something like "Connected to IntelliJ IDEA."
4. Set where diffs appear. Run /config and set Diff tool to auto to show diffs in the IDE.

The plugin adds a quick-launch shortcut (Cmd+Esc on Mac, Ctrl+Esc on Windows and Linux), shares your current selection, inserts file references, and lets Claude read the IDE's lint and syntax errors when it asks for them. With JetBrains Remote Development, install the plugin on the remote host, not your local machine. Plugin settings live under Settings, Tools, Claude Code [Beta]. Anthropic's JetBrains documentation covers WSL setup and troubleshooting.

Safe settings for a website team

Both integrations carry the same warning. In VS Code, "With auto-edit permissions enabled, Claude Code can modify VS Code configuration files (like settings.json or tasks.json) that VS Code may execute automatically." The JetBrains page warns that in Accept edits mode Claude "may be able to modify IDE configuration files that can be automatically executed by your IDE." That matters most when the project contains code you didn't write.

• Use Manual mode for edits on any project with code you didn't write, such as a purchased theme or a plugin from a marketplace.
• Turn on VS Code's Restricted Mode for workspaces you don't trust, as Anthropic recommends.
• Block sensitive files. Add a Read deny rule for files like .env. In JetBrains, a matching deny rule also stops that file's selected text being shared with Claude.
• Commit shared settings. Put the team's permission rules in the project's .claude/settings.json so every editor, the terminal and the desktop app follow them. Our Claude Code templates include a starting settings file.
• Keep bypass mode off, and keep deploys a separate, human step.

VS Code extension, Cursor or the desktop app?

The VS Code extension installs in Cursor, so you can run Claude Code inside Cursor's editor. Whether Cursor's own agent or Claude Code is the better primary tool is a separate question, covered in our Claude Code vs Cursor comparison.

For someone who doesn't write code, an editor can be overwhelming. Our guide to the Claude Code desktop app covers the simpler option, with a visual diff and a site preview but no editor to learn.

Conclusion

Claude Code in VS Code or JetBrains suits developers and technical marketers who already live in their editor: plans become documents you can comment on, edits arrive in a familiar diff view, and the terminal is one panel away for anything the extension doesn't cover. Set it up on the site's repository, start in Plan or Manual mode, block secret files, and keep deploys a human step. If you want Claude Code wired into your team's editor setup and site workflow, our Claude Code development team can help. More guides are in our Claude Code Guide.

Frequently asked questions