VS Code から WebStorm への移行方法

VS Code キーマップに切り替える

まだ VS Code ショートカットに別れを告げる準備ができていない場合は、VS Code キーマップに切り替えることができます。これを行うには、設定 | キーマップに移動し、VSCode または VSCode (macOS) をデフォルトのキーマップとして設定し、変更を保存します。

WebStorm ショートカットを学ぶ

後で別の JetBrains IDE に切り替えることにした場合でも、WebStorm ショートカットの学習は役に立ちます。ショートカットはほとんどすべてで同じです。より早く学ぶのに役立つものは次のとおりです。

• WebStorm の最も普遍的なショートカットを覚える – Shift + Shift、またはどこでも検索。これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。

• Key Promoter X をインストールする –この拡張機能(英語)は、作業中に重要なショートカットを学習できます。IDE 内のボタンでマウスを使用すると、Key Promoter X は代わりに使用できたショートカットを表示します。

• WebStorm ショートカットのチートシートを使用する – macOS(英語) または Windows と Linux(英語) のデフォルトの WebStorm キーマップリファレンスをダウンロードできます。

WebStorm は、環境に基づいて事前定義されたキーマップを提案します。このキーマップは設定 | キーマップにあります。アクションのショートカットを変更すると、WebStorm はそれらの変更を事前定義されたキーマップのコピーに保存し、デフォルトでそのコピーを使用して先に進みます。

拡張

JetBrains IDE では、拡張機能をプラグインと呼びます。これらは VS Code の拡張機能とほぼ同じように機能し、組み込み機能を拡張して IDE をカスタマイズできます。使用可能なプラグインを調べるには、設定 | プラグインのマーケットプレースタブに移動します。

UI テーマ

WebStorm には定義済みのテーマがいくつか付属していますが、さまざまなカスタムオプションから選択できます。調べるには、設定 | プラグインに移動し、マーケットプレースタブで「テーマ」を検索してください。

その後、エディターに戻って、インストールしたテーマの外観を確認できます。メインメニューから表示 | スキームのクイック切り替えを選択するか、Ctrl+` を押してテーマを選択します。そこから、利用可能なテーマをすべて一度にプレビューできます。

禅モード

VS Code と同様に、コーディングに集中したいときはいつでも禅モードに切り替えることができます。メインメニューで移動 | どこでも検索を選択し、「enter zen mode」と入力します。同じ操作を行いますが、完了したら禅モードを終了を選択します。

コマンドパレット

どこでも検索は、VS Code のコマンドパレットの代わりです。これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。どこでも検索を開くには、Shift + Shift を押すか、デフォルトのコマンドパレットショートカットを使用します (VS Code キーマップを使用している場合)。

検索および置換

WebStorm の検索と置換のワークフローは VS Code のものと若干異なりますが、原理は同じです。WebStorm では、特定のファイル内とプロジェクト全体の両方でテキスト文字列を検索して置換できます。

開始するには、メインメニューで編集 | 検索に移動し、検索 (特定のファイルの場合) または複数ファイル内検索 (プロジェクト全体の場合) を選択します。テキスト文字列を置換するには、代わりに同じサブメニューの置換または複数ファイル内置換を選択します。

AI 機能

WebStorm のワークフローを AI 機能で強化したい場合は、IDE にネイティブ統合されている JetBrains AI をご利用ください。JetBrains AI には、インテリジェントなコーディング支援ツールである AI Assistant と、コーディングタスクを独立して実行できる AI コーディングエージェントである Junie の両方が含まれています。

AI 機能は、無料プランを含む新しいサブスクリプションモデルでご利用いただけます。無料プランでは、コード補完が無制限に利用可能で、ローカルモデルへのアクセスとクラウドベースの機能が制限されています。さらに機能を追加するには、AI Pro または AI Ultimate プランにアップグレードしてください。

WebStorm では、GitHub Copilot、Tabnine、その他の AI ツールも使用できます。設定 | プラグインのマーケットプレースタブから対応するプラグインを検索してください。これらのプラグインは JetBrains によってメンテナンスされていないことに注意してください。

プロジェクトビュー設定

WebStorm には独自のエクスプローラー、プロジェクトビューがあり、動作が少し異なります。たとえば、ファイルをエディターで開くには、ファイルをダブルクリックする必要があります。VS Code で慣れていた設定に合わせてデフォルトの設定を変更する方法は次のとおりです。

プロジェクトビュー設定に移動し、振る舞いにある次のオプションのいずれかまたはすべてを選択できます。

• プレビュータブの有効化 –プロジェクトツールウィンドウで選択したファイルをエディターでプレビューします。

• シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。

• 開いているファイルを常に選択 –プロジェクトツールウィンドウで現在開いているファイルを自動選択します。

保存時のアクション

WebStorm を設定して、ファイルを変更した後に保存するたびに特定のアクションを実行したり、Prettier や ESLint などのツールを実行したりできます。これを行うには、設定 | ツール | 保存時のアクションに移動し、必要なボックスをオンにします。保存時にアクションを実行する方法の詳細については、ドキュメントのこのセクションを参照してください。