WebStorm 2020.3 ヘルプ

ツールウィンドウ

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

WebStorm tool windows
  1. エディター

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

  3. npm ツールウィンドウ

  4. デバッグツールウィンドウ

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

ツールウィンドウを開く

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

  • メインメニューから、表示 | ツールウィンドウのツールウィンドウを選択します。

  • 対応するショートカット( Alt+1 など)を使用して、プロジェクトツールウィンドウを開きます。ツールウィンドウにショートカットがない場合は、キーボードショートカットを設定する説明に従って割り当てることができます。

  • ツールウィンドウバーの対応するツールウィンドウボタンをクリックします。

    Tool window bar
  • メインウィンドウの左下隅にあるクイックアクセスボタン Icon for quick access to tool windows / the Tool windows icon の上にマウスポインターを置いて、ツールウィンドウを選択します。

    Quick access to tool windows

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

  • Shift+Escape を押すか、メインメニューからウィンドウ | アクティブツールウィンドウ | アクティブなツールウィンドウを非表示を選択します。もう一度 Shift+Escape を押すと、非表示のツールウィンドウが表示されます。

すべてのツールウィンドウを閉じる

これにより、エディターに集中できます。

  • Ctrl+Shift+F12 を押すか、メインメニューからウィンドウ | アクティブツールウィンドウ | すべてのウィンドウを非表示を選択します。もう一度 Ctrl+Shift+F12 を押すと、非表示のツールウィンドウが表示されます。

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

メインウィンドウの端にあるツールウィンドウバーには、ツールウィンドウの表示と非表示を切り替えるボタンがあります。ツールウィンドウのボタンを右クリックして、コンテキストメニューを開きます。ここで、表示モードを変更したり、ツールウィンドウを移動したりできます。また、ツールウィンドウボタンをドラッグして、ツールウィンドウをバーに再配置することもできます。

Tool windows bar and buttons

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

  • メインウィンドウの左下隅にあるクイックアクセスボタンIcon for quick access to tool windowsをクリックして、ツールウィンドウバーを非表示にします。ボタンがIcon for quick access to tool windowsに変わり、クリックしてツールウィンドウバーを表示できます。

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

ツールウィンドウバーが非表示の場合は、Alt を 2 回押し続けると、非表示のツールウィンドウバーを表示できます。

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

通常、すべてのツールウィンドウには、タイトルバー、ツールバー、コンテンツペインがあります。

Components of a tool window

一部のツールウィンドウは、その機能に基づいて、タイトルバーのタブまたはドロップダウンセレクターを使用して分離されています。タブを表示するには、ウィンドウ | アクティブツールウィンドウ | タブのグループ化を選択します。このオプションを無効にすると、ドロップダウンメニューが表示されます。

The Project tool windoe with the Group Tabs option disabled
The Project tool window with the Group Tabs option enabled

タイトルバーには、表示モードとツールウィンドウの位置を変更するためのツールウィンドウオプションメニューThe tool window options menuが含まれています。これらのオプションには、タイトルバーまたはツールウィンドウのボタンを右クリックしてアクセスすることもできます。一部のツールウィンドウでは、機能に応じて、このメニューに他のオプションを含めることができます(たとえば、ツールウィンドウにリストされたアイテムのソート、フィルター、グループ化)。

the Hide button をクリックしてツールウィンドウを非表示にし、タイトルバーにある他のボタンを使用します。例:

  • The Expand All button およびThe Collapse All buttonは、ツールウィンドウのコンテンツを展開および縮小します。

  • The Select Opened File button は、ツールウィンドウのエディターからファイルを見つけて選択します

ツールウィンドウのツールバーからのアクションは、通常、メインメニューとコンテキストメニューからも利用できます。それらのいくつかは、デフォルトのショートカットで実行することもできます。キーボードショートカットを設定するに従って、アクションのショートカットを割り当てることができます。

ツリーのような構造を表示するすべてのツールウィンドウ(たとえば、プロジェクトツールウィンドウ)では、ツリービューでインデントレベルを示す垂直線を表示でき、プロジェクト内のコンポーネントの階層をよりよく理解できます。これらの行を表示するには、設定 / 環境設定 Ctrl+Alt+S外観および振る舞い | 外観ページでツリーインデントガイドの表示を有効にします。

関連ページ:

プロジェクトツールウィンドウ

プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。このツールウィンドウのほとんどの機能には、コンテンツペイ...

構造ツールウィンドウ、ファイル構造ポップアップ

構造ツールウィンドウこのツールウィンドウには、エディターで現在開いている、プロジェクトツールウィンドウで選択した、またはフォーカスを持っているファイルの構造が表示されます。表示 | ツールウィンドウ | 構造ファイル構造ポップアップこのポップアップには、現在エディターで開かれていてフォーカス...

ターミナル

WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、およびその他のコマンドラインタスクの実行に使用します。ターミナルエミュ...

TypeScript

WebStorm は、TypeScriptソースコードの開発、実行、デバッグをサポートしています。WebStorm は.tsおよび.tsxファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScript ファイルはアイコンでマークされています。TypeScri...

npm、pnpm、Yarn

WebStorm はnpm、Yarn、Yarn 2、pnpmと統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラ...

V8 CPU とメモリのプロファイリング

WebStorm を使用すると、V8 のサンプルベースのプロファイラーを使用してNode.jsアプリケーションの CPU プロファイルとヒープスナップショットをキャプチャーして分析できます。Google Chrome DevTools でキャプチャーされたスナップショットを開いて、クライアント側のコ...