WebStorm 2022.3 の新機能

WebStorm のウェルカム画面からアクセスできる New Project（新規プロジェクト）ウィザードを改良しました。 バージョン 2022.2 では AngularJS、Cordova、および Meteor のプロジェクトテンプレートを廃止しましたが、 このリリースでは Vite と Next.js の新しいテンプレートを追加し、最新の標準に合わせて Vue のテンプレートを更新しました。

WebStorm now supports Vitest, a Vite-native unit test framework! ガターアイコンなど、必要とされるすべての基本操作でテストの実行、再実行、およびデバッグを行えます。 また、All Tests（すべてのテスト）シナリオに対してウォッチモードがデフォルトで有効になっています。 ウォッチモードではスナップショットテストとカバレッジもサポートされているため、コーディング中にカバレッジに関するフィードバックをほぼ瞬時に受けることができます。

WebStorm が未解決のインポートを処理し、Vue コンポーネントのインポートに関する提案を示すようになりました。 また、props 分割代入構文を新たにサポートしており、Vue ライブラリコンポーネントの props に対応したコード補完と型チェックの動作改善、および Nuxt 3 に関する複数の問題の修正も行われています。

このリリースには、詳細に説明しておくべき改善点がもう 1 つあります。それは、WebStorm ではライブテンプレートと呼ばれている新しいコードスニペットです。 ライブテンプレートを使用すれば、script setup や export default といった一般的なコンストラクトの追加をより迅速に行えます。 Preferences（環境設定）/ Settings（設定）| Editor（エディター）| Live Templates（ライブテンプレート）を開いて Vue セクションを展開すると、利用可能なコードスニペットを参照できます。

Angular テンプレートで型の絞り込みをサポートしました。これにより、さらに正確な型情報が提供され、コード補完候補が改善されるようになります。 また、WebStorm がより適切な検索結果を提供できるよう、グローバル検索から .angular キャッシュフォルダーを除外するようになりました。

Rider と IntelliJ IDEA の Code Vision 機能が WebStorm にも導入されました！ Code Vision が型や型メンバーに関するさまざまなメトリクスを収集し、この情報をそれぞれの宣言の近くに表示します。 これにより、コード内にある各種のクラス、メソッド、型エイリアス、およびインターフェースの使用箇所が追跡しやすくなります。 Code Vision を構成するには、Preferences（環境設定）/ Settings（設定）| Editor（エディター）| Inlay Hints（インレイヒント）を開いてください。

WebStorm でのモノリポと TypeScript の処理に関する修正をいくつか行いました。 ナビゲーション、自動インポート、および名前の変更リファクタリング機能の信頼性が向上しています。 これは、npm、Yarn、pnpm など、すべての一般的なパッケージマネージャーに適用されます。

WebStorm 2022.3 には、JavaScript および TypeScript オブジェクトをアルファベット順に並べ替える新しいインテンションが追加されています。 このインテンションを実行すると、オブジェクト内のすべてのプロパティのコードがアルファベット順に整形されます。 このインテンションを使用するには、メソッド内のオブジェクトをハイライトして Alt+Enter を押し、Sort properties alphabetically（プロパティをアルファベット順に並べ替え）を選択します。

今年初めに JetBrains IDE の新しい UI の限定プレビュープログラムを発表しました。 この最初のステップでは、改良された IDE の外観を限られた数のユーザーに導入することを目指していました。 今回は、Preferences（環境設定）/ Settings（設定）| Appearance & Behavior（外観と動作）| New UI（新しい UI）で新しい UI に切り替えられるようになりました。ご意見をお聞かせください。 To learn more about the changes, watch this webinar recording.

作業スペースの整理とマルチモニター環境での WebStorm の操作を楽にするため、ツールウィンドウをメインウィンドウの外にドラッグしてフローティングエディタータブにドッキングするオプションを実装しました。

Search Everywhere の結果リストを処理するアルゴリズムが微調整され、その予測能力と精度が向上しました。 IDE が表示される最初の検索結果を固定し、他の候補が見つかってもその位置を変更しないように改善されています。 また、Files（ファイル）タブの ML ランキングが有効になったため、検索結果の精度が向上しています。

新しい Settings Sync（設定の同期）プラグインを WebStorm で利用できるようになりました。 新しいソリューションでは、プラットフォーム、バンドルプラグイン、および一部サードパーティプラグインの共有可能な設定の大部分を同期できます。 以前の IDE Settings Sync（IDE 設定の同期）プラグインはサポートされなくなり、Settings Repository（設定リポジトリ）はバンドルされなくなることに注意してください。 詳しくは、こちらのブログ記事をご覧ください。

WebStorm 組み込みの Tip of the Day（今日のヒント）学習ツールが微調整されました。 ヒントの評価機能を追加し、ヒントの表示アルゴリズムを改善しました。 これにより、IDE のエクスペリエンスと作業中のプロジェクトにより関連性のあるヒントが得られるようになります。

貼り付けアクション（Ctrl+V）の動作を改良しました。 コードが選択されていない状態で行のコピー（Ctrl+C）または切り取り（Ctrl+X）を行った場合、貼り付けアクションでは従来バージョンのようにキャレットの位置ではなく、現在行の上にクリップボードの内容が追加されます。 この動作は、Preferences（環境設定）/ Settings（設定）| Advanced Settings（高度な設定）で無効にできます。

選択したアクションを適用した場合の結果をプレビュー表示して説明する新しい機能を追加しました。 このプレビューは、使用可能なインテンションアクションのリストを開いてオプションにマウスを合わせると表示されます。 この機能は、インテンションアクションのリストが開いている状態で Ctrl+Q を押すと無効にできます。

WebStorm 2022.3 will detect vulnerabilities in the packages used in your projects by checking the packages against the Checkmarx SCA Database and the National Vulnerability Database. IDE は脆弱と見なされるパッケージをハイライトし、可能な場合には修正を提案します。

docker-compose.yml、Kubernetes ファイル、OpenAPI 仕様といった YAML ファイルのコメントでインスペクションを抑止するクイックフィックスが追加されました。 また、# で始まる 3 行以上のブロックで構成される複数行コメントを折りたたむ便利なオプションも導入されました。コメントの左にあるプラスとマイナスのアイコンで操作します。

WebStorm が WSL で実行中の Docker への接続をサポートするようになりました。 また、新しい Pull Docker image（Docker イメージのプル）インテンション、.dockerignore ファイルと heredoc 構文の完全サポート、Docker コンテキストを使った Docker 接続のセットアップ機能も追加されています。 詳細は、こちらのブログ記事をご覧ください。

分かりにくさを軽減し、リクエストに関する最も重要な情報を一目で把握できるようにレビューリストの UI を改良しました。 この過程では、サポートされているすべてのレビュープラットフォームで一貫した外観を持たせるようにもしました。

WebStorm 2022.3 では、WSL2 ファイルシステムで実行中のプロジェクトで作業するための新しい方法が追加されました。 Windows で完全な IDE を実行する代わりに、WSL2 内で直接 IDE バックエンドを起動できます。 あとは WebStorm でリモート開発を行うのと同じ方法でリモートマシンに接続するだけです。

HTTP クライアントでリクエスト前に実行されるスクリプトブロックを実行できるようになりました。 リクエストを実行する前にデータを生成し、それを変数を使用して最終的なリクエストに含めることができます。 WebStorm には сrypto API も導入されており、HTTP リクエストで md5 または sha1 ハッシュを計算できるようになりました。

HTTP クライアントで URL が長いリクエストの整形オプションが改善されました。 Put query parameters on separate lines（クエリパラメーターを別々の行に配置）インテンションアクションを使用してクエリを小さなフラグメントに分解し、それを別々の行に配置することも可能です。 HTTP リクエストの整形に関する設定は、Preferences（環境設定）/ Settings（設定）| Editor（エディター）| Code Style（コードスタイル）| HTTP Request（HTTP リクエスト）| Wrapping and Braces（折り返しと波括弧）で行います。