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 は、IDE に直接統合できるインテリジェントな機能により、開発ワークフローを強化します。 主な機能は以下のとおりです。
コード補完 – コードの単一行やブロック全体を自動補完し、コーディングスタイルや命名規則の順守を担保します。
次の編集提案 – コードの次の編集候補を提案します。 提案をすばやく適用し、変更が必要な可能性のある次の箇所に移動して、ファイル全体の関連コードを更新します。
エージェントモードによる AI チャット – サポートされている言語モデルのいずれかとチャットしたり、プロジェクトに関する質問をしたり、タスクを反復処理したりできます。 エージェントモードに切り替えて、修正の実装、コードのリファクタリング、テストの生成など、より複雑なアクティビティを実行できます。
コンテキスト管理 – ファイル、フォルダー、画像、シンボル、コミット、他の項目を追加して、質問に関連する追加のコンテキストを AI Assistant に提供できます。
応答処理 – AI が提案する変更を確認して適用します。 単一または複数のファイルを変更したり、コードスニペットを適用したり、AI チャットから直接ターミナルコマンドを実行したりできます。
クラウドベースの LLM サポート – AI チャットで動作させるには、お好みの AI モデルを選択してください。 Google Gemini、OpenAI、Anthropic などのクラウドプロバイダーからお選びいただけます。
ローカルモデルの使用 – サードパーティが提供するカスタムローカルモデルを設定し、コード補完、エディター内コード生成、コミットメッセージ生成などの AI Assistant 機能に使用できます。
そして、 その他にもたくさんあります。
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 ユーザーに助けを求めたりすることができます。
バグを報告したり、新機能をリクエストしたりするには、 こちら(英語)で新しい問題を作成してください。