WebStormの新機能

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エラーを見ることができます。

更新されたドキュメント

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

テストで失敗した行の強調表示

Jest、Karma、Mocha、またはProtractorでテストを実行してもいくつかのテストが失敗すると、問題が発生した場所をエディターで確認できます。IDEはスタックトレースからの情報を使用して、失敗したコードを強調表示します。ホバーすると、テストランナーからのエラーメッセージが表示され、すぐにテストのデバッグを開始できます。

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

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

npm スクリプトの補完

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

新しいUIテーマ

プラグインとして利用可能なWebStormの新しいカラフルなUIテーマを使用することができます。ダーク・パープル(英語)、グレー(英語)、およびシアンライト(英語)テーマから選択するか、独自のテーマを作成してください。

最近使用したロケーション・ポップアップ

最近使用したロケーションポップアップ（Cmd-Shift-E / Ctrl+Shift+E）は、プロジェクト内を移動するための新しい方法です。最近エディターで開いたすべてのファイルとその中のコード行のリストが表示されます。入力を開始して結果を絞り込み、必要なコードにジャンプすることができます。

JavaScriptのオートインポート

JavaScriptファイルでは、WebStormはプロジェクトで定義されたシンボルだけでなく、プロジェクトの依存関係のシンボルに対してもインポートを自動的に追加できるようになりました。これは、ライブラリーにESモジュールまたはTypeScriptタイプ定義ファイルとして記述されたソースがある限り機能します。

改善されたAngularサポート

WebStormは、Angular テンプレートの編集に役立ちます。変数、パイプ、および非同期パイプのコード補完と定義への移動だけでなく、テンプレート参照変数の方がはるかに正確です。全体として、既知の課題50件はAngularとAngularJSのサポートで修正されています。

HTML用アクセシビリティインスペクション

より使いやすいHTMLコードを書くために、WebStormはWebコンテンツアクセシビリティガイドライン(英語)（WCAG）の推奨に基づいて新しいインスペクションを追加します。これらのインスペクションは約12のテクニックをカバーしており、Alt-Enterを押すと便利なクイックフィックスを提案します。

ルールセットの移動と抽出

Alt-Enterを押すと新しいルールセットの抽出アクションが使用可能になり、CSSの宣言をあるルールセットから新しいより具体的なものに素早く抽出できます。

また、移動リファクタリングは、CSS、SCSS、Sass、Less、またはStylusファイルから別のCSS、SCSS、Sass、またはStylusファイルにルールセット全体を移動できます。

テストのためのより簡単なナビゲーション

構造ビューにファイル内のテストとスイートの名前が表示されるようになりました。テスト名を入力してリストをフィルタリングし、ファイルに必要なものにすばやくジャンプします。

失敗したテストの場合は、テストツールウィンドウでテスト名（またはソースに移動）をダブルクリックして、失敗行に移動します（スタックトレースで指定されている場合）。

Node.js ワーカースレッドのサポート

WebStormは今ワーカーのスレッドのAPIのためのコード補完を提供し、デバッグワーカーにあなたを可能にする- Node.jsの10.12以上と --experimental-worker フラグを使用します。どのスレッドでブレークポイントがヒットしたかがわかります。呼び出しスタックと変数を確認するためにスレッドを切り替えることもできます。

ESLintとTSLintによる柔軟性の向上

WebStormは、linterの設定ファイルの重大度をエディターやコミット前のコードをインスペクションする際に使用します。これで、IDEでこれらの重大度レベルを無効にし、linterのすべての問題をエラーまたは警告として表示できます。

TSLintエラーの場合は、Alt-Enterを押し、次に右矢印キーを押してルールを抑制するコメントを追加します。

GitHub PRs

WebStormのGitHubでプロジェクト内のすべてのプルリクエストを表示できるようになりました。メニューVCS - Gitでプルリクエストの表示を選択すると、PRの説明、担当者、ラベル、および変更されたファイルを示す新しいツールウィンドウが開きます。そこから差分を参照するか、新しいローカルブランチを作成します。

新しい検索ポップアップ

統合検索ポップアップを使用すると、プロジェクト内のクラス、シンボル、およびファイルを簡単に検索できます。IDEの設定とアクションを検索するのにそれを使うことさえできます! どこでも検索（Shift-Shift）または任意のジャンプアクションから開始し、次にタブを押して検索コンテキストを切り替えます。

コントラストの高いテーマ

誰もがWebStormをより使いやすくするために、新しい高コントラストのUIテーマを追加しました。

IDEでは、行番号、VCSの注釈、ブレークポイント、その他のガターアイコンをスクリーンリーダーで読み込めるようになりました。スクリーンリーダーのサポートについて詳しくは、ドキュメントを参照してください。