WebStorm 2020.2の新機能

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

Prettier をデフォルトフォーマッターとして使用

組み込みのフォーマッターの代わりに Prettier を使用してコードを整形したいですか？このアップデートでは、以前よりもはるかに簡単にそれを実現できるようになりました。 新しい On code reformat チェックボックスをオンにするだけで、IDE が .js / .ts / .jsx / .tsx ファイルの整形に Prettier を使用するようになります。その他のファイルタイプも簡単に追加できます。

Nuxt.js のサポート

WebStorm を使って、Nuxt.js の作業をより生産的にしましょう！テンプレートセクションと nuxt.config.js ファイル内でのコーディング支援機能を使用したり、基本的な Nuxt コンポーネントのクイックドキュメントで確認したり、Nuxt プロジェクトで Vuex ストアのサポートを受けたりできます。

Vue 固有のコードスタイルをすばやく設定

Vue 固有のコードスタイル設定を使えば、コンテンツをインデントする最上位タグや、インデントを Vue ファイル全体で揃えるか、言語設定に従うべきかを決めることができます。また、Vue コード内の埋め込み変数の整形方法を変更できるようになりました。

WSL 2 にインストールされた Git のサポート

私たちは、必要なすべての WSL 関連ワークフローのサポートを IDE に追加し続けています。 WSL からプロジェクトを開くと、IDE が自動的に WSL 上の Git に切り替え、関連するすべての機能を使用できるようになりました。

TypeScript プロジェクトでの Vue 関連の変更

TypeScript 言語サービスによる .vue ファイルの処理方法を改善しました。今後は .ts ファイルや .tsx ファイルと同様に処理されます。他の Vue ファイルや TypeScript ファイルの中で Vue ファイルをインポートしても、もう問題が発生することはありません。

JavaScript と TypeScript

新しいインテンションで時間を節約

新しいスマートなインテンション（Alt+Enter）を使用すると、オプショナルチェーンと null 合体演算子およびループ関連の一部のアクションをより高速に実行できます。例えば、数字インデックスを使った for ループを forEach 配列メソッドにすばやく変換できます。

JSDoc コメントをエディターに直接表示

JSDoc コメントを読む際はすべてのタグを確認する必要があるため、非常に苦労することがあります。この作業を楽にするため、コメントをエディター内に直接表示して余計な煩わしさを解消できるようにしました。

ツールウィンドウからのデバッグ開始

WebStorm の Run および Terminal ツールウィンドウからデバッグセッションを開始できるようになりました。例えば、 npm start のようなスクリプトを実行する場合、Ctrl+Shift を押したままこのスクリプトの出力にある http リンクをクリックすると、IDE が JavaScript のデバッグセッションを開始します。

デバッグ時の項目プレビューの改善

デバッグを行う際、ビルトインコンソールの項目プレビューにいくつかの機能強化が導入されていることに気づくでしょう。これらの機能強化により、オブジェクトを展開しなくてもより有益な関連情報を取得できます。

HTML とスタイルシート

@use および @forward ルールのサポートを強化

昨年、私たちは Sass および SCSS で使用される @use ルールと @forward ルールのサポートを開始しました。今回はこのサポートを拡張しているため、WebStorm の補完機能が強化され、インポートされたシンボルの解決処理が改善されていることを期待できます。

WebP 画像を IDE 内でプレビュー

バージョン 2020.2 以降、.jpeg または .png ファイルと同様に、WebStorm で直接 .webp 画像をプレビューできるようになりました。これまで WebStorm は .webp 画像フォーマットを認識できなかったため、このような画像を確認する際には常に別のアプリケーションに切り替える必要がありました。

バージョン管理

GitHub プルリクエストの完全サポート

WebStorm 2020.2 では GitHub プルリクエストのサポートを拡張し、さらに扱いやすくしました。今後は IDE を離れることなく、すべてのプルリクエストを確認してマージしたり、コードをレビューしたりできます。

Git 操作ダイアログの再設計

WebStorm 2020.2 では、マージ / プル / リベース操作用のダイアログの視認性を向上させています。また、Pull ダイアログの –rebase や Merge ダイアログの –no-verify などの新しいオプションをいくつか追加しています。

ログからローカルコミットを squash

Git ツールウィンドウの Log タブで多数のローカルコミットを選択し、それらを squash で 1 つにまとめることができます。このアクションは右クリックで呼び出せるコンテキストメニューから利用できます。

コード編集

コード内の問題の識別がより簡単に

新しい Inspections ウィジェットと Problems ツールウィンドウでは、現在ファイル警告、エラー、その他の問題の数に関する詳細情報を取得できます。

選択範囲の各行の末尾にキャレットを追加

複数キャレットを操作する新しいアクション（Alt+Shift+G）を使用すると、選択範囲の各行の末尾にキャレットをすばやく配置し、すべてのキャレットが追加された時点で選択範囲を解除できます。