JavaScript と TypeScript
JavaScriptの分割代入を利用可能に
分割機能を利用すると、とても簡潔な構文を利用して、配列やオブジェクトから変数を分割し、変数に代入することができます。WebStormの新しいリファクタリング機能と空気を読む (Alt-Enter) 機能を利用することで JavaScript や TypeScript のコードに分割代入を容易に導入できます。
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 やテンプレート、スタイルやテストファイルのような異なるコンポーネントファイルにすばやくジャンプできます。
VueアプリケーションにおけるTypeScriptサポートを改善
WebStorm は .vue ファイル内の任意の TypeScript コードに対する独自のTypeScript サポートと共に TypeScript 言語サービスを使用するようになりました。より正確なタイプチェックやタイプ情報を得ることができます。また、サービスが提供するクイックフィックスを使えるようになります。さらには TypeScript ツールウィンドウにおいて現在のファイル内の TypeScript エラーをすべて参照できるようになりました。
React hooks のメソッド抽出が可能に
メソッド抽出リファクタリングはローカル関数で機能し、戻り値に分割代入を利用してカスタムの React Hooks 抽出を完全にします。
propsの補完改善
WebStormはスプレッド演算子と組み合わせて使用される React props のコード補完を改善しました。
HTML とスタイルシート
最新ドキュメントの表示
CSS プロパティ、HTML タグや属性のためのドキュメント (F1) には、MDN からのブラウザサポートに関する最新の説明と情報および MDN の全記事へのリンクも表示されるようになりました。
CSSに関するブラウザ互換性チェックに対応
現在利用している CSS プロパティ全てがターゲットのブラウザバージョンでサポートされていることをチェックできるようになりました。環境設定の Inspactions で新しく追加された Browser compatibility を有効にしてください。
CSS Module でキャメルケースに対応
プロジェクトで CSS Module を利用する場合、JavaScript ファイル内のクラスのコード補完では、ダッシュ付きのクラス名のキャメルケースバージョンを提案するようになりました。
CSS 変数の抽出
新しい CSS 変数の抽出リファクタリングでは var(--var-name) 構文を使用し、現在の .css ファイル内の値の使用すべてを変数に置き換えることができます。
テスト
テストで失敗した行をハイライト
Jest や Karma 、Mocha または Protractor でテストを実施した結果、いくつかのテストが失敗した場合、問題が発生した箇所をエディタで確認できるようになりました。IDE はスタックトレースの情報を利用し、失敗したコードをハイライトしてくれます。失敗した箇所をホバーするとテストランナーからのエラーメッセージを参照できますので、すぐにテストのデバッグを始めることができます。
Cucumber と TypeScript のテスト
Cucumber と TypeScript を使っていますか？.feature ファイルのステップから .ts ファイルの定義箇所へ遷移できるようになりました。また、クイックフィクス (Alt-Enter) によって不足している定義を生成することもできます。
ツール
新しいデバッガーコンソール
JavaScript と Node.js のデバッグツールウィンドウにおいて、新しく改善されたインタラクティブなデバッガコンソールを利用できます！ツリービューを使用してオブジェクトが表示されるようになり、CSSのログメッセージのスタイルや、console.group() とconsole.groupEnd()を使ってそれらのグループ化をサポートします。 また、あらゆる種類のログメッセージの除外もできるようになりました。
npm スクリプトの補完
package.json ファイルに新しいスクリプトを追加する際、WebStormはインストールされたパッケージが提供する利用可能なコマンドを提案するようになりました。node と入力するとIDE はフォルダとファイル名を提案します。npm run と入力すると現在のファイルで定義されたタスクリストが表示されます。
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 Purple、Gray、Cyan Light テーマ、または自身で作成したテーマから選ぶことができます。
最近のロケーションをポップアップ表示
最近のロケーションをポップアップ (Cmd-Shift-E / Ctrl+Shift+E) はプロジェクト内を移動するための新しい方法です。エディタ内で最近開いた全てのファイルおよびコード行をリスト表示してくれます。タイピングを始めると結果を絞り込むことができ必要なコードにジャンプできます。
プロジェクトをテンプレートとして保存
Tools メニュー配下に新しく Save project as Template メニューが追加されました。IDEのようこそ画面で新しいプロジェクトを作成する際、そのベースとしてプロジェクトを利用できます。
特定のファイルタイプに対するソフトラップ
特定のファイルタイプに対して、エディタにおいてソフトラップを有効にできるようになりました。Preferences/Settings | Editor | General 画面の Soft-wrap files フィールドでファイルタイプを指定してください。