WebStorm 2020.3 ヘルプ

ユーザーインターフェースの概要

WebStorm でプロジェクトを開くと、デフォルトのユーザーインターフェースは次のようになります。

The Main window

プラグインのセットと構成設定によっては、IDE の外観と動作が異なる場合があります。

エディター

フォーカス: Escape

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

アクションインジケーターとアクションリスト

アクションリストを開く: Alt+Enter

ガターに表示されるさまざまなアイコン( the Yellow bulb icon など)は、迅速な修正やその他のアクションに気づくのに役立ちます。そのようなアクションインジケーターをクリックするか Alt+Enter を押すと、現在のキャレット位置で利用できるすべてのクイックフィックスとその他のアクションがリストされたアクションリストが開きます。

フォーカス: Alt+Home

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

上部のナビゲーションバーは、プロジェクトツールウィンドウの簡単な代替手段であり、プロジェクトの構造を確認したり、特定のファイルを開いたり、現在のファイルの特定のコード要素にジャンプしたりできます。

Navigation bar

ナビゲーションバーの右側にあるボタンを使用して、the Run button を実行し、アプリケーションを the Debug button デバッグし、基本的なバージョン管理操作を実行します(バージョン管理統合が構成されている場合)。また、なんでも実行 The Run Anything buttonCtrl を 2 回押す)およびどこでも検索 The Search Everywhere buttonShift を 2 回押す)へのボタンも含まれています。

ステータスバー

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

メインウィンドウの下部にあるステータスバーの左側には、最新のイベントメッセージと、マウスポインターでマウスをポイントしたときのアクションの説明が表示されます。ステータスバーのメッセージをクリックして、イベントログで開きます。ステータスバーのメッセージを右クリックし、コピーを選択して、問題の解決策を検索するとき、またはサポートチケットまたは WebStorm の課題追跡に追加する必要があるときにメッセージテキストを貼り付けます。

クイックアクセスボタン Show tool windows または Hide tool windows を使用して、ツールウィンドウを切り替え、ツールウィンドウバー非表示にします

ステータスバーには、バックグラウンドタスクの進行状況も表示されます。Background tasks をクリックしてバックグラウンドタスクマネージャーを表示できます。

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

Customize the icons on the Status bar
ウィジェット 説明
52:11

エディター内の現在のキャレット位置の行番号と列番号を表示します。数字をクリックして、キャレットを特定の行と列に移動します。エディターでコードフラグメントを選択すると、WebStorm には、選択したフラグメントの文字数と改行も表示されます。

Line endings
現在のファイルの改行に使用される行末を表示します。このウィジェットをクリックして、行区切り記号を変更します。
Encoding 現在のファイルを表示するために使用されるエンコーディングを表示します。別のエンコーディングを使用するには、ウィジェットをクリックします。
Read-only Read and write ファイルを編集しないようにロックする(読み取り専用に設定する)か、ファイルを編集する場合はロックを解除します。

JSON スキーマ

ウィジェットは、アクティブなエディタータブで JSON ファイル(たとえば、package.json または tsconfig.json)を開くと、ステータスバーに表示されます。ウィジェットには、この JSON ファイルで使用されているスキーマが表示されます。JSON から詳細を参照してください。

TypeScript

エディターで TypeScript ファイルを開いた後は、ウィジェットが常にステータスバーに表示されます。ウィジェットを使用して TypeScript をコンパイルし、TypeScript 言語サービスを構成または再起動します。TypeScript および TypeScript を JavaScript にコンパイルするから詳細を参照してください。

Compile TypeScript code
VCS branches バージョン管理統合が有効な場合、このウィジェットは現在の VCS ブランチを表示します。それをクリックして VCS ブランチ管理します。
Code style indents 現在のファイルで使用されているインデントスタイルを表示します。クリックして、現在のファイルタイプのタブとインデント設定を構成するか、現在のプロジェクトでインデント検出を無効にします。
Memory indicator ヒープメモリの総量のうち、WebStorm が消費するメモリの量を示します。詳細については、メモリヒープを増やすを参照してください。

ツールウィンドウ

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

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

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

ショートカット割り当てて、頻繁に使用するツールウィンドウにすばやくアクセスできます。それらのいくつかはデフォルトでショートカットを持っています。例: プロジェクトツールウィンドウを開くには Alt+1 を押し、ターミナルツールウィンドウを開くには Alt+F12 を押します。エディターから最後のアクティブなツールウィンドウにジャンプするには、F12 を押します。

コンテキストメニュー

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

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

ポップアップメニューを使用すると、現在のコンテキストに関連するアクションにすばやくアクセスできます。以下は、いくつかの便利なポップアップメニューとそのショートカットです。

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

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

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

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

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

メインウィンドウ

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

ヘッダーに完全なパスを表示する

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S外観 & 振る舞い | 外観を開き、ウィンドウヘッダーに常にフルパスを表示するチェックボックスを選択します。

これにより、プロジェクトと現在のファイルへのパスが表示されます。

関連ページ:

プラグインを管理する

このサイトのメニューやアクション名表記は日本語です。WebStorm を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように WebStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しいプログラミング言語を...

エディターの基本

WebStorm エディターは、コードの作成、読み取り、変更に使用する IDE の主要部分です。エディターは次の領域で構成されています。スクロールバーは現在のファイルのエラーと警告を表示します。パンくずリストは、現在のファイルのコード内を移動できます。ガターには、行番号とアノテーションが表示されます。タブには、現在開いているファイルの名前が表示されます。ナビゲーション:さまざまなショートカットを使用して、エディターウィンドウとさまざまなツールウィンドウを切り替えたり、エディターサイズを変更した...

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

プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含まれて...

バージョン管理

VCS 操作のポップアップ(または)を使用すると、VCS 関連のコマンドをすばやく呼び出すことができます。ポップアップ内のアクションのリストは、現在有効になっている VCS によって異なります。VCS オペレーションポップアップコマンドのリストは設定可能です。設定 / 環境設定の外観および振る舞い | メニューおよびツールバーページで追加または削除できます。ローカル履歴バージョン管理を有効にする

ファイルステータスのハイライト

WebStorm では、各ファイルは、使用しているバージョン管理の状態に応じた色でマークされています。エディターでは、ファイルの各行のバージョン管理状態がチェックされ、ガター内で色が付けられます。ファイルのステータス:デフォルトのファイルステータス色を変更する場合は、に移動します。#0A7700 追加アクティブな変更リストのファイルは、リポジトリへの追加がスケジュールされています。#0EAA00 非アクティブな変更リストの追加非アクティブ変更リスト内のファイルは、リポジトリへの追加が予定されていま...

ツールウィンドウ

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