VS Code から WebStorm への移行方法
このセクションでは、VS Code から WebStorm に移行する方法に関するヒントをいくつか紹介します。
最初のプロジェクトを開くか作成する
WebStorm をダウンロードしてインストールした後、最初に気づくことの 1 つは、開始するにはプロジェクトが必要であることです。 プロジェクトファーストのアプローチにより、WebStorm は作業内容のコンテキストをより適切に理解し、より高度なコーディング支援を提供できるようになります。
プロジェクトを開始するには、いくつかのオプションから選択できます。
リポジトリのクローン – Git または GitHub から既存のプロジェクトを取得します。
新規プロジェクト – 空のプロジェクトを作成するか、React、Angular、Vue などの既存のテンプレートからプロジェクトを生成します。
開く – マシンに保存されているプロジェクトを開きます。
主な機能をすばやく見たい場合は、プレイグラウンドプロジェクトから始めることもできます。 新規プロジェクト | 新規プロジェクト に進み、 オンボーディングのヒント付き playground プロジェクトを生成する ボックスにチェックを入れてください。
ショートカットを構成する
これまで WebStorm やその他の JetBrains IDE を使用したことがない場合は、新しいショートカットに慣れるのは難しいかもしれません。 これを支援するためのヒントをいくつか紹介します。
VS Code キーマップに切り替える
まだ VS Code ショートカットに別れを告げる準備ができていない場合は、VS Code キーマップに切り替えることができます。 これを行うには、 設定 | キーマップ に移動し、 VSCode または VSCode (macOS) をデフォルトのキーマップとして設定し、変更を保存します。
WebStorm ショートカットを学ぶ
WebStorm のショートカットを覚えておくと、後で別の JetBrains IDE に切り替えても便利です。ほとんどの IDE でショートカットは共通です。 次のことが、ショートカットをより早く覚えるのに役立ちます：
WebStorm の最も普遍的なショートカットを覚える – Shift + Shift 、または どこでも検索。 これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。
Key Promoter X をインストールする – この拡張機能(英語)は、作業中に重要なショートカットを学習できます。 IDE 内のボタンでマウスを使用すると、Key Promoter X は代わりに使用できたショートカットを表示します。
WebStorm ショートカットのチートシートを使用する – macOS(英語) または Windows と Linux(英語) のデフォルトの WebStorm キーマップリファレンスをダウンロードできます。
WebStorm は、環境に基づいて定義済みのキーマップを提案します。 このキーマップは 設定 | キーマップ にあります。 アクションのショートカットを変更すると、WebStorm はそれらの変更を事前定義されたキーマップのコピーに保存し、デフォルトでそのコピーを使用して先に進みます。
作業環境をセットアップする
WebStorm と VS Code の主な違いの 1 つは、 多くの拡張機能をインストールして設定する必要がない を使用すると WebStorm が強力になることです。 ほとんどの場合、すべてがそのまま使用できるため、すぐにコーディングを開始できます。
すぐに使い始める方法については、 これらのビデオ(英語)を参照してください。 WebStorm が提供する機能の概要については、 このページを参照してください。
WebStorm をカスタマイズ
WebStorm の UI は、最初は圧倒的に見えるかもしれません。 カスタマイズして、不要なものをオフにすることができます。 ここでは、一般的なカスタマイズのヒントをいくつか紹介します。
拡張機能
JetBrains IDE では、拡張機能を プラグイン と呼びます。 これらは VS Code の拡張機能とほぼ同じように機能し、組み込み機能を拡張して IDE をカスタマイズできます。 使用可能なプラグインを調べるには、 設定 | プラグイン の マーケットプレース タブに移動します。
UI テーマ
WebStorm には定義済みのテーマがいくつか付属していますが、さまざまなカスタムオプションから選択できます。 調べるには、 設定 | プラグイン に移動し、 マーケットプレース タブで「テーマ」を検索してください。
その後、エディターに戻って、インストールしたテーマの外観を確認できます。 メインメニューから 表示 | クイックスイッチスキーム を選択するか、 Ctrl+` を押して テーマ を選択します。 そこから、利用可能なテーマをすべて一度にプレビューできます。
禅モード
VS Code と同様に、コーディングに集中したいときはいつでも 禅 モードに切り替えることができます。 メインメニューで 移動 | どこでも検索 を選択し、「enter zen mode」と入力します。 同じ操作を行いますが、完了したら 禅モードを終了 を選択します。
一般的な VS Code ワークフローを複製する
VS Code のように動作するようにいくつか設定をしてみましょう。
コマンドパレット
どこでも検索 は、VS Code の コマンドパレット の代わりです。 これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。 どこでも検索 を開くには、 Shift + Shift を押すか、デフォルトの コマンドパレット ショートカットを使用します (VS Code キーマップを使用している場合)。
検索および置換
WebStorm の検索と置換のワークフローは VS Code のものと若干異なりますが、原理は同じです。 WebStorm では、特定のファイル内とプロジェクト全体の両方でテキスト文字列を検索して置換できます。
開始するには、メインメニューで 編集｜検索 に移動し、 検索 (特定のファイルの場合) または ファイル内検索 (プロジェクト全体の場合) を選択します。 テキスト文字列を置換するには、代わりに同じサブメニューで 置換 または ファイル内置換 を選択します。
AI 機能
WebStorm のワークフローを AI 機能で強化したい場合は、IDE にネイティブ統合されている JetBrains AI を利用できます。 JetBrains AI には、インテリジェントなコーディング支援ツールである AI Assistant と、コーディングタスクを独立して実行できる AI コーディングエージェントである Junie の両方が含まれています。
AI Assistant は、AI 搭載のコーディングエージェントや AI 機能を WebStorm に直接導入します。 組み込みエージェントを利用したり、外部エージェントを接続したり、追加ツールで拡張したり、ワークフローに合ったモデルやサービスを選択できます。 主な機能は以下のとおりです。
コーディングエージェント― 複数ステップのタスクを コーディングエージェント （Junie、 Claude Agent、 Codex、 GitHub Copilot など）に委任できます。 エージェントは作業をプランニングし、ファイルを編集し、コマンドやテストを実行して進捗を報告します。変更内容は確認した上で、保持やロールバックが可能です。
ACP 経由の外部エージェント― Agent Client Protocol に対応したエージェントを、選別されたレジストリーまたは自身の構成から、カスタム連携なしで接続できます。
MCP ツール― Model Context Protocol を通じて外部ツールやデータソースでエージェントを拡張したり、IDE を MCP サーバーとして公開したりできます。
柔軟なセットアップ― JetBrains AI サブスクリプション から始めたり、サードパーティモデル用に ご自身のキーを利用したり、提供元アカウントで エージェントを認証したり、 ローカルモデルを実行することも可能です。 既にお持ちの AI サブスクリプションを再利用できます。
コンテキスト対応 AI チャット― 対応モデルで チャットし、プロジェクトについて質問できます。 ファイルやフォルダー、シンボル、コミットをコンテキストとして追加した後、エージェントモードに切り替えてコードベース全体に変更を適用できます。
エディター内コード支援― コーディングスタイルや命名規則に従い、コードの単一行やブロック全体を自動補完します。 次回編集候補が提案され、続けて編集が必要な場所へ移動できます。
そして、 その他にもたくさんあります。
Junie は、単独でタスクを実行することも、開発者と連携して作業することもできます。 定型的なタスクは Junie に完全に委譲でき、より複雑な作業にも対応できます：
プロジェクトのコンテキストと構造を使用してタスクを実行します。
コードを分析および検索して関連情報を検索します。
IDE インスペクションを使用してコードを編集し、チェックします。
コードとテストを実行して警告とエラーを減らします。
変更後のプロジェクトの状態とテスト結果を確認します。
変更のレビューとガイダンスにより、複雑なタスクでのコラボレーションをサポートします。
その他 多数。
AI 機能は、無料プランを含む新しいサブスクリプションモデルでご利用いただけます。 無料プランでは、コード補完が無制限に利用可能で、ローカルモデルへのアクセスとクラウドベースの機能が制限されています。 さらに機能を追加するには、AI Pro または AI Ultimate プランにアップグレードしてください。
AI Assistant を有効にする
有効な JetBrains アカウント(英語)を使用してログインしていることを確認してください。
AI Assistant ヘルプの説明に従ってライセンスをアクティブ化してください。
また、WebStorm では GitHub Copilot、Tabnine、その他の AI ツールも利用できます。対応するプラグインは マーケットプレース タブで、 設定 | プラグイン から検索してください。 これらのプラグインは JetBrains ではメンテナンスされていませんのでご注意ください。
プロジェクトビュー設定
WebStorm には独自の エクスプローラー、 プロジェクト ビューがあり、動作が少し異なります。 たとえば、ファイルをダブルクリックしてエディターで開く必要があります。 VS Code で慣れていた設定に合わせてデフォルトの設定を変更する方法は次のとおりです。
プロジェクト ビュー設定に移動し、 振る舞い にある次のオプションのいずれかまたはすべてを選択できます。
プレビュータブの有効化 – プロジェクト ツールウィンドウで選択したファイルをエディターでプレビューします。
シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。
開いているファイルを常に選択 – プロジェクト ツールウィンドウで現在開いているファイルを自動選択します。
保存時のアクション
WebStorm を設定して、ファイルを変更した後に保存するたびに特定のアクションを実行したり、Prettier や ESLint などのツールを実行したりできます。 これを行うには、 設定 | ツール | 保存時のアクション に移動し、必要なボックスをオンにします。 保存時にアクションを実行する方法の詳細については、ドキュメントの このセクションを参照してください。
サポートを受ける方法
コミュニティフォーラムをチェックして、多くの一般的な質問への回答を見つけたり、他の WebStorm ユーザーに助けを求めたりすることができます。
バグを報告したり、新機能をリクエストしたりするには、 こちら(英語)で新しい問題を作成してください。