ユーザーインターフェース

ナビゲーションバー

フォーカス:Alt+Home

表示 / 非表示: 表示 | 外観 | ナビゲーションバー

ナビゲーションバーはプロジェクトビューの代わりとなるもので、プロジェクトの構造を確認したり、特定のファイルを開いたり、現在のファイル内の特定のコード要素に移動したりできます。

メインウィンドウの下部にあるステータスバーにあります。ナビゲーションバーの位置は変更できます。メインメニューで表示 | 外観 | ナビゲーションバーに移動し、上を選択すると IDE ウィンドウの上部にナビゲーションバーが表示され、表示しないを選択すると無効になります。

エディター

フォーカス:Escape

エディターを使用して、ソースコードの読み取り、書き込み、探索を行います。

ステータスバー

表示 / 非表示: 表示 | 外観 | ステータスバー

ステータスバーの左側をナビゲーションバーとして使用しない場合は、最新のイベントメッセージが表示されます。ステータスバーのメッセージをクリックすると、通知ツールウィンドウで開きます。問題の解決策を検索したり、サポートチケットや WebStorm の課題追跡ツールに追加したりする必要がある場合は、ステータスバーのメッセージを右クリックして「コピー」を選択すると、メッセージテキストを貼り付けることができます。

ステータスバーにはプロセスの進行状況も表示されます。 をクリックすると、プロセスマネージャーが表示されます。

ステータスバーの点滅する アイコンは、内部 IDE エラーが発生したことを示します。クリックすると、エラーの説明が表示され、レポートが送信されます。

ステータスバーの右側には、プロジェクト全体と IDE のステータスを示し、さまざまな設定へのアクセスを提供するウィジェットが含まれています。プラグインのセットと構成設定に応じて、ウィジェットのセットは変更できます。ステータスバーを右クリックして、表示または非表示にするウィジェットを選択します。

ウィジェット	説明
52:11	エディター内の現在のキャレット位置の行番号と列番号を表示します。数字をクリックして、キャレットを特定の行と列に移動します。エディターでコードフラグメントを選択すると、WebStorm には、選択したフラグメントの文字数と改行も表示されます。
LF	現在のファイルの改行に使用される行末を表示します。このウィジェットをクリックして、改行コードを変更します。
UTF-8	現在のファイルを表示するために使用されるエンコーディングを表示します。別のエンコーディングを使用するには、ウィジェットをクリックします。
列	現在のエディタータブで列選択モードが有効になっていることを示します。Alt+Shift+Insert を押して切り替えることができます。
	ファイルを編集しないようにロックする（読み取り専用に設定する）か、ファイルを編集する場合はロックを解除します。
JSON スキーマ	アクティブなエディタータブで JSON ファイル（例: package.json または tsconfig.json）を開くと、ウィジェットがステータスバーに表示されます。このウィジェットには、この JSON ファイルで使用されているスキーマが表示されます。詳しくは JSON を参照してください。
言語サービス	ウィジェットには、現在のプロジェクトで実行されているコンパイラー、リンターなどの言語サービスのリストが表示されます。 現在アクティブなエディタータブ内のファイルに対して 1 つの言語サービスのみが実行されている場合は、ステータスバーに言語サービスではなくこのサービスの名前が表示されます。 エディターで TypeScript ファイルを開いた後は、TypeScript ウィジェットがステータスバーに常に表示されます。 ウィジェットを使用して、TypeScript をコンパイルし、TypeScript 言語サービスを設定または再起動します。詳しくは、TypeScript と TypeScript を JavaScript にコンパイルするを参照してください。
メイン	バージョン管理統合が有効な場合、このウィジェットは現在の VCS ブランチを表示します。それをクリックして VCS ブランチを管理します。
2 スペース	現在のファイルで使用されているインデントスタイルを表示します。クリックして、現在のファイルタイプのタブとインデントの設定を構成するか、現在のプロジェクトのインデント検出を無効にします。
	ヒープメモリの総量のうち、WebStorm が消費するメモリの量を示します。詳細については、メモリヒープを増やすを参照してください。
	デプロイ操作を実行するためのデフォルトとして、設定済みのデプロイサーバーまたはサーバーグループのいずれかを設定する場合にクリックします。

ツールウィンドウ

表示 / 非表示: 表示 | ツールウィンドウ

ツールウィンドウは、編集コードを補足する機能を提供します。例: プロジェクトツールウィンドウにはプロジェクトの構造が表示され、実行ツールウィンドウには実行時にアプリケーションの出力が表示されます。

デフォルトでは、ツールウィンドウはメインウィンドウの側面と底面にドッキングされています。必要に応じて配置、ドッキング解除、サイズ変更、非表示などを行うことができます。ツールウィンドウのタイトルを右クリックするか、タイトルの をクリックして配置オプションを表示します。

頻繁に使用するツールウィンドウにすばやくアクセスするためのショートカットを割り当てることができます。一部のツールウィンドウにはデフォルトでショートカットがあります。例: プロジェクトツールウィンドウを開くには Alt+1 を押し、ターミナルツールウィンドウを開くには Alt+F12 を押します。エディターから最後にアクティブだったツールウィンドウに移動するには、F12 を押します。

コンテキストメニュー

インターフェースのさまざまな要素を右クリックすると、その要素の現在のコンテキストで使用可能なアクションが表示されます。たとえば、プロジェクトツールウィンドウでファイルを右クリックすると、そのファイルに関連するアクションが表示されます。また、エディターで右クリックすると、現在のコードフラグメントに適用されるアクションが表示されます。

これらの操作のほとんどは、画面上部のメインメニューまたはメインウィンドウからも実行できます。ショートカット付きのアクションには、アクション名の横にショートカットが表示されます。

ポップアップメニュー

ポップアップメニューを使用すると、現在の IDE およびプロジェクトコンテキストに関連するアクションにすばやくアクセスできます。次に、便利なポップアップメニューとそのショートカットをいくつか示します。

• Alt+Insert は、コンテキストに基づいてボイラープレートコードを生成するための生成ポップアップを開きます。

• Ctrl+Alt+Shift+T は、コンテキストで利用可能なリファクタリングのリストを含むリファクタリングポップアップを開きます。

• プロジェクトツールウィンドウの Alt+Insert は、プロジェクトに新しいファイルとディレクトリを追加するための新規ポップアップを開きます。

• Alt+` は、バージョン管理システムでコンテキストに応じて使用可能なアクションを含む VCS 操作ポップアップを開きます。

頻繁に使用するアクションのクイックリストを使用して、カスタムポップアップメニューを作成できます。

ツールウィンドウバー

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

左右のバーの上部にあるツールウィンドウアイコンは、IDE ウィンドウの左右に垂直のツールウィンドウを開きます。

バーの下部にあるアイコンは、IDE ウィンドウの下部にある水平ツールウィンドウを開きます。

ツールウィンドウバーとボタンの詳細を参照してください。

ツールバー

ウィンドウヘッダーのツールバーには、いくつかのウィジェットが配置されています。左から説明します。

1. メインメニュー (Windows および Linux のみ)

   メインメニューの表示方法を選択できます。オプションは以下のとおりです。

   • メインツールバーと統合 : メインメニューとツールバーは同じパネルに表示されます。

   • ハンバーガーボタンの下に非表示 : メインメニューは メニューアイコンに隠れています。メニューカテゴリにアクセスするには、アイコンをクリックするか、Alt+\ を押してください。要素は他のヘッダーウィジェットの上に水平に表示されます。

   • メインツールバーの上に表示 : メインメニューはツールバーの上にある別のパネルに配置されています。

   メインメニューの表示方法を設定するには、設定 | 外観 & 振る舞い | 外観に移動し、メインメニューのドロップダウンメニューからオプションを選択してください。または、メインメニューの表示 | 外観 | メインメニューに移動してください。

2. プロジェクトウィジェット

   ウィジェットには現在のプロジェクトの名前が表示され、最近のプロジェクトを切り替えたり、新しいプロジェクトを作成したり、既存のプロジェクトを開いたりすることができます。

3. VCS ウィジェット

   ウィジェットは現在のブランチを表示し、ブランチを切り替えることができ、プロジェクトの更新、変更のコミットおよびプッシュなどの最も人気のある VCS アクションを提供します。

   これは、以前はメインウィンドウの下部にあるステータスバーにあったブランチウィジェットと、以前は右上隅のナビゲーションバーにあった VCS アクションアイコンに取って代わりました。

4. 実行ウィジェット

   ウィジェットを使用すると、実行 / デバッグ構成を開始し、実行する他の構成を選択し、現在の構成のモード (実行またはデバッグ) を変更できます。このウィジェットを使用して、構成を編集、固定、削除できます。

   プロセスの実行中に、ウィジェットを使用してプロセスを再起動または停止できます。

ガター

ガターはエディターの左側にあるパネルです。コードの問題を修正したり、コードを実行またはデバッグしたり、その他のフレームワーク固有の機能を使用したりするためのアクションアイコンが含まれています。行数、ブレークポイント、ブックマークもガターに表示されます。

ガターを使用すると、コードを折りたたんだり、バージョン管理下のプロジェクトの変更された行をマークしたり、コードカバレッジの結果を表示したりすることもできます。

メインウィンドウ

メインウィンドウでは、単一の WebStorm プロジェクトを操作できます。複数のウィンドウで複数のプロジェクトを開くことができます。デフォルトでは、ウィンドウヘッダーには、プロジェクトの名前と現在開いているファイルの名前が表示されます。複数のモジュールがある場合は、関連するモジュールの名前も表示されます。

プロジェクトと現在のファイルへの完全なパスを表示するには、外観 & 振る舞い | 外観設定ページでウィンドウヘッダーに常にフルパスを表示するを選択します。