WebStorm の新機能

WebStorm 2020.1の新機能

WebStorm 2020.1には、より洗練されたルックアンドフィール、VuexおよびVueコンポジションAPIのサポート、保存時にPrettierを実行するためのオプション、JavaScriptおよびTypeScriptのいくつかの改善が含まれています。

ルックアンドフィール

JetBrains Mono

新しいデフォルトのエディターフォント

この1年間、目を疲れさせずに、より快適コーディングできるフォントを開発してきました。コーディング専用に作られた新しいオープンソースの書体であるJetBrains Monoを歓迎します! WebStorm 2020.1は、この新しい書体がデフォルトで選択された状態で提供されます。

Zen mode for focused coding

集中コーディング

新しいZen(英語)表示モードを追加して、コードに完全に集中できるようにしました。ソースコードを中央に配置し、UI要素を非表示にして邪魔を最小限に抑える全画面エディターで作業したい場合はいつでも使用してください。

Quick documentation on hover

ホバーに関するドキュメントの表示

ドキュメントポップアップを明示的に呼び出す必要はもうありません。シンボルにカーソルを合わせると表示されるため、関連するドキュメントをすばやく見つけることができます。コードに問題がある場合、ポップアップはそれを解決するために適用できるクイックフィックスも提供します。

IDEを使用してすばやく編集する

IDEを使用してファイルをすばやく編集したいと思ったことはありませんか?新しいLightEdit(英語)モードでは、プロジェクト全体をロードしなくても、テキストエディターウィンドウで個々のファイル開くことができます。

ステータスバーのカスタマイズ

ステータスバーを非表示にせず、頻繁に使用する場合は、何を表示するかを正確に決定できます。ステータスバーと不要な要素を削除するを右クリックします。

フレームワーク

Vue Composition API code completion

コンポジションAPIの操作

WebStorm 2020.1では、Vue 3のコンポジションAPIを使用して定義されたコンポーネントのサポートが見つかります。コンポーネントのテンプレートセクションでは、IDEはコンポーネントの setup() 関数から返されたシンボルを適切に解決して自動補完します。状態、計算されたプロパティ、および参照。

Vuex code completion

Vuexのコーディング支援

Vuexライブラリを使用している場合は、Vueコンポーネントを編集するときに、Vuexストアからシンボルの補完候補を取得できます。さらに、WebStormを使用すると、getter、ミューテーション、アクションの定義ジャンプできます。

Angular 9の完全サポート

Ivyおよびその他のAngular 9機能での作業を支援する(英語)ために、WebStorm 2020.1でそれらの完全サポート(英語)を追加しました。コード補完のような機能やTypeScriptの自動インポート、テンプレートファイルを設定なしで使用できます。

改善されたReactサポート

コンポーネントにキャレットを配置して Alt+Enterを押すことにより、React.memo を介して定義されたコンポーネントのインポートステートメントを追加します。また、プロジェクトでMaterial-UIコンポーネントを使用している場合は、スタイルを作成するときに補完候補が表示されます。

JavaScript & TypeScript

新しいスマートインテンションおよびインスペクション

新しいスマートインテンションおよびインスペクション(Alt+Enter)を使用して、コーディング時の時間節約してください !例:既存のコードをオプションのチェーンやnull合体にすばやく変換します。この構文は、JavaScriptとTypeScriptの最新バージョンで導入されました。

TypeScript documentation on hover

より役立つクイックドキュメント

JavaScriptおよびTypeScriptの場合、ドキュメントポップアップに、シンボルのタイプと可視性、およびそのシンボルが定義されている場所の詳細など、より役立つ情報が表示されるようになりました。

フィールドの導入リファクタリングのUIを作り直しました

更新されたフィールドの導入リファクタリングを使用すると、使用しているコードのコンテキストで変更のプレビューを確認できます。さらに、リファクタリングを適用するためにクリック数が少なくなりました。

TypeScript 3.8機能のサポート

WebStorm 2020.1にはTypeScript 3.8がバンドルされており、型のみのインポート/エクスポート、プライベートフィールド、トップレベルの awaitなどの新しいTypeScript 3.8機能の完全サポートが導入されています。

ツール

Running Prettier on save

保存時にPrettierを実行する

新しいファイルの保存時に実行オプションを使用すると、WebStormはIDE設定で指定され、プロジェクトで編集されたすべてのファイルにPrettierフォーマットを適用します。これには、ファイル監視またはサードパーティのプラグインは必要ありません。

Split terminal sessions

ターミナルセッションを並べて表示する

組み込みのターミナルエミュレータを使いやすくするために、WebStormではターミナルセッションを縦と横に分割できるようになりました。タブを切り替えずに、現在使用中の複数のツールの出力を確認できます。

Bundled spell checker

バンドルされたスペルチェッカー

v2020.1から、WebStormにはGrazie(英語)がバンドルされます。Grazieは、インテリジェントなスペル、文法、およびスタイルチェックツールです。これは、コメント、コミットメッセージ、およびJavaScript言語構成を追加するときの文法の誤り回避できます。

より柔軟な実行構成の共有

プロジェクトで作業する必要があるチームメートがいますか?それらと実行構成を共有します。WebStorm 2020.1を使用すると、実行構成を任意のプロジェクトフォルダーに保存できるようになるため、さらに自由度が増します。

TypeScriptプロジェクトでYarn 2を使用する

WebStorm 2019.3で導入された初期Yarn 2サポートを拡張しました。現在、すべてのシンボルは適切に解決され、Yarn 2をプラグアンドプレイモードで使用して依存関係をインストールすると、TypeScriptプロジェクトで自動補完できます。

バージョン管理

Reworked dialog for rebasing commits

コミットをリベースするためのダイアログの作り直し

コミット履歴をより直線的でわかりやすいものにしたいですか?更新された、より対話的なリベースするコミット(英語)ダイアログのおかげで、これはずっと簡単になりました。各コミットに適用できるアクションが表示され、コミットの詳細と差分を確認したり、適用された変更をすばやくリセット(英語)したりできます。

Commit tool window

コミットフローの変更

コミットフローを合理化するために、すべてのコミット関連タスクを処理する新しいコミットツールウィンドウを開発しました。新規インストールではデフォルトで有効になっています。既存のユーザーの場合は、モーダルコミットダイアログにプロンプトが表示され、新しいUIにすばやく切り替えることができます。