新しい UI
新しいユーザーインターフェース (UI) は、WebStorm およびその他の JetBrains IDE の外観を再設計したものです。デザインを簡素化し、重要な機能にアクセスしやすくするために作成されました。その結果、よりクリーンでモダンなルックアンドフィールが得られます。
この記事では、新しい UI の主な変更点と、それを使い始める方法について説明します。


主な変更点
テーマ
この UI には 3 つの新しいテーマ ( ライト、ダーク、ライトヘッダー付きライト ) が導入されました。これらはすべて、改善されたコントラストと一貫したカラーパレットを提供するように設計されています。



で別のテーマに切り替えることができます。すべてのカスタムテーマが完全にサポートされているわけではないことに注意してください。
フォント
Inter フォントが UI 要素に使用されるようになりました。以前は、各プラットフォームのデフォルトの OS フォントが使用され、異なる方法でレンダリングされていました。
UI フォントを変更する場合は、カスタムフォントの使用チェックボックスを選択して、推奨するフォントを選択します。
に移動し、アイコンとコンパクトモード
新しいアイコンセットは、読みやすさを向上させるために独特の形状と色を備えています。小さい画面で作業する場合は、メインメニューの
からコンパクトモードを有効にできます。これにより、ツールバーとツールウィンドウヘッダーの高さが縮小され、間隔とパディングが縮小され、アイコンとボタンが小さくなります。

メインウィンドウヘッダー
メインウィンドウのヘッダーを簡素化しました。アイコンとウィジェットを介して重要なアクションへのアクセスを提供します。メインウィンドウのヘッダーもカスタマイズ可能で、Git push
などのアクションをツールバーに追加できます。これを行うには、アイコンまたはウィジェットを右クリックし、そのコンテキストメニューからツールバーのカスタマイズを選択し、開いたメインツールバーのカスタマイズダイアログで優先アクションを追加します。

1. メインメニュー (Windows および Linux のみ)
メインメニューはハンバーガーアイコンにあります。それを開くには、Alt+\ を押します。
標準のメニューバーに戻すことができます。これを行うには、別のツールバーでメインメニューを表示オプションを有効にします。
に移動し、2: プロジェクトウィジェット
プロジェクトウィジェットには現在のプロジェクトの名前が表示され、最近のプロジェクトを切り替えたり、新しいプロジェクトを作成したり、既存のプロジェクトを開くことができます。
3: VCS ウィジェット
VCS ウィジェットは、現在のブランチを表示し、ブランチの切り替えを許可し、更新、コミット、プッシュ変更などの重要な VCS アクションへのアクセスを提供します。
これは、以前はメインウィンドウの下部にあるステータスバーにあった古いブランチウィジェットと、以前は右上隅のナビゲーションバーにあった VCS アクションアイコンを置き換えます。
4: 実行ウィジェット
このウィジェットを使用すると、実行 / デバッグ構成を使用してアプリケーションを実行およびデバッグできます。実行する構成を選択したり、そのモード (実行またはデバッグ) を変更したり、構成を編集、固定、削除したりできます。

メインツールバーからより多くの機能に直接アクセスできる一方で、新しいウィンドウヘッダーウィジェットはドロップダウンメニューのアクションを非表示にしてレイアウトを簡素化します。

ツールバーにアクションをすばやく追加する
メインツールバーのアクションを見逃した場合は、人気のあるアクションのリストから追加できます。
ツールバーを右クリックし、メインツールバーに追加をポイントし、リストから追加するアクションを選択します。
追加したいアクションが人気のあるアクションのリストにない場合は、メインツールバーのカスタマイズダイアログを使用します。
選択したアクションがツールバーに表示されます。メインツールバーのカスタマイズダイアログを使用して、アイコンを削除したり、アイコンを変更したりできます。
ツールウィンドウ
ツールウィンドウのレイアウトと動作が新しくなりました。
ツールウィンドウバーには大きなアイコンがあり、視覚的なナビゲーションが簡単になり、見た目もすっきりします。コンパクトモードで小さいアイコンを選択することもできます。
ツールウィンドウの名前を表示するには、そのアイコンの上にマウスカーソルを置くとツールヒントが表示されます。
ツールウィンドウ名を常に表示したい場合は、ツールウィンドウバーを右クリックし、ツールウィンドウ名を表示するを選択します。
境界線の左上と右上にあるツールウィンドウアイコンは、それに応じて左側と右側に垂直ウィンドウを開きます。
境界の左下と右下にあるツールウィンドウアイコンは、WebStorm の下部にある水平ツールウィンドウを開きます。
垂直分割と水平分割を使用してツールウィンドウを配置します。ツールウィンドウアイコンをサイドバーに沿ってドラッグし、垂直分割の場合はセパレータに、水平分割の場合は他のサイドバーにドロップします。
どのツールウィンドウストライプにも存在しないツールウィンドウは、他のツールウィンドウボタンにあります。他のツールウィンドウからツールウィンドウを開くと、そのアイコンが付いたバーがデフォルトの場所に追加されます。
ナビゲーションバー
ナビゲーションバーは、メインウィンドウの下部にあるステータスバーに配置されました。

以前の場所を希望する場合は、上部に戻すか、完全にオフにすることができます。これを行うには、メインメニューに移動して
を選択します。エディタータブ
複数のエディタータブでの作業がより便利になりました。タブが画面に収まらない場合は、スクロールバーを使用するか、タブを圧縮してすべてのタブを画面に配置するかを選択できます。設定ダイアログ (Ctrl+Alt+S) を開き、 に移動して、必要なオプションを選択します。



ガター
水平方向のスペースを節約するために、デフォルトでブレークポイントが行番号の上に配置されるようになりました。行番号の近くにブレークポイントを配置できます。Ctrl+Shift+A を押し、
Breakpoints Over Line Numbers
と入力して、オプションを無効にします。折りたたみアイコンが更新されました。展開された領域のアイコンはホバー時に表示され、見た目がすっきりします。
折りたたみアイコンを常に表示するように IDE を構成できます。コードの折りたたみの矢印を表示するの隣にある常時を選択します。
に移動し、アノテーション (
Git Blame
) のカラーパレットが更新され、最近の変更をすばやく確認できるようになりました。
関連ページ:

プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

バージョン管理
Web 開発環境 WebStorm の使い方や高等テクニック満載の JetBrains 日本語公式ヘルプ。最新の英語版ヘルプ内容が随時反映されます。

実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

アプリケーションを実行する
WebStorm を使用すると、コンテキストメニューまたはガターアイコンを使用して、エディターから直接、アプリケーション全体、単一のスクリプト、テストを実行できます。アプリケーションにいくつかのパラメーターを渡したり、npm スクリプトなどのツールを起動したりする必要がある場合は、実行する前に、言語またはフレームワーク固有の実行 / デバッグ構成を作成して呼び出します。プロジェクトで現在使用可能なすべての実行構成が実行 / デバッグ構成を選択リストに表示されます。実行 / デバッグ構成の詳細を参...

メニューおよびツールバー
IDE を操作するとき、いくつかのアクションを他のアクションより頻繁に実行します。生産性を最大化するには、お気に入りのアクションのデフォルトのショートカットを学ぶか、それらにショートカットを割り当てます。メニューとツールバーをカスタマイズして、必要なアクションのみを含め、再グループ化し、アイコンを構成することもできます。メニューおよびツールバーをカスタマイズを押して設定を開き、を選択します。使用可能なメニューとツールバーのリストで、カスタマイズするノードを展開し、目的の項目を選択します。選択した...

言語と領域
言語:WebStorm は英語で利用可能ですが、中国語、韓国語、日本語をサポートするバンドルされたプラグインも含まれています。オペレーティングシステムがサポートされている言語であり、WebStorm が別の言語である場合、揃えるための提案が表示されます。このタイプの通知を表示したくない場合は、非表示にすることができます。言語パックプラグインを有効にするこの機能は、WebStorm にデフォルトでバンドルされ有効になっている中国語、日本語、韓国語言語パックプラグインに依存しています。関連する機能...