WebStorm 2020.1ヘルプ

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

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

The Main window

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

エディター

Use the editor to read, write, and explore your source code.

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

Various icons that appear in the gutter, for example, the Yellow bulb icon , help you notice quick fixes and other actions. Clicking such action indicator or pressing Alt+Enter opens an action list with all the quick fixes and other actions that are available at the current caret position.

The navigation bar at the top is a quick alternative to the プロジェクトツールウィンドウ where you can navigate the structure of your project and open files for editing.

Use the buttons to the right of the navigation bar to run the Run button and debug the Debug button your application, and perform basic version control operations (if the version control integration is configured). It also contains buttons to なんでも実行 The Run Anything button (press Ctrl twice) and どこでも検索 The Search Everywhere button (press Shift twice).

ステータス・バー

The left part of the status bar at the bottom of the main window shows the most recent event messages and descriptions of actions when you hover over them with the mouse pointer. Click the message to open it in the イベント・ログ . Right-click the message in the status bar and select コピー to paste the message text when you are searching for a solution to a problem or need to add it to the support ticket or to the WebStorm issue tracker.

The status bar also indicates the overall project and IDE status and provides access to various settings. The table below lists default icons and elements shown on the status bar.

Depending on the set of plugins and configuration settings, there can be other elements in addition to the default ones. Right-click the right part of the status bar to select the elements you want to show or hide.

Customize the icons on the Status bar

アイコン

説明

Show tool windows Hide tool windows

クリックして、ツールウィンドウバーを表示/非表示にします。非表示のツールウィンドウバーを表示するには、Alt を2回押し続けます。詳細については、ツールウィンドウバーの非表示または表示を参照してください。

Background tasks

クリックしてバックグラウンド・タスクマネージャーを表示してください。このアイコンは、バックグラウンドタスクが進行中の場合にのみ表示されます。

52:11

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

uiStatusLineEnding

クリックして、エディター内の現在のファイルの行末を変更します。

Encoding

クリックすると、現在のファイルのエンコーディングをエディターで変更できます。

Code style indents

現在のファイルで使用されているインデントスタイルを変更するときにクリックします。

Code style indents

If version control integration is enabled, shows the current VCS branch. Click to mangae VCS branches.

Read-only Write-only

クリックしてファイルの編集をロックします(読み取り専用に設定)。

The Hector icon

クリックして、コードインスペクションの強調表示設定を変更します。

スライダーを使用して、インスペクション The Hector inspections icon (すべてを強調表示)、構文 The Hector syntax icon (構文エラーのみを強調表示)、およびなし The Hector none icon (何も強調表示しない)から選択します。

すべてのバックグラウンド操作 Code analysis disabled in the Power Save modeを排除することによって電力消費を最小にするために省電力モードチェックボックスを選択してください。このモードでは、IDEはバックグラウンドコンパイル、コード補完、コードインスペクション、および強調表示のないテキストエディターに似ています。

ツール・ウィンドウ

ツール・ウィンドウ provide functionality that supplements editing code. For example, the プロジェクトツールウィンドウ shows you the structure of your project, and the 実行 tool window displays the output of your application when you run it.

By default, tool windows are docked to the sides and bottom of the main window. You can arrange them as necessary, undock, resize, hide, and so on. Right-click the title of the tool window or click The Show Options Menu button in the title for its arrangement options.

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

コンテキスト・メニュー

You can right-click various elements of the interface to see the actions available in the current context. For example, right-click a file in the プロジェクトツールウィンドウ for actions related to that file, or right-click in the editor to see actions that apply to the current code fragment.

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

Popup menus provide quick access for actions related to the current context. Here are some useful popup menus and their shortcuts:

  • Alt+Insert opens the 生成 popup for generating boilerplate code based on the context.

  • Ctrl+Shift+Alt+T opens the リファクタリング popup with a list of contextually available refactorings.

  • Alt+Insert in the プロジェクトツールウィンドウ opens the 新規 popup for adding new files and directories to your project.

  • Alt+` opens the VCS 操作 popup with contexutally available acttios for your version control system.

You can create custom popup menus using quick lists of actions that you often use.

最終更新日: 2020年4月7日

関連ページ:

プラグインを管理する

プラグインはWebStormのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoo...

エディターの基本

WebStormエディターは、コードの作成、読み取り、変更に使用するIDEの主要部分です。エディターは次の領域で構成されています。スクロールバーは現在のファイルのエラーと警告を表示します。パンくずリストは、現在のファイルのコード内を移動できます。ガターには、行番号と注釈が表示されます。タブには、現在...

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

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

バージョン管理

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

ファイル・ステータスの強調表示

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

デバッグ

デバッグセッション中に、デバッガをアタッチしてアプリケーション、クラス、またはファイルを起動します。デバッガーはプログラムの実行を妨害し、内部で何が起こっているかに関する情報を提供します。これにより、プログラムのバグを検出して修正するプロセスが容易になります。WebStormを使用すると、JavaS...