WebStorm の新機能

WebStorm 2020.3 の新機能

さらに洗練されたルックアンドフィール、Tailwind CSS サポート、改善されたデバッグエクスペリエンス、Git ステージングサポート、新しいナビゲーション機能などがあります。

ルックアンドフィール

New Welcome screen

新しいウェルカム画面

ウェルカム画面を更新しました ! そこからプロジェクトを開いて作成できるだけでなく、IDE のテーマやフォントなど、最も一般的に使用される設定を微調整することもできます。

IDE theme synced with OS settings

OS 設定と同期された IDE テーマ

これで、WebStorm テーマを macOS および Windows の設定と同期できます。環境設定 / 設定 | 外観 & 振る舞い | 外観 | テーマに移動し、そこで OS と同期オプションを選択するだけです。OS と同期の横にある歯車のアイコンをクリックして、お推奨するテーマを選択します。Linux ユーザーにもこれを実装する予定です。

Improved work with tabs

タブを使用した作業の改善

v2020.3 により、タブの操作がより便利になりました。タブをドラッグアンドドロップするか、新しい右に分割して開く(英語)アクションを使用して、エディターを分割できるようになりました。さらに、固定されたタブは特別なアイコンでマークされ、タブバーの先頭に表示されるため、すばやく見つけることができます。

リーダーモード

WebStorm には、ライブラリと読み取り専用ファイルを読みやすくする新しいモードがあります。コメントをレンダリングするために、それを入力し、フォントの合字を使用可能にし、より多く(英語)の。

マルチファイルテンプレート

一度に複数のファイル作成するカスタムファイルテンプレート(英語)を追加する機能を実装しました。これは、たとえば、.js ファイルをそのテストファイルと一緒に追加する必要がある場合に便利です。

WebStorm で開いたファイル

WebStorm で特定のファイルタイプをデフォルトで開くようにするは簡単です。環境設定 / 設定 | エディター | ファイルタイプに移動し、ファイルタイプを WebStorm に関連付けるボタンをクリックします。

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

Support for Tailwind CSS

TailwindCSS のサポート

WebStorm は、TailwindCSS をより生産的に使用できるようになりました。Tailwind クラスを自動補完し、マウスオーバーで結果の CSS のプレビューを表示し、tailwind.config.js ファイルを使用して行ったカスタマイズをサポートします。

Create React components from usages

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

コードに未解決の React コンポーネントがありますか? キャレットをその場所に置き、Alt+Enter を押して、リストからクラス / 関数コンポーネントを作成するを選択します。WebStorm は、関連するコード構成を作成します

Markdown editing and preview improvements

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

Mermaid.js のサポート、.md ファイルを再フォーマットする機能、およびエディターと一緒にプレビューペインを自動スクロールする機能–これらの変更やその他の変更により、WebStorm での Markdown ファイルのエクスペリエンス大幅に向上します

複雑な webpack セットアップの基本サポート

複数の webpack 構成のサポートの追加を開始しました。環境設定 / 設定 | 言語 & フレームワーク | JavaScript | Webpack に移動して、構成ファイルを手動で検出するか自動で検出するかを選択します。

Vue.js の機能強化

Vue 3 に関連するいくつかの問題修正しました。例: WebStorm はスクリプトセットアップ構文をサポートするようになりました。また、IDE が Vue プロジェクトで ESLint コードスタイルルールを正しく適用するようにし、TypeScript 言語サービスとの統合を改善しました。

pnpm の完全サポート

WebStorm は、npm と yarn に加えて、pnpm パッケージマネージャーを完全にサポートするようになりました。昨年、pnpm サポートの改善を徐々に実装してきました。v2020.3 では、最後の仕上げを行いました。

JavaScript & TypeScript

Integrated TypeScript and Problems tool windows

統合された TypeScript および問題ツールウィンドウ

TypeScript 言語サービスを問題ツールウィンドウに統合し、TypeScript ツールウィンドウを削除しました。この変更は、コード内の問題を 1 か所から簡単に確認できるようにするために行われました。また、TypeScript ツールウィンドウ内で以前に使用可能だったアクションを、ステータスバーの専用ウィジェットに移動しました。

Better formatting for template literals with CSS and HTML

CSS と HTML を使用したテンプレートリテラルのフォーマットの改善

v2020.3 以降、WebStorm は、JavaScript を含む複数行の CSS および HTML ブロックのコードフォーマットを適切にサポートします。これらのより複雑なテンプレートリテラルを追加したり、コードを再フォーマットしたりすると、IDE は正しくインデントします。

Improved debugging experience

デバッグエクスペリエンスの向上

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

ツール

Support for our collaborative development tool

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

WebStorm 2020.3 は、共同開発とペアプログラミングのための新しいツールである Code With Me (EAP)(英語) をサポートしています。このツールを使用すると、プロジェクトを他のユーザーと共有できるため、リアルタイムで一緒に作業できます。Code With Me を試すには、対応するプラグインを環境設定 / 設定 | プラグインからインストールします。

Built-in training course on WebStorm basics

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

WebStorm の主な機能に慣れるために、対話的なトレーニングコースを開発しました。このコースは、コードのリファクタリングやプロジェクトのナビゲートなど、いくつかの一般的なタスクの実行方法を学ぶのに役立ちます。ウェルカム画面の WebStorm を学ぶタブにあるか、メインメニューからヘルプ | IDE 機能トレーナーに移動して見つけることができます。

cURL conversion in the HTTP client

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

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

Better spelling and grammar checking

より良いスペルと文法チェック

文法とスペルの問題にすばやく対処できるようになりました。問題にカーソルを合わせると、説明と推奨される修正を含むポップアップが表示されます。また、より多くの言語のサポートを追加し、文法チェックの品質を向上させました。

バージョン管理

Support for Git staging area

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

これで、WebStorm から直接ファイルをステージングできます。これを行うには、環境設定 / 設定 | バージョン管理 | Git に移動し、ステージングエリアを有効化オプションを選択します。コミットツールウィンドウから、およびガターから、差分を表示機能を使用して、変更(英語)ステージングする(英語)ことができます。

再配置された VCS メニュー

メインメニューの VCS グループは、使用しているバージョン管理システムにちなんで名付けられました。また、メインメニューの Git にある項目を再配置して、最も一般的な操作に簡単にアクセスできるようにしました。

ブランチでの改善された作業

WebStorm は、新しいブランチの名前に含まれる受け入れられない記号自動的に修正するようになりました。また、他のブランチの場合と同様に、現在選択されているブランチで使用可能なすべてのアクションも表示されます(英語)

ナビゲーション

More helpful Navigation bar

より便利なナビゲーションバー

プロジェクトビューの迅速な代替手段を提供するナビゲーションバーを使用すると、プロジェクトの構造を簡単に確認して、特定のファイルを開くことができます。v2020.3 では、JavaScript ファイルと TypeScript ファイルの特定のコード要素ジャンプすることもできます。

Quick file preview

クイックファイルプレビュー

プロジェクトビューでファイルを選択すると、最終的にエディターでファイルをプレビューできます。この機能をオンにするには、プロジェクトビューの歯車アイコンをクリックして、プレビュータブの有効化シングルクリックでファイルを開くの両方を選択します。

More powerful Search Everywhere

どこでもより強力な検索

Shift+Shift ポップアップにより、さらに多くのことができるようになります。まず、これを使用して基本的な計算行うことができます。結果はポップアップに表示されます。また、ブランチとコミットに関する詳細を含む Git データ検索することもできます。さらに、すべての調査結果は、タイプではなく検索クエリとの関連性基づいてグループ化されるようになりました。