WebStormの新機能

補完ポップアップの新しいUI

補完ポップアップは、より洗練された外観になりました。

JavaScriptとTypeScriptの補完候補の提示がより明確になり、一貫性が増しました。シンボルが定義されている場所、およびそれが標準言語APIの一部であるかどうかを簡単に見つけることができるようになりました。複数の定義を持つシンボルのための新しいアイコンもあります。

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

新しい非構造化への伝播 インテンション（Alt-Enter）では、可能であれば追加の変数 を別の構造化で置き換えることができます。分割を完全に削除するには、構造化をプロパティまたはインデックスアクセスに置き換えますというインテンションアクションを使用します。

条件内のブール式に不要な部分がいくつか含まれている場合は、IDEによって警告が表示され、単純化することが提案されます。

改善された名前変更リファクタリング

JavaScriptまたはTypeScriptファイル内のシンボルの名前を変更すると、IDEは動的な使用箇所をグループ化し、デフォルトでリファクタリングから除外します。これにより、リファクタリングがより正確になり、リファクタリング・プレビューツールウィンドウで何を正確に名前変更する必要があるかをより詳細に制御できます。

Vue.jsコンポーネントライブラリのサポート強化

Vue.jsアプリケーションでVuetify、BootstrapVue、またはQuasarを使用しますか？これらおよび他のいくつかのVueコンポーネントライブラリのコンポーネント用コード補完とそのpropsがより正確になりました。これは、IDEでこれらのライブラリを処理するために採用した新しいアプローチ(英語)によって可能になりました。

20以上の言語での構文の強調表示

時折WebStorm内のいくつかのPHPまたはPythonファイルを調べる必要がありますか？ IDEに同梱されているTextMate文法ファイルのコレクションのおかげで、構文の強調表示は現在、これらおよび他の多くの言語で利用可能です - 追加の設定は不要です。

入力ミスしたキーワードと名前の補完

誤って function の代わりに funtcion または fnction と入力したことがありますか？ コード補完はこの種のエラーを理解することができ、それでもあなたにとって最も関連性のあるオプションを提案するでしょう。これは、キーワード、クラス、関数、コンポーネントなど、サポートされているすべての言語で使用できます。

シェルスクリプトのサポート

WebStormはシェルスクリプトを扱うのを手助けすることができます。コード補完は .sh と .bash ファイルで動作し、新しい実行設定が用意されており、IDEはlintためシェルチェック(英語)とを統合しshfmt(英語)コードをフォーマットします。

重複コードの検索

新しい重複したコードの一部 インスペクションを使用すると、プロジェクト内でコードの重複を見つけることができます。それはその場であなたのコードをチェックし、すぐにエディターで潜在的な重複を強調表示します。JavaScript、TypeScript、CSS、Sass、SCSS、Lessで動作します。

EditorConfigを使用したフォルダーのコードスタイル

複数の .editorconfig ファイルを追加することで、プロジェクトのさまざまな部分でさまざまなコードスタイルを維持できるようになりました。長い間サポートされてきた標準のEditorConfig(英語)オプションに加えて、利用可能なすべてのIDEコードスタイルオプションをカバーするIDE固有のプロパティを使用することができます。

一つのウィンドウで複数のプロジェクトを開く

WebStormでプロジェクトを開いて別のプロジェクトを開きたい場合は、この2番目のプロジェクトを開いたプロジェクトに アタッチ して、両方のプロジェクトを同じIDEウィンドウに表示できます。アタッチプロジェクトを閉じる場合は、プロジェクトビューでそのルートを右クリックしてプロジェクト・ビューから除去を選択します。

更新されたプラグイン設定

IDE設定の更新されたプラグインページで、必要なプラグインを見つけやすくなりました - 利用可能なプラグインのリストの隣にプラグインの説明が表示されます。更新タブを削除しましたが、インストール済みセクションのプラグインの横に新しい更新ボタンを追加しました。

ダウンロードしたすべてのプラグインを無効または再度有効にするには、歯車のアイコンをクリックして適切なオプションを選択します。

.gitignoreでの完成

.gitignore ファイルでは、IDEはファイル名とフォルダー名についてコード補完候補を提示します。プロジェクトビューでこのファイルまたはフォルダーにジャンプする名前のCmd/Ctrl-click。ローカルの変更タブから .gitignore にファイルをすばやく追加することができます - Unversioned filesグループ内でそれを右クリックして.gitignoreに追加するを選択します。

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）は、プロジェクト内を移動するための新しい方法です。最近エディターで開いたすべてのファイルとその中のコード行のリストが表示されます。入力を開始して結果を絞り込み、必要なコードにジャンプすることができます。