新しい 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) のカラーパレットが更新され、最近の変更をすばやく確認できるようになりました。