WebStorm の新機能 
WebStorm の新機能 さらに洗練されたルックアンドフィール、Tailwind CSS サポート、改善されたデバッグエクスペリエンス、Git ステージングサポート、新しいナビゲーション機能などがあります。
ウェルカム画面を更新しました ! そこからプロジェクトを開いて作成できるだけでなく、IDE のテーマやフォントなど、最も一般的に使用される設定を微調整することもできます。
これで、WebStorm テーマを macOS および Windows の設定と同期できます。環境設定 / 設定 | 外観 & 振る舞い | 外観 | テーマに移動し、そこで OS と同期オプションを選択するだけです。OS と同期の横にある歯車のアイコンをクリックして、お推奨するテーマを選択します。Linux ユーザーにもこれを実装する予定です。
v2020.3 により、タブの操作がより便利になりました。タブをドラッグアンドドロップするか、新しい右に分割して開く(英語)アクションを使用して、エディターを分割できるようになりました。さらに、固定されたタブは特別なアイコンでマークされ、タブバーの先頭に表示されるため、すばやく見つけることができます。
WebStorm には、ライブラリと読み取り専用ファイルを読みやすくする新しいモードがあります。コメントをレンダリングするために、それを入力し、フォントの合字を使用可能にし、より多く(英語)の。
一度に複数のファイルを作成するカスタムファイルテンプレート(英語)を追加する機能を実装しました。これは、たとえば、.js ファイルをそのテストファイルと一緒に追加する必要がある場合に便利です。
WebStorm で特定のファイルタイプをデフォルトで開くようにするは簡単です。環境設定 / 設定 | エディター | ファイルタイプに移動し、ファイルタイプを WebStorm に関連付けるボタンをクリックします。
WebStorm は、TailwindCSS をより生産的に使用できるようになりました。Tailwind クラスを自動補完し、マウスオーバーで結果の CSS のプレビューを表示し、tailwind.config.js ファイルを使用して行ったカスタマイズをサポートします。
コードに未解決の React コンポーネントがありますか？ キャレットをその場所に置き、Alt+Enter を押して、リストからクラス / 関数コンポーネントを作成するを選択します。WebStorm は、関連するコード構成を作成します。
Mermaid.js のサポート、.md ファイルを再フォーマットする機能、およびエディターと一緒にプレビューペインを自動スクロールする機能–これらの変更やその他の変更により、WebStorm での Markdown ファイルのエクスペリエンスが大幅に向上します。
複数の webpack 構成のサポートの追加を開始しました。環境設定 / 設定 | 言語 & フレームワーク | JavaScript | Webpack に移動して、構成ファイルを手動で検出するか自動で検出するかを選択します。
Vue 3 に関連するいくつかの問題を修正しました。例: WebStorm はスクリプトセットアップ構文をサポートするようになりました。また、IDE が Vue プロジェクトで ESLint コードスタイルルールを正しく適用するようにし、TypeScript 言語サービスとの統合を改善しました。
WebStorm は、npm と yarn に加えて、pnpm パッケージマネージャーを完全にサポートするようになりました。昨年、pnpm サポートの改善を徐々に実装してきました。v2020.3 では、最後の仕上げを行いました。
TypeScript 言語サービスを問題ツールウィンドウに統合し、TypeScript ツールウィンドウを削除しました。この変更は、コード内の問題を 1 か所から簡単に確認できるようにするために行われました。また、TypeScript ツールウィンドウ内で以前に使用可能だったアクションを、ステータスバーの専用ウィジェットに移動しました。
v2020.3 以降、WebStorm は、JavaScript を含む複数行の CSS および HTML ブロックのコードフォーマットを適切にサポートします。これらのより複雑なテンプレートリテラルを追加したり、コードを再フォーマットしたりすると、IDE は正しくインデントします。
デバッグするときは、対話的なヒントとインラインウォッチを使用してください。ヒントをクリックして、変数に属するすべてのフィールドを表示できるようになりました。さらに、ヒントから変数値を変更したり、ウォッチ式を追加したりできます。
WebStorm 2020.3 は、共同開発とペアプログラミングのための新しいツールである Code With Me (EAP)(英語) をサポートしています。このツールを使用すると、プロジェクトを他のユーザーと共有できるため、リアルタイムで一緒に作業できます。Code With Me を試すには、対応するプラグインを環境設定 / 設定 | プラグインからインストールします。
WebStorm の主な機能に慣れるために、対話的なトレーニングコースを開発しました。このコースは、コードのリファクタリングやプロジェクトのナビゲートなど、いくつかの一般的なタスクの実行方法を学ぶのに役立ちます。ウェルカム画面の WebStorm を学ぶタブにあるか、メインメニューからヘルプ | IDE 機能トレーナーに移動して見つけることができます。
HTTP リクエストエディターで Alt+Enter を押し、cURL に変換し、クリップボードにコピーオプションを選択することで、HTTP リクエストを cURL にエクスポートできるようになりました。
文法とスペルの問題にすばやく対処できるようになりました。問題にカーソルを合わせると、説明と推奨される修正を含むポップアップが表示されます。また、より多くの言語のサポートを追加し、文法チェックの品質を向上させました。
これで、WebStorm から直接ファイルをステージングできます。これを行うには、環境設定 / 設定 | バージョン管理 | Git に移動し、ステージングエリアを有効化オプションを選択します。コミットツールウィンドウから、およびガターから、差分を表示機能を使用して、変更(英語)をステージングする(英語)ことができます。
メインメニューの VCS グループは、使用しているバージョン管理システムにちなんで名付けられました。また、メインメニューの Git にある項目を再配置して、最も一般的な操作に簡単にアクセスできるようにしました。
WebStorm は、新しいブランチの名前に含まれる受け入れられない記号を自動的に修正するようになりました。また、他のブランチの場合と同様に、現在選択されているブランチで使用可能なすべてのアクションも表示されます(英語)。
プロジェクトビューの迅速な代替手段を提供するナビゲーションバーを使用すると、プロジェクトの構造を簡単に確認して、特定のファイルを開くことができます。v2020.3 では、JavaScript ファイルと TypeScript ファイルの特定のコード要素にジャンプすることもできます。
プロジェクトビューでファイルを選択すると、最終的にエディターでファイルをプレビューできます。この機能をオンにするには、プロジェクトビューの歯車アイコンをクリックして、プレビュータブの有効化とシングルクリックでファイルを開くの両方を選択します。
Shift+Shift ポップアップにより、さらに多くのことができるようになります。まず、これを使用して基本的な計算を行うことができます。結果はポップアップに表示されます。また、ブランチとコミットに関する詳細を含む Git データを検索することもできます。さらに、すべての調査結果は、タイプではなく検索クエリとの関連性に基づいてグループ化されるようになりました。