WebStorm 2020.3 ヘルプ

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

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

The Main window

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

エディター

フォーカス : Escape

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

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

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

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

フォーカス : Alt+Home

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

The navigation bar at the top is a quick alternative to the プロジェクトツールウィンドウ where you can go through the structure of your project, open specific files, and jump to specific code elements in the current file.

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 Write-only クリックしてファイルの編集をロックします(読み取り専用に設定)。

JSON スキーマ

The widget appears on the 状況 bar when a JSON file (for example, package.json or tsconfig.json ) is opened in the active editor tab. The widget shows the schema that is used in this JSON file. Learn more from JSON.

TypeScript

The widget is shown on the 状況 bar all the time after you have opened a TypeScript file in the editor. Use the widget to compile TypeScript and to configure or restart the TypeScript Language Service. Learn more from TypeScript and 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 エディターは、コードの作成、読み取り、変更に使用する IDE の主要部分です。エディターは次の領域で構成されています。スクロールバーは現在のファイルのエラーと警告を表示します。パンくずリストは、現在のファイルのコード内を移動できます。ガターには、行番号と注釈が表示されます。タブには...

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

このツールウィンドウを使用すると、プロジェクトをさまざまな観点から見て、新しい項目(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルの開き、目的のコードフラグメントへの移動などのタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコ...

バージョン管理

VCS 操作のポップアップ( またはVCS | VCS 操作のポップアップ)を使用すると、VCS 関連のコマンドをすばやく呼び出すことができます。ポップアップ内のアクションのリストは、現在有効になっている VCS によって異なります。VCS オペレーションポップアップコマンドのリストは設定可能...

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

WebStorm では、各ファイルは、使用しているバージョン管理の状態に応じた色でマークされています。エディターでは、ファイルの各行のバージョン管理状態がチェックされ、ガター内で色が付けられます。ファイルのステータス :デフォルトのファイルステータス色を変更する場合は、設定 / 環境設定 | バ...

ツールウィンドウ

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