ツールウィンドウ
ツールウィンドウは、プロジェクト構造の表示、アプリケーションの実行とデバッグ、バージョン管理システムやその他の外部ツールとの統合、コード分析、検索、ナビゲーションなどの開発タスクへのアクセスを提供します。デフォルトでは、ツールウィンドウはメインウィンドウの下部と側面に接続されています。ただし、別のモニターなどで別のウィンドウとして使用するために、再配置したり、切り離したりすることもできます。

エディター
プロジェクトツールウィンドウ Alt+1
npm ツールウィンドウ
実行ツールウィンドウ
一部のツールウィンドウは常に使用可能であり (たとえば、プロジェクトおよび構造、またはターミナル )、一部のツールウィンドウは特定のプラグインが有効になっているとき、またはプロジェクトが特定の構造になっているときにアクティブになり (たとえば、TypeScript、Grunt、npm、または Spy-js)、一部のツールウィンドウは特定のアクションを実行したときにのみ表示されます (たとえば、デバッグまたは検索 )。
ツールウィンドウを開く
ツールウィンドウを表示または非表示にするには、次のいずれかを実行します。
のツールウィンドウに移動します。
対応するショートカット (例: Alt+1) を使用して、プロジェクトツールウィンドウを開きます。ツールウィンドウにショートカットがない場合は、キーボードショートカットを設定するの説明に従って割り当てることができます。
ツールウィンドウバーの対応するツールウィンドウボタンをクリックします。
アクティブなツールウィンドウを非表示にする
Shift+Escape を押すか、メインメニューから
を選択します。非表示のツールウィンドウを表示するには、それに割り当てられたショートカットを使用します (ショートカット付きのツールウィンドウの完全なリストを表示するには、
に移動します)。ツールバー上のツールウィンドウのアイコンを右クリックし、非表示を選択します。
ツールウィンドウのヘッダーにある非表示ボタン (
) をクリックします。
エディターに注意を集中するために、すべてのツールウィンドウを非表示にし、必要に応じて、非表示にしたときに開いていたすべてのウィンドウをすばやく復元することができます。
すべてのツールウィンドウを非表示または復元する
Ctrl+Shift+F12 を押します。
最大化したいエディタータブをダブルクリックします。これは、詳細設定設定ページ Ctrl+Alt+S でエディターのタブをダブルクリックしたときに 'すべてのツールウィンドウを閉じる' / 'ウィンドウを復元' を実行するが有効になっている場合にのみ機能します。
メインメニューから
を選択します。
エディターとツールウィンドウ間を移動する
ツールウィンドウバーとボタン
メインウィンドウの横のバーには、ツールウィンドウのアイコンが含まれています。アイコンをクリックすると、ツールウィンドウの表示 / 非表示を切り替えることができます。アイコンを右クリックするとコンテキストメニューが開き、ツールウィンドウを非表示にしたり移動したりできます。ツールウィンドウアイコンをドラッグして、ツールウィンドウを並べ替えることもできます。

ツールウィンドウバーを表示または非表示にする
メインメニューのツールウィンドウバーを選択またはクリアします。
に移動し、
ツールウィンドウ名を表示または非表示にする
ツールウィンドウバーを右クリックし、ツールウィンドウ名を表示するを選択または選択解除します。


ツールウィンドウのコンポーネント
通常、ツールウィンドウにはヘッダーとコンテンツペインがあります。

一部のツールウィンドウには、さまざまなアクションを実行するために使用されるコントロールを含むツールバーもあります。

ツールウィンドウヘッダーには、ツールウィンドウの表示モードと位置を変更するためのオプションメニュー と、関連する設定やアクションのセットが含まれています。ヘッダーを右クリックしてこれらのオプションにアクセスすることもできます。
ツールウィンドウには、複数の異なるビューが含まれる場合があります。ビューを切り替えるには、このようなウィンドウのヘッダーにタブまたはドロップダウンセレクターを使用します。
ドロップダウンメニューを表示するには、ヘッダーを右クリックしてタブのグループ化を選択します。タブを表示するには、このオプションを無効にします。

ツールウィンドウのタブを切り替えるには、Alt+Right と Alt+Left を押します。
をクリックするとツールウィンドウが非表示になり、ヘッダーにある他のボタンを使用できます。例:
と
をクリックするとツールウィンドウの内容が展開および折りたたまれ、
をクリックするとツールウィンドウのエディターからファイルを見つけて選択できます。
デフォルトでは、ツールウィンドウヘッダーのアイコンは、ツールウィンドウにマウスを移動したとき、またはツールウィンドウにフォーカスがあるときにのみ表示されます。ツールウィンドウヘッダーアイコンを常に表示するには、詳細設定設定ページ Ctrl+Alt+S に移動し、ツールウィンドウのヘッダーアイコンを常に表示するを選択します。
ツールウィンドウのツールバーからのアクションは、通常、メインメニューとコンテキストメニューからも利用できます。それらのいくつかは、デフォルトのショートカットで実行することもできます。キーボードショートカットを設定するに従って、アクションのショートカットを割り当てることができます。
ツリー構造を表示するすべてのツールウィンドウ (たとえば、プロジェクトツールウィンドウ Alt+1) では、ツリービューのインデントレベルを示す垂直線を表示して、プロジェクト内のコンポーネントの階層を理解しやすくすることができます。これらの線を表示するには、外観 & 振る舞い | 外観設定ページ Ctrl+Alt+S でインデントガイドの表示を有効にします。
次のショートカットを使用して、WebStorm のツールウィンドウを管理できます。
アクティブなツールウィンドウを非表示 | Shift+Escape |
すべてのツールウィンドウを非表示 | Ctrl+Shift+F12 |
最後のツールウィンドウに移動 | F12 |
Ctrl+Alt+Shift+Left | |
Ctrl+Alt+Shift+Right | |
Ctrl+Alt+Shift+Up | |
Ctrl+Alt+Shift+Down | |
Alt+1 | |
Alt+2 | |
Alt+3 | |
Alt+4 | |
Alt+5 | |
Alt+6 | |
Alt+7 | |
Alt+8 | |
Alt+9 | |
Alt+0 | |
ターミナルウィンドウを表示 | Alt+F12 |
Ctrl+Alt+3 |
関連ページ:

プロジェクトツールウィンドウ
プロジェクトツールウィンドウを使用すると、さまざまな視点からプロジェクトを確認し、新しい項目 (ディレクトリ、ファイル、クラスなど) の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含ま...

ファイル構造
WebStorm を使用すると、構造ツールウィンドウおよび構造ポップアップでファイルの構造を表示および移動できます。構造ツールウィンドウのツールバーでクリックし、表示する要素を選択します。プロジェクトがバージョン管理されている場合、構造ツールウィンドウと構造ポップアップに VCS ステータスの色が表示されます。これは、ファイルの変更を追跡できます。変更されたオブジェクトの名前は青色になり、新しく追加されたオブジェクトの名前は緑色でハイライトされます。構造のアイコンにマウスを合わせると、ツールチッ...

ターミナル
WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、その他のコマンドラインタスクの実行に使用します。ターミナルプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっているターミナルプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認して...

TypeScript
WebStorm は TypeScript ソースコードの開発、実行、デバッグをサポートします。WebStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルはアイコン。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript...

Grunt
WebStorm は Grunt JavaScript Task Runner と一体化しています。WebStorm は、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、Gruntfile.js ファイル内のタスクまたはターゲットと、タスクとターゲットの実行とデバッグをサポートする Gruntfile.js ファイルを解析します。WebStorm では、専用の Grunt ツールウィンドウのタスクツリーから、または Grunt 実行構成を使用して、または起動前のタスクとして、Gru...

npm、pnpm、Yarn
WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...