WebStorm 2019.1の新機能

JavaScript と TypeScript

JavaScriptの分割代入を利用可能に

分割機能を利用すると、とても簡潔な構文を利用して、配列やオブジェクトから変数を分割し、変数に代入することができます。WebStormの新しいリファクタリング機能と空気を読む (Alt-Enter) 機能を利用することで JavaScript や TypeScript のコードに分割代入を容易に導入できます。

Using JavaScript destructuring

Promiseを持つ関数をasync/awaitに変換

.then() や.catch() 呼び出しをしている Promise を返す関数を、 async/await 構文を利用する async 関数に自動的に変更できるようになりました。関数名上で Alt-Enter を押し Convert to async function を選択してください。この機能は TypeScript ファイルだけではなく JavaScript や Flow でもご利用いただけます。

フレームワーク

Angularアプリ用の新しいインスペクションに対応

Angular アプリケーション用に WebStorm は17つの新しいインスペクションを追加しました。入力時にアプリ内の Angular 特有のエラーに気が付くことができ、さらにクイックフィックスを提案してくれます。これらのインスペクションは TypeScript でもテンプレートでも動作し、バインディングやディレクティブ、コンポーネントなど、そのほかにも多くの用途についてチェックしてくれます。

Angular プロジェクトでナビゲーションがより簡単に

Angular アプリケーションにおいて 関連するシンボルを利用できるようになりました。ポップアップ (Ctrl-Cmd-Up / Ctrl+Alt+Home) によって TypeScript やテンプレート、スタイルやテストファイルのような異なるコンポーネントファイルにすばやくジャンプできます。
Easier navigation in Angular projects

VueアプリケーションにおけるTypeScriptサポートを改善

WebStorm は .vue ファイル内の任意の TypeScript コードに対する独自のTypeScript サポートと共に TypeScript 言語サービスを使用するようになりました。より正確なタイプチェックタイプ情報を得ることができます。また、サービスが提供するクイックフィックスを使えるようになります。さらには TypeScript ツールウィンドウにおいて現在のファイル内の TypeScript エラーをすべて参照できるようになりました。Improved support for TypeScript in Vue apps

React hooks のメソッド抽出が可能に

メソッド抽出リファクタリングはローカル関数で機能し、戻り値に分割代入を利用してカスタムの React Hooks 抽出を完全にします。

propsの補完改善

WebStormはスプレッド演算子と組み合わせて使用される React props のコード補完を改善しました。

HTML とスタイルシート

最新ドキュメントの表示

CSS プロパティ、HTML タグや属性のためのドキュメント (F1) には、MDN からのブラウザサポートに関する最新の説明と情報および MDN の全記事へのリンクも表示されるようになりました。
Updated docs and browser compatibility

CSSに関するブラウザ互換性チェックに対応

現在利用している CSS プロパティ全てがターゲットのブラウザバージョンでサポートされていることをチェックできるようになりました。環境設定の Inspactions で新しく追加された Browser compatibility を有効にしてください。

CSS Module でキャメルケースに対応

プロジェクトで CSS Module を利用する場合、JavaScript ファイル内のクラスのコード補完では、ダッシュ付きのクラス名のキャメルケースバージョンを提案するようになりました。

CSS 変数の抽出

新しい CSS 変数の抽出リファクタリングでは var(--var-name) 構文を使用し、現在の .css ファイル内の値の使用すべてを変数に置き換えることができます。

テスト

テストで失敗した行をハイライト

Jest や Karma 、Mocha または Protractor でテストを実施した結果、いくつかのテストが失敗した場合、問題が発生した箇所をエディタで確認できるようになりました。IDE はスタックトレースの情報を利用し、失敗したコードをハイライトしてくれます。失敗した箇所をホバーするとテストランナーからのエラーメッセージを参照できますので、すぐにテストのデバッグを始めることができます。
Highlighting for failed line in test

Cucumber と TypeScript のテスト

Cucumber と TypeScript を使っていますか?.feature ファイルのステップから .ts ファイルの定義箇所へ遷移できるようになりました。また、クイックフィクス (Alt-Enter) によって不足している定義を生成することもできます。

ツール

新しいデバッガーコンソール

JavaScript と Node.js のデバッグツールウィンドウにおいて、新しく改善されたインタラクティブなデバッガコンソールを利用できます!ツリービューを使用してオブジェクトが表示されるようになり、CSSのログメッセージのスタイルや、console.group() とconsole.groupEnd()を使ってそれらのグループ化をサポートします。 また、あらゆる種類のログメッセージの除外もできるようになりました。
New debugger console

npm スクリプトの補完

package.json ファイルに新しいスクリプトを追加する際、WebStormはインストールされたパッケージが提供する利用可能なコマンドを提案するようになりました。node と入力するとIDE はフォルダとファイル名を提案します。npm run と入力すると現在のファイルで定義されたタスクリストが表示されます。
Completion for npm scripts

linter サポートの改善

WebStorm は1つのプロジェクト内で ESLint と TSLint の複数のプロセスを実行できるようになりました。monorepo プロジェクトおよび複数の linter 設定のあるプロジェクトで正しく動作するようになったことを確認できます。

Docker Compose サポート

Node.js アプリケーションをテストするのに Docker を利用している場合、Docker Compose ファイルに書かれている設定を使用し、IDEからアプリを簡単に実行およびデバッグできるようになりました。

依存関係のバージョン範囲ツールチップ

package.json において Cmd/Ctrl を押下しながら依存関係のあるバージョンにカーソルを合わせると、npm installまたはyarn installの実行時にインストールされるバージョンの範囲が表示されるようになりました。

IDE

新しいUIテーマ

プラグインとして利用可能な WebStorm の新しいカラフルなUIテーマを利用できるようになりました。Dark PurpleGrayCyan Light テーマ、または自身で作成したテーマから選ぶことができます。
New UI themes

最近のロケーションをポップアップ表示

最近のロケーションをポップアップ (Cmd-Shift-E / Ctrl+Shift+E) はプロジェクト内を移動するための新しい方法です。エディタ内で最近開いた全てのファイルおよびコード行をリスト表示してくれます。タイピングを始めると結果を絞り込むことができ必要なコードにジャンプできます。
Recent locations popup

プロジェクトをテンプレートとして保存

Tools メニュー配下に新しく Save project as Template メニューが追加されました。IDEのようこそ画面で新しいプロジェクトを作成する際、そのベースとしてプロジェクトを利用できます。

特定のファイルタイプに対するソフトラップ

特定のファイルタイプに対して、エディタにおいてソフトラップを有効にできるようになりました。Preferences/Settings | Editor | General 画面の Soft-wrap files フィールドでファイルタイプを指定してください。