WebStorm 2024.3 ヘルプ

ツールウィンドウ

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

WebStorm tool windows
  1. エディター

  2. プロジェクトツールウィンドウ Alt+1

  3. npm ツールウィンドウ

  4. 実行ツールウィンドウ

一部のツールウィンドウは常に使用可能であり (たとえば、プロジェクトおよび構造、またはターミナル )、一部のツールウィンドウは特定のプラグインが有効になっているとき、またはプロジェクトが特定の構造になっているときにアクティブになり (たとえば、TypeScriptGruntnpm、または Spy-js)、一部のツールウィンドウは特定のアクションを実行したときにのみ表示されます (たとえば、デバッグまたは検索 )。

ツールウィンドウを開く

ツールウィンドウを表示または非表示にするには、次のいずれかを実行します。

アクティブなツールウィンドウを非表示にする

  1. Shift+Escape を押すか、メインメニューからウィンドウ | アクティブなツールウィンドウ | アクティブなツールウィンドウを非表示を選択します。

    非表示のツールウィンドウを表示するには、それに割り当てられたショートカットを使用します (ショートカット付きのツールウィンドウの完全なリストを表示するには、表示 | ツールウィンドウに移動します)。

  2. ツールバー上のツールウィンドウのアイコンを右クリックし、非表示を選択します。

  3. ツールウィンドウのヘッダーにある非表示ボタン (the Hide icon) をクリックします。

エディターに注意を集中するために、すべてのツールウィンドウを非表示にし、必要に応じて、非表示にしたときに開いていたすべてのウィンドウをすばやく復元することができます。

すべてのツールウィンドウを非表示または復元する

  1. Ctrl+Shift+F12 を押します。

  2. 最大化したいエディタータブをダブルクリックします。これは、詳細設定設定ページ Ctrl+Alt+Sエディターのタブをダブルクリックしたときに 'すべてのツールウィンドウを閉じる' / 'ウィンドウを復元' を実行するが有効になっている場合にのみ機能します。

  3. メインメニューからウィンドウ | アクティブなツールウィンドウ | すべてのウィンドウを非表示 / ウィンドウを復元を選択します。

  1. フォーカスをツールウィンドウからエディターの最後のキャレット位置に変更するには、Escape を押します。

  2. ツールウィンドウでコード項目(検索結果コードの問題ブックマークなど)を選択した場合は、F4 を押して対応するファイルを開き、エディターでこの項目を見つけます。

  3. エディターからフォーカスを最後のアクティブなツールウィンドウに戻すには、F12 を押すか、メインメニューからウィンドウ | アクティブなツールウィンドウ | 最後のツールウィンドウに移動を選択します。

ツールウィンドウバーとボタン

メインウィンドウの横のバーには、ツールウィンドウのアイコンが含まれています。アイコンをクリックすると、ツールウィンドウの表示 / 非表示を切り替えることができます。アイコンを右クリックするとコンテキストメニューが開き、ツールウィンドウを非表示にしたり移動したりできます。ツールウィンドウアイコンをドラッグして、ツールウィンドウを並べ替えることもできます。

Tool window bar

ツールウィンドウバーを表示または非表示にする

  • メインメニューの表示 | 外観に移動し、ツールウィンドウバーを選択またはクリアします。

ツールウィンドウ名を表示または非表示にする

  • ツールウィンドウバーを右クリックし、ツールウィンドウ名を表示するを選択または選択解除します。

Tool window names enabled
Tool window names disabled

ツールウィンドウのコンポーネント

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

Components of a tool window

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

Tool window toolbar

ツールウィンドウヘッダーには、ツールウィンドウの表示モードと位置を変更するためのオプションメニュー Options と、関連する設定やアクションのセットが含まれています。ヘッダーを右クリックしてこれらのオプションにアクセスすることもできます。

ツールウィンドウには、複数の異なるビューが含まれる場合があります。ビューを切り替えるには、このようなウィンドウのヘッダーにタブまたはドロップダウンセレクターを使用します。

ドロップダウンメニューを表示するには、ヘッダーを右クリックしてタブのグループ化を選択します。タブを表示するには、このオプションを無効にします。

Group Tabs enabled and disabled

ツールウィンドウのタブを切り替えるには、Alt+RightAlt+Left を押します。

the Hide button をクリックするとツールウィンドウが非表示になり、ヘッダーにある他のボタンを使用できます。例: The Expand All buttonThe Collapse All button をクリックするとツールウィンドウの内容が展開および折りたたまれ、The Select Opened File button をクリックするとツールウィンドウのエディターからファイルを見つけて選択できます。

デフォルトでは、ツールウィンドウヘッダーのアイコンは、ツールウィンドウにマウスを移動したとき、またはツールウィンドウにフォーカスがあるときにのみ表示されます。ツールウィンドウヘッダーアイコンを常に表示するには、詳細設定設定ページ 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 ファイル内のその定...