WebStorm 2020.3 の新機能

外観と操作性

新しいウェルカム画面

ウェルカム画面を更新しました！新しいウェルカム画面からはプロジェクトを開いたり作成したりできるだけでなく、IDE のテーマやフォントなどの使用頻度の高い設定を微調整できるようになりました。

IDE のテーマを OS の設定に同期

WebStorm のテーマを macOS と Windows の設定と同期できるようになりました。 Preferences / Settings | Appearance & Behavior | Appearance | Theme に移動し、Sync with OS（OS と同期）オプションを選択するだけでこの機能を有効にできます。お好みのテーマを選択するには、Sync with OS の隣にある歯車アイコンをクリックします。この機能は Linux ユーザー向けにも実装する予定です。

タブの操作を改善

バージョン 2020.3 では、タブの操作がより便利になっています。 タブをドラッグアンドドロップするか、新しい Open in Right Split（右に分割して開く）アクションを使用してエディターを分割できるようになりました。さらに、ピン留めしたタブをすばやく見つけられるようにするため、専用のアイコンを付けてタブバーの先頭に表示するようにしました。

リーダーモード

WebStorm には、ライブラリと読み取り専用ファイルの可読性を向上させる新しいモードが搭載されています。コメントを表示したり、フォントの合字を有効化したりするには、このモードを有効にしてください。詳細はこちらを参照してください。

複数ファイルのテンプレート

複数ファイルをまとめて作成するカスタムファイルテンプレートを追加する機能を実装しました。この機能は、.js ファイルと共に対応するテストファイルを追加する場合などに便利です。

WebStorm で開くファイル

WebStorm で特定のファイルタイプをデフォルトで開くのが簡単になりました。そのためには Preferences / Settings | Editor | File Types に移動し、Associate File Types with WebStorm（ファイルタイプと WebStorm の関連付け）ボタンをクリックしてください。

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

Tailwind CSS のサポート

WebStorm は Tailwind CSS を使用した作業の生産性を向上させます。 Tailwind のクラスを自動補完し、マウスオーバーで最終的な CSS のプレビューを表示し、tailwind.config.js ファイルを使用したカスタマイズを支援します。

使用箇所から React コンポーネントを作成

コード内に未解決の React コンポーネントがありますか？そのコンポーネントの位置にキャレットを置き、Alt+Enter を押してから Create class / function component（クラス/関数コンポーネントの作成）をリストから選択すると、WebStorm が適切なコード構成を作成します。

Markdown の編集とプレビューの改善

Mermaid.js のサポート、.md ファイルを再フォーマットする機能、エディターに合わせたプレビューペインの自動スクロールやその他の変更により、WebStorm での Markdown ファイルの操作が大幅に改善されています。

複雑な webpack 構成の基本的なサポート

複数の webpack 構成のサポートを開始しました。 Preferences / Settings | Languages & Frameworks | JavaScript | Webpack に移動し、手動または自動のどちらで構成ファイルを検出するかを選択してください。

Vue.js 向けの機能強化

Vue 3 に関する多くの問題を解決しました。例えば、WebStorm が script setup 構文をサポートするようになりました。また、IDE が Vue プロジェクトで ESLint のコードスタイルルールを正しく適用するようにし、TypeScript 言語サービスとの連携機能を改善しました。

pnpm のフルサポート

WebStorm が npm と yarn に加えて pnpm パッケージマネージャーを完全サポートするようになりました。私たちは過去 1 年間で pnpm のサポートを徐々に改善してきました。バージョン 2020.3 では最後の仕上げを行っています。

JavaScript と TypeScript

TypeScript および Problems ツールウィンドウの統合

TypeScript 言語サービスを Problems ツールウィンドウに統合し、TypeScript ツールウィンドウを廃止しました。この変更は、コード内の問題箇所を一箇所でレビューしやすくするために行われました。また、これまで TypeScript ツールウィンドウにあったアクションをステータスバーの専用ウィジェットに移動しました。

CSS と HTML を含むテンプレートリテラルのフォーマットを改善

バージョン 2020.3 以降のWebStorm は、JavaScript を含む複数行の CSS と HTML ブロックのコードフォーマットを適切にサポートします。 IDE はこのような複雑度の高いテンプレートリテラルを追加する際や、コードを再フォーマットする際に適切なインデントを行います。

デバッガーの機能改善

デバッグ時に対話型ヒントとインラインウォッチを使用できます。ヒントをクリックし、変数に属するすべてのフィールドを表示できるようになりました。また、ヒントから直接変数値を変更し、ウォッチ式を追加できます。

ツール

共同開発ツールのサポート

WebStorm 2020.3 は共同開発およびペアプログラミング用の新しいツールである Code With Me（EAP）をサポートしています。このツールを使用すると、プロジェクトを他のユーザーと共有し、リアルタイムで共同作業を行うことができます。 Code With Me を試すには、該当するプラグインを Preferences / Settings | Plugins からインストールしてください。

WebStorm の基本に関する組み込みのトレーニングコース

WebStorm の主な機能に慣れていただくため、対話型のトレーニングコースを開発しました。このコースは、コードのリファクタリングやプロジェクト内の移動などの一般的なタスクの習得に役立ちます。このコースは Welcome 画面の Learn WebStorm タブの配下か、メインメニューから Help | IDE Features Trainer にアクセスすると見つかります。

HTTP クライアントでの cURL 変換

HTTP リクエストエディターで Alt+Enter を押し、Convert to cURL and copy to clipboard（cURL に変換し、クリップボードにコピー）オプションを選択すると HTTP リクエストを cURL にエクスポートできるようになりました。

スペルおよび文法チェックの改善

より迅速に文法とスペルの問題に対処できるようになりました。問題箇所にマウスを移動すると、ポップアップが開き、説明と修正案が表示されます。また、より多くの言語へのサポートを追加し、文法チェックの品質を改善しました。

バージョン管理

Git ステージングエリアのサポート

WebStorm から直接ファイルをステージできるようになりました。そのためには Preferences / Settings | Version Control | Git に移動し、Enable staging area（ステージングエリアを有効化）オプションを選択してください。変更のステージは Commit ツールウィンドウからだけでなく、ガターからや Show Diff 機能を使用しても実行できます。

VCS メニューの再配置

メインメニュー以下の VCS グループの名前が、使用中のバージョン管理システムに応じて付けられるようになりました。また、メインメニューの Git 配下の項目も再配置し、最も一般的な操作へのアクセスを改善しました。

ブランチ操作の改善

WebStorm が新しいブランチの名前で許可されていない文字を自動的に訂正するようになりました。また、他のブランチの場合と同じように、現在選択中のブランチで使用できるすべてのアクションが表示されます。

Project ビューの簡易版である Navigation バーを使用すると、簡単にプロジェクトの構造内を移動し、特定のファイルを開くことができます。また、バージョン 2020.3 では JavaScript および TypeScript ファイル内の特定のコード要素に移動できるようになりました。

簡易ファイルプレビュー

ついに、Project ビューでファイルをエディター内で選択してプレビューできるようになりました。この機能を有効にするには、Project ビューの歯車アイコンをクリックして Enable Preview Tab （プレビュータブの有効化）と Open Files with Single Click（シングルクリックでファイルを開く）の両方を選択します。

Search Everywhere（どこでも検索）機能の強化

Shift+Shift ポップアップの機能がさらに強化されました。第一に、基本的な計算を実行できるようになりました。計算結果はポップアップに直接表示されます。また、ブランチとコミットに関する情報を含む Git のデータを検索できます。さらに、すべての検索結果が種類ではなく、検索クエリとの関連性に基づいてグループ化されるようになりました。