WebStorm の新機能

WebStorm 2024.1 の新機能

固定行、クイックドキュメントの改善、フルラインコード補完、デフォルトで有効化された Vue 言語サーバー、Vue、Svelte、Astro のコンポーネントの使用、新しい 言語サービスウィジェット。

主なハイライト

固定行

WebStorm 2024.1 には、 コンテキストを失うことなく大きなファイルを移動するに役立つ固定行が含まれています。この機能は、スクロールするときに関数やクラスの宣言などの重要な構造要素をエディターの上部に固定します。この機能は 設定 | エディター | 一般 | 外観でカスタマイズできます。

クイックドキュメントの改善

クイックドキュメントポップアップは、WebStorm 2024.1 で機能が強化されます。コードブロックの構文のハイライトをサポートし、補完結果に統合されています。現在は インターフェースメンバー、列挙定数、型エイリアス本体を表示しますです。 さらに表示リンクを使用して型メンバーの完全なリストにアクセスし、ページングコントロールを使用して複数の宣言間を移動できます。

行全体コード補完

新しいタイプのコード補完を追加しました。これは、現在のファイルのコンテキストに基づいて行を補完する、グレートーンの単一行の候補です。これらの候補は、さまざまな言語とフレームワーク向けにトレーニングされた特殊な言語モデルによって実現されています。これらの LLM は、 インターネット経由でコードを送信することなく、ローカルで実行されます。この機能は、標準の WebStorm ライセンスサブスクリプションに含まれています。

Vue 言語サーバーはデフォルトで有効になっています

Vue 言語サーバーは、すべての Vue プロジェクト (Nuxt ベースのものも含む ) でデフォルトで有効になりました。Vue 2 プロジェクトでは、いくつかの既知の制限があります。これらのプロジェクトで作業する場合は、 設定 | 言語 & フレームワーク | TypeScript | Vue でサーバーの使用をオプトアウトできます。

Vue、Svelte、Astro のコンポーネントの使用

WebStorm では、Vue、Svelte、Astro ファイル内のコンポーネントの使用箇所について、エディター内ヒントが提供されるようになりました。これにより、プロジェクト内の任意の場所で 特定のコンポーネントの使用箇所をすべてすばやく見つけることができます。

言語サービスウィジェット

ステータスバーに新しい 言語サービスウィジェットが表示され、現在のファイルとプロジェクトのアクティブな言語サービスに関する情報が提供されます。このウィジェットから直接、 サービスを再起動したり、設定に移動したりできます。

フレームワークとテクノロジー

実験用 TypeScript エンジン

2024.1 リリースには、実験的な TypeScript エンジンが付属しており、 設定 | 言語 & フレームワーク | TypeScript で切り替えることができます。新しいエンジンの目的は、 互換性の問題に対処し、パフォーマンスを向上させることです。新しいアプローチは現在、TypeScript と Vue に適用可能です。詳細については、このブログ投稿(英語)を参照してください。

React の新しいクイックフィックス

WebStorm 2024.1 では、React の新しいクイックフィックスがいくつか導入されており、これにより props と状態をオンザフライで作成できます。これらのクイックフィックスは、ショートカット Alt+Enter を使用して適用できます。詳細については、このブログ投稿(英語)を参照してください。

React および JSX の 構造ビューの改善

構造ツールウィンドウには、条件付きレンダリングとリストレンダリングのノードを含む JSX 構造とともに、React コンポーネントとフックが表示されるようになりました。さらに、Preact や Solid などの JSX ベースのライブラリもサポートされています。

Vue 3.4 サポート

このリリースでは、フレームワークの v3.4(英語) で導入された Vue の v-bind のサポートの同名ショートカットが導入されています。サポートには、参照解決、使用箇所の検索、補完、ドキュメント、インスペクションが含まれます。

GraphQL の改善

当社の GraphQL プラグイン(英語)はいくつかのアップグレードを受けました: インデックスパフォーマンスを最適化しましたと拡張サポートにより、node_modules および外部ライブラリのスキーマを処理できるようになりました。

バージョン管理

エディター内コードレビュー

WebStorm 2024.1 は、GitHub および GitLab ユーザーのコードレビュープロセスを改善します。新しいレビューモードでは、変更がガターの紫色のマーカーでハイライトされ、作成者とレビュー担当者に表示されます。+ または メッセージアイコンをクリックして新しいディスカッションを開始したり、コメントを表示して返信したりすることで、エディター内で 直接ディスカッションに参加できます。

GitHub アクションのサポート強化

WebStorm 2024.1 は、github.*env.*steps.*inputs.* を含む GitHub アクションコンテキストの自動補完を導入します。また、image および main Docker 構成プロパティの補完も追加しました。

ログタブでブランチの変更を確認するオプション

WebStorm 2024.1 は、 ブランチ関連の変化に焦点を当てた観察を使用したコードレビューを簡素化します。GitHub および GitLab の場合、 プルリクエストツールウィンドウでブランチ名をクリックし、メニューから Git ログで表示を選択できます。これにより、 ログタブが開き、ブランチのすべての変更が表示されます。

コードレビューコメントへの反応のサポート

WebStorm 2024.1 は、GitHub プルリクエストと GitLab マージリクエストのレビューコメントへの反応のサポートを提供します。絵文字のセットから選択して、 コードレビューコメントに反応を追加できるようになりました。

ユーザー体験

新ターミナルベータ

設定 | ツール | ターミナル | 新しいターミナルを有効にするから利用できる新しいターミナル UI を実装しました。コマンドは個別のブロックで表示されるようになり、 矢印キーまたはキーボードショートカット (Ctrl+ ↑ and Ctrl+ ↓ ) を使用して簡単に移動できるようになりました。さらに、コマンド、パス、引数、オプションについてはコード補完を利用できます。詳細については、このブログ投稿(英語)を参照してください。

複数のステートメントのインラインブレークポイント

WebStorm 2024.1 は、行内にブレークポイントを設定するためのより便利なワークフローを提供します。ガターをクリックしてブレークポイントを設定すると、IDE は 追加のブレークポイントを設定できるインラインマーカーを自動的に表示します。各ブレークポイントは個別に構成できるため、高度なデバッグ機能が使用可能になります

IDE 全体を縮小するオプション

WebStorm 2024.1 では、IDE スケーリングオプションが拡張されました。以前の 100% から 200% の範囲に加えて、IDE を 70% に縮小するも使用できるようになりました。これにより、スペース内にさらに多くのコンテンツを収めるために UI サイズを簡単に調整できるようになります。

HTTP クライアントの改善

HTTP クライアントは、低レベルのネットワークライブラリとして Netty を使用するようになりました。これにより、HTTP クライアントで HTTP/2 サポートを実装できます。さらに、PKCE 認証コードやデバイスグラントフローなどの 新しい認証オプションが追加され、トークンおよび認証リクエストのサポートが強化されました。