次世代 Hugo

智能を研ぎ、創造を編む

Claude Code for WebStorm 初體驗

Sam Xiao's Avatar 2026-05-09

在 WebStorm 內使用 Claude Code 共有 4 種方式，各有各的優缺點，可自行選擇適合的方式。

Version

WebStorm 2026.1.1
Claude Code [Beta]
Claude Agent ACP 0.33.1

Introduction

在 WebStorm 內使用 Claude Code 有 4 種方式：

  • Claude Code Plugin
  • AI Assistant + Claude Agent
  • AI Assistant + API Key
  • AI Assistant + ACP

無論使用哪種方法，都是以 Agent 方式，而不是單純 Chat 而已。

Claude Code Plugin

  • Claude Code Plugin 為 Anthropic 官方所出
  • 優點：
    • 直接整合 Claude Pro 帳號
  • 缺點：
    • 以 CLI 使用 Claude Code

ws01

  • 安裝 Anthropic 官方的 plugin

ws02

  • 開啟 terminal，輸入 claude
  • Claude Code 順利與 WebStorm 接上

AI Assistant + Claude Agent

  • 在 WebStorm 內建的 AI Assistant 去使用 Claude Code
  • 優點：
    • 以 GUI 方式
  • 缺點：
    • 需對 AI Assistant 付費使用 Claude Code，無法使用 Claude Pro 帳號
    • WebStorm 會使用自己的 Claude Code，與全域的 Claude Code 不同

ws03

  • 安裝 AI Assistant Plugin，為 JetBrains 官方 Plugin

ws04

  • View -> Tools -> AI Assistant 顯示 AI Assistant

ws05

  • AI Assistant 內建已經整合 3 個 Agent：
    • Claude Agent：Antrophic 的 Code Code
    • Codex：OpenAI 的 Codex
    • Junie：JetBrains 的 Junie

AI Assistant + API Key

若你不想被 AI Assistant 扒一層皮，可直接使用 Claude Code 的 API Key。

  • 優點：
    • 以 GUI 方式
    • 不必付錢給 JetBrains，只需付錢給 Anthropic 即可
  • 缺點：
    • Claude API Key 付費方式不同，與 Claude Pro 帳號分開計
    • WebStorm 會使用自己的 Claude Code，與全域的 Claude Code 不同

ws06

  • 以 API Key 使用 Claude Code

AI Assistant + ACP

ACP 全名為 Agent Client Protocol，為 JetBrains、Zed、Anthropic 所制定，主要用於 JetBrains IDE 與 Zed，讓 AI Agent 可以控制 IDE。

  • 優點：
    • 以 GUI 方式
    • 不必付錢給 JetBrains
    • 直接整合 Claude Pro 帳號
    • 直接使用全域的 Claude Code
  • 缺點：
    • 安裝較複雜，需另外安裝 ACP Adapter 與手動修改設定檔
$ npm i -g @agentclientprotocol/claude-agent-acp
  • 安裝 ACP Adapter，無法使用 Homebrew 安裝，目前只能用 NPM 安裝

ws07

  • 以 Add Custom Agent 新增自訂 Agent

ws08

  • 手動加入 ACP Agent
{
  "agent_servers": {
    "Claude Code": {
      "command": "npx",
      "args": ["@agentclientprotocol/claude-agent-acp"],
      "env": {
        "ACP_PERMISSION_MODE": "bypassPermissions"
      },
      "use_idea_mcp": true,
      "use_custom_mcp": true
    }
  }
}

ws09

  • Chat 會多了 Claude Code 模型可選，有別於內建的 Claude Agent

ws10

  • 成功以 ACP 連上 Claude Code

Conclusion

  • 因為 AI Agent 很新，所以才會有這麼多方法使用 Claude Code
  • 安裝 Claude Code Plugin 之前必須先安裝 Claude Code
  • Claude Code Plugin 尚未以 GUI 支援 WebStorm，目前僅提供 WebStorm 與 Cluade CLI 整合
  • 若以 DX 而論，AI Assistant + ACP 算最接近 Claude Code for VS Code 的使用方式

Reference

Moska, Claude Code JetBrains Integration

# Claude # WebStorm