WebStorm 2024.1 の新機能

行の固定表示、クイックドキュメントの改善、行全体コード補完、デフォルトでの Vue Langugage Server の有効化、Vue、Svelte、および Astro のコンポーネント使用箇所、および新しい Language Services(言語サービス)ウィジェット。

主なハイライト

行の固定表示

WebStorm 2024.1 には、コンテキストを失うことなく大きなファイル内を移動しやすくする行の固定表示機能が搭載されています。 この機能により、スクロール時に関数やクラスの宣言などの重要な構造要素をエディターの上部にピン留めできます。 この機能は、Settings(設定)| Editor(エディター)| General(一般)| Appearance(外観)でカスタマイズできます。

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

WebStorm 2024.1 のクイックドキュメントのポップアップ表示が改善されました。 コードブロックの構文ハイライトがサポートされており、補完結果に組み込まれています。 インターフェースのメンバー、列挙型定数、および型エイリアスの本体を表示するようになりました。 Show more(さらに表示)リンクを使用すると、型メンバーの全リストにアクセスし、ページング操作で複数の宣言間を移動できます。

行全体コード補完

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

デフォルトでの Vue Langugage Server の有効化

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

Vue、Svelte、および Astro のコンポーネントの使用箇所

WebStorm に Vue、Svelte、および Astro ファイルのコンポーネントの使用箇所に関するエディター内ヒントが導入されました。 このヒントはプロジェクトの任意の場所で特定コンポーネントのすべての使用箇所を素早く特定するのに役立ちます。

Language Services(言語サービス)ウィジェット

ステータスバーに新しい Langauge Services(言語サービス)ウィジェットが導入され、現在のファイルとプロジェクトの有効な言語サービスに関するインサイトを得られるようになりました。 このウィジェットから直接サービスの再起動や設定への移動を行えます。

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

実験的 TypeScript エンジン

2024.1 リリースに実験的 TypeScript エンジンが搭載されました。このエンジンは Settings(設定)| Languages & Frameworks(言語とフレームワーク)| TypeScript でオンオフできます。 新しいエンジンは互換性の問題の解決とパフォーマンスの強化を目的としています。 この新しいアプローチは現在、TypeScript と Vue で適用できるようになっています。 詳細については、こちらのブログ記事をご覧ください。

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

WebStorm 2024.1 に props と状態をその場で作成できる React 用の新しいクイックフィックスがいくつか導入されました。 これらのクイックフィックスは、Alt+Enter ショートカットを使って適用できます。 詳細については、こちらのブログ記事をご覧ください。

React と JSX の Structure(構造)ビューの改善

Structure(構造)ツールウィンドウで JSX 構造と共に条件およびリスト表示用のノードを含む React コンポーネントとフックが表示されるようになりました。 また、JSX を使用した Preact や Solid などのライブラリもサポートされています。

Vue 3.4 のサポート

このリリースでは、Vue フレームワークの v3.4 で導入された v-bind 同一名ショートハンドをサポートするようになりました。 このサポートには、参照の解決、使用箇所の検索、補完、ドキュメント、およびインスペクションが含まれます。

GraphQL 関連の改善

GraphQL プラグインにいくつかの改良が加えられました。 インデックス作成のパフォーマンスを最適化し、node_modules と外部ライブラリでのスキーマ処理のサポートを拡張しました。

バージョン管理

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

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

GitHub Actions のサポートを強化

WebStorm 2024.1 では、github.*env.*steps.*inputs.* を含む GitHub Actions コンテキストの自動補完が導入されています。 また、image および main の Docker 構成プロパティの補完も追加されています。

Log(ログ)タブでブランチの変更をレビューするオプション

WebStorm 2024.1 では、ブランチ関連の変更に的を絞ったビューの導入によってコードレビューが単純化されています。 GitHub と GitLab の場合は Pull Requests(プルリクエスト)ツールウィンドウでブランチ名をクリックし、メニューから Show in Git Log(Git ログで表示)を選択できます。 この操作によって Log(ログ)タブが開き、ブランチ内のすべての変更が表示されます。

コードレビューのコメントにおけるリアクションのサポート

WebStorm 2024.1 では、GitHub のプルリクエストと GitLab のマージリクエストのレビューコメントに対するリアクションがサポートされています。 絵文字のセットの中から必要なものを選び、コードレビューのコメントにリアクションを追加できます。

ユーザーエクスペリエンス

新しいターミナル ベータ

新しいターミナル UI が実装され、Settings(設定)| Tools(ツール)| Terminal(ターミナル)| Enable New Terminal(新しいターミナルの有効化)で使用できるようになりました。 コマンドが個別のブロックで表示され、方向キーまたはキーボードショートカット(Ctrl+↑ および Ctrl+↓)を使って簡単に移動できるようになっています。 また、コマンド、パス、引数、およびオプションのコード補完を利用できます。 詳細については、こちらのブログ記事をご覧ください。

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

WebStorm 2024.1 では行内に複数のブレークポイントを設定できるようになり、より快適に作業できるようになりました。 ガターをクリックしてブレークポイントを設定すると、IDE がブレークポイントを追加で設定できるインラインマーカーを自動的に表示します。 各ブレークポイントは個別に構成できるため、高度なデバッグが可能になります。

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

WebStorm 2024.1 では、IDE の拡大縮小オプションを拡張しました。 このリリースでは従来の 100%~200% の範囲に加えて、IDE を 70% まで縮小表示できるようになっています。 これにより、UI サイズを調整して作業スペースにより多くのコンテンツを収めるのが楽になります。

HTTP クライアントの改善

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