WebStorm 2020.2 ヘルプ

ツールウィンドウ

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

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 を押すと、非表示のツールウィンドウが表示されます。

  • ツールウィンドウからエディターにフォーカスを変更するには、Escape を押します。

  • エディターからフォーカスを最後のアクティブなツールウィンドウに戻すには、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 ファイルはアイコンでマークされています。TypeScript...

Grunt

WebStorm はGrunt JavaScript Task Runnerと一体化しています。WebStorm は、タスクとターゲットの定義を認識し、ツリービューでタスクやターゲットを表示し、Gruntfile.jsファイル内のタスクまたはターゲットと、タスクとターゲットの実行とデバッグをサポート...

npm、pnpm、および Yarn

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