WebStorm 2020.1の新機能

外観と使い心地

エディタの新しくなったデフォルトのフォント

この 1 年間、当社は、目を酷使せずにより快適にコーディングができるフォントの開発に取り組んできました。コーディング専用に新しく開発されたオープンソースの書体 JetBrains Mono を紹介いたします！ WebStorm 2020.1 では、この新しい書体がデフォルトで選択されています。

集中を維持できるコーディング

コーディングに完全に集中することを支援する Zen 表示モードを新たに追加しました。エディタの全画面表示でソースコードソースを中心に置き、集中力を削ぐ UI 要素を非表示にした状態で作業を行いたいときに使用してください。

カーソルを合わせてドキュメンテーションを表示

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

IDE を使ってちょっとした編集を行う

ファイルのちょっとした編集にもIDEを利用したいと思ったことはありませんか？新しい LightEdit モードを使用すれば、プロジェクト全体を読み込まずに、テキストエディタウィンドウに個別のファイルだけを開くことができます。

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

ステータスバーを表示してはいるが、使用頻度は低いという場合は、そこに表示する内容を指定できるようになりました。ステータスバーを右クリックし、不要な要素を削除します。

フレームワーク

Composition API の活用

WebStorm 2020.1 では、Vue 3 の Composition API により定義されているコンポーネントがサポートされています。コンポーネントのテンプレートセクションで、IDE はコンポーネントの setup() 関数が返すシンボルを適切に解決および自動補完し、これにはリアクティブ状態のプロパティ、計算済みのプロパティ、および参照が含まれます。

Vuex 対応のコーディング支援

Vuex ライブラリを使用する場合、Vue コンポーネントを編集するときに Vuex ストアのシンボルに対する コード補完の提案 が表示されるようになりました。加えて、WebStorm では getter、mutations、および actions の定義にジャンプできます。

Angular 9 をフルサポート

IvyおよびAngular 9のその他の機能を上手に活用していただくために、WebStorm 2020.1ではフルサポートを追加しました。 TypeScriptのコード補完や自動インポートといった機能のほか、未構成のテンプレートファイルも利用できます。

改善された React のサポート

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

JavaScriptとTypeScript

新しいスマートなインテンションとインスペクション

新しいスマートなインテンションとインスペクション (Alt+Enter) を活用すれば、コーディング作業中に時間を節約できます！例えば、JavaScript と TypeScript の最新バージョンに導入された構文である、optional chaining および / または nullish coalescing (null合体演算子) に既存のコードを素早く変換します。

さらに役に立つクイックドキュメンテーション

JavaScript と TypeScript では、Documentationポップアップにシンボルの型と可視性に関する詳細やそのシンボルが定義されている場所など、役に立つ情報がさらに表示されるようになりました。

Introduce Field のリファクタリングに使う UI の改良

更新された Introduce Field リファクタリングを使用すれば、作業中のコードのコンテキスト内で変更内容のプレビューを見ることができます。また、リファクタリングは以前よりも少ないステップで適用できるようになりました。

TypeScript 3.8 の機能に対するサポート

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

ツール

Prettier を保存時に実行

新機能の Run on save for files オプションを使用すると、WebStorm は IDE で指定されたファイルやプロジェクトで編集されたファイルが保存されると同時に、それらすべてのファイルに対して Prettier のフォーマットを適用します。これにより File Watchers やサードパーティのプラグインは不要になりました。

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

埋め込みターミナルエミュレータを使った作業をしやすくするために、WebStorm ではターミナルセッションを上下および左右に分割できるようになりました。現在使用中の複数のツールの出力をタブを切り替えずに把握できます。

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

2020.1バージョン以降、WebStorm にはインテリジェントなスペル、文法、スタイルのチェックツール Grazie がバンドルされます。これは、コメント、コミットメッセージ、JavaScript 言語の構文を追加するときに文法ミスを避けるのに役立ちます。

柔軟性がアップした実行構成の共有

プロジェクトでコラボレーションする必要があるチームメイトがいますか？実行構成をチームメイトと共有できます。 WebStorm 2020.1 では、実行構成を任意のどのプロジェクトフォルダーにでも保管できるようになったため、共有の自由度がアップしています。

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

元々WebStorm 2019.3に導入されていたYarn 2のサポートの対象範囲を拡大しました。これにより、TypeScriptプロジェクトではPlug’n’PlayモードでYarn 2を使って依存関係をインストールするときに、すべてのシンボルが適切に解決され、自動補完できるようになりました。

バージョン管理

コミットのリベース用に改良されたダイアログ

コミット履歴をより線形に近づけ、かつ包括的にしたいですか？これは、最新の対話性が改善されたコミットのリベース用ダイアログを使えば簡単にできるようになりました。各コミットに適用できるアクションが表示され、コミットの詳細と diff をレビューできるほか、適用された変更内容をすばやくリセットできます。

コミットフローの変更内容

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