ユーザーインターフェース
WebStorm で project を開くと、デフォルトのユーザーインターフェースは次のようになります：
プラグインのセットと構成設定によっては、IDE の外観と動作が異なる場合があります。
ナビゲーションバー
フォーカス: Alt+Home
表示 / 非表示:
ナビゲーションバーは プロジェクトビュー の代替手段であり、project の構造を確認したり、特定のファイルを開いたり、現在のファイル内の特定のコード要素にジャンプしたりできます。
ナビゲーションバーは、メインウィンドウの下部にあるステータスバーに配置されています。 その場所は変更できます。メインメニューで に移動し、 上 を選択すると、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 が使用しているメモリ量を示します。 詳細については、 メモリヒープを増やすを参照してください。 |
| デプロイ操作を実行するための デフォルトとして、設定済みのデプロイサーバーまたはサーバーグループのいずれかを設定する場合にクリックします。  |
メイン
ツールウィンドウ
表示 / 非表示:
ツールウィンドウは、コード編集を補助する機能を提供します。 例： プロジェクトツールウィンドウ では project の構造が表示され、 実行ツールウィンドウではアプリケーション実行時の出力が表示されます。
デフォルトでは、ツールウィンドウはメインウィンドウの側面と底面にドッキングされています。 必要に応じて配置 、ドッキング解除、サイズ変更、非表示などを行うことができます。 ツールウィンドウのタイトルを右クリックするか、タイトルの 
をクリックして配置オプションを表示します。
頻繁に使用するツールウィンドウにすばやくアクセスするための ショートカットを割り当てることができます。 一部のツールウィンドウにはデフォルトでショートカットがあります。 例： プロジェクトツールウィンドウを開くには Alt+1 を、 ターミナルツールウィンドウを開くには Alt+F12 を押します。 エディターから最後にアクティブだったツールウィンドウに移動するには、 F12 を押します。
コンテキストメニュー
インターフェースの各要素を右クリックすると、その要素の現在のコンテキストで利用可能なアクションを表示できます。 例えば、 プロジェクトツールウィンドウでファイルを右クリックするとそのファイルに関連するアクションが、エディター内で右クリックすると現在のコード断片に適用されるアクションが表示されます。
これらの操作のほとんどは、画面上部のメインメニューまたはメインウィンドウからも実行できます。 ショートカット付きのアクションには、アクション名の横にショートカットが表示されます。
ポップアップメニュー
ポップアップメニューでは、現在の IDE や project コンテキストに関連するアクションにすばやくアクセスできます。 次に、便利なポップアップメニューとそのショートカットをいくつか示します。
Alt+Insert は、コンテキストに基づいて 生成 ポップアップで ボイラープレートコード を生成できます。
Ctrl+Alt+Shift+T は、コンテキストで利用可能な リファクタリングのリストを含む リファクタリング ポップアップを開きます。
Alt+Insert は プロジェクトツールウィンドウ内で project に新しいファイルやディレクトリを追加するための 新規 ポップアップを開きます。
Alt+` は、 バージョン管理システムでコンテキストに応じて使用可能なアクションを含む VCS 操作 ポップアップを開きます。
頻繁に使用するアクションの クイックリストを使用して、カスタムポップアップメニューを作成できます。
ツールウィンドウバー
メインウィンドウの横のバーには、ツールウィンドウのアイコンが含まれています。 アイコンをクリックすると、ツールウィンドウの表示 / 非表示を切り替えることができます。 アイコンを右クリックするとコンテキストメニューが開き、ツールウィンドウを非表示にしたり移動したりできます。 ツールウィンドウアイコンをドラッグして、ツールウィンドウを並べ替えることもできます。
左右のバー上部にあるツールウィンドウアイコンをクリックすると、IDE ウィンドウの左右に垂直のツールウィンドウが開きます。
バーの下部にあるアイコンをクリックすると、IDE ウィンドウ下部に水平ツールウィンドウが開きます。
詳細は ツールウィンドウバーとボタン をご覧ください。
ツールバー
ウィンドウヘッダーのツールバーには、いくつかのウィジェットが配置されています。 左から説明します。
メインメニュー（Windows および Linux のみ）
メインメニューの表示方法を選択できます。 オプションは以下のとおりです。
メインツールバーと統合する: メインメニューとツールバーは同じパネルに表示されます。
ハンバーガーボタンの下に非表示にする: メインメニューは
メニューアイコンに隠れています。 メニューカテゴリにアクセスするには、アイコンをクリックするか、 Alt+\ を押してください。 要素は他のヘッダーウィジェットの上に水平に表示されます。メインツールバーの上に表示する: メインメニューはツールバーの上にある別のパネルに配置されています。
メインメニューの表示方法を設定するには、 に移動し、 メインメニュー のドロップダウンメニューからオプションを選択してください。 または、メインメニューで に移動してください。
プロジェクトウィジェット
ウィジェットは現在の project の名前を表示し、最近の project への切り替え、新しい project の作成、既存のもののオープンが可能です。
VCS ウィジェット
ウィジェットは現在のブランチを表示し、ブランチを切り替えることができ、プロジェクトの更新、変更のコミットおよびプッシュなどの最も人気のある VCS アクションを提供します。
これは以前メインウィンドウの下部ステータスバーにあったブランチウィジェットや、右上隅のナビゲーションバーにあった VCS アクションアイコンの代わりとなりました。
実行ウィジェット
このウィジェットで 実行 / デバッグ構成の開始、別構成の選択、現在の構成のモード（実行またはデバッグ）変更が行えます。 このウィジェットを使用して、構成を編集、固定、削除できます。
プロセスが実行中の場合、このウィジェットを使って再起動や停止ができます。
ガター
ガターはエディター内左側のパネルです。 コードの問題を修正したり、コードを実行またはデバッグしたり、その他のフレームワーク固有の機能を使用したりするための アクションアイコンが含まれています。 行番号、 ブレークポイント、 ブックマークもガターに表示されます。
ガターを使用すると、 コードを折りたたんだり 、バージョン管理下のプロジェクトの 変更された行をマークしたり、 コードカバレッジの結果を表示したりすることもできます。
メインウィンドウ
メインウィンドウでは、単一の WebStorm project を操作できます。 複数のウィンドウで複数の project を開くことができます。 デフォルトでは、ウィンドウヘッダーには、プロジェクトの名前と現在開いているファイルの名前が表示されます。 複数のモジュールがある場合は、関連するモジュールの名前も表示されます。
プロジェクトと現在のファイルへの完全なパスを表示するには、 外観 & 振る舞い | 外観 設定ページ Ctrl+Alt+S で ウィンドウヘッダーに常にフルパスを表示する を選択します。