WebStormの新機能
WebStorm 2019.1はJavaScriptとTypeScriptのための新しいスマートインテンション、Angularのための改善されたサポート、CSSとHTMLのための更新されたドキュメント、より強力なデバッグコンソール、その他多くをもたらします。
JavaScript & TypeScript
JavaScript 分割代入の使用
分割代入を使用すると、非常に簡潔な構文を使用して、配列およびオブジェクトの値を変数に取り出せます。WebStorm の新しいリファクタリングとインテンション（Alt-Enter）は、簡単にあなたのJavaScriptまたはTypeScriptコードに分割代入を導入するのを手助けすることができます。
Promise を async/await に変換
.then() および .catch() 呼び出しでPromiseを返す関数を、async/await構文を使用する非同期関数に自動的に変更することができます。関数名の上でAlt-Enterを押してasync 関数に変換するを選択するだけです。これはTypeScriptファイルだけでなく、JavaScriptとFlowでも可能です。
フレームワーク
Angularアプリ用の新しいインスペクション
Angularアプリケーションの場合、WebStormは17個の新しいインスペクションを追加します。これは、入力時にアプリでAngular固有のエラー検出を支援し、迅速な修正を提案します。これらのインスペクションはTypeScriptファイルとテンプレートファイルの両方で機能し、バインディング、ディレクティブ、コンポーネント、および他の多くのものの使用を確認します。
Angularプロジェクトでのより簡単なナビゲーション
Angularアプリでは、関連シンボル…ポップアップ（Ctrl-Command-Up / Ctrl+Alt+Home)）を使用して、TypeScript、テンプレート、スタイル、テストファイルなどのさまざまなコンポーネントファイル間をすばやく移動できます。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プロパティーがターゲットブラウザのバージョンでサポートされていることを確認するには、環境設定で新しいブラウザの互換性 インスペクションを有効にします。
CSSモジュールのキャメルケースサポート
プロジェクトでCSSモジュールを使用している場合、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-projectsと複数のlinter構成を持つプロジェクトで正しく動作するようになりました。
Docker Composeのサポート
Node.jsアプリケーションのテストにDockerを使用している場合は、Docker Composeファイルに記載されている設定を使用して、IDEからアプリを簡単に実行およびデバッグできます。
依存関係のバージョン範囲ツールチップ
package.jsonで、Cmd/Ctrlを押して依存関係にあるバージョンの上にマウスを移動すると、npm install または yarn installの実行時にインストールできるバージョンの範囲がわかります。
IDE
新しいUIテーマ
プラグインとして利用可能なWebStormの新しいカラフルなUIテーマを使用することができます。ダーク・パープル(英語)、グレー(英語)、およびシアンライト(英語)テーマから選択するか、独自のテーマを作成してください。
最近使用したロケーション・ポップアップ
最近使用したロケーションポップアップ（Cmd-Shift-E / Ctrl+Shift+E）は、プロジェクト内を移動するための新しい方法です。最近エディターで開いたすべてのファイルとその中のコード行のリストが表示されます。入力を開始して結果を絞り込み、必要なコードにジャンプすることができます。
プロジェクトをテンプレートとして保存
ツールメニューの新しいアクションテンプレートとして保存を使用すると、IDEのようこそ画面で新規プロジェクトを作成するためのベースとしてプロジェクトを使用できます。
選択したファイル・タイプをソフトラップ
特定のファイルタイプに対してエディターでソフトラップを有効にできるようになりました。これを行うには、環境設定/設定 | エディター | 一般を開き、ファイルのソフトラップフィールドにファイルの種類を指定します。
