WebStormの新機能

新しいインスペクションのツールチップ

新しいインスペクションのツールチップには、エラーまたは警告の説明だけでなく、そのための最善のクイックフィックスも表示されます。

Alt-Shift-Enterを押して適用するか、Alt-Enterを押して、WebStormが提供している利用可能な自動修正の完全なリストを参照してください。

未使用コードの検索

新しいコード・カバレッジ機能を使用すると、クライアント側のアプリケーションで未使用のコードを見つけることができます。WebStormでカバレッジのあるJavaScript デバッグ設定を開始し、Chromeであなたのアプリとやりとりして、設定を停止します。レポートには、各ファイルとフォルダーで使用されたコードの種類と量が表示されます。

新しいインテンション

JavaScriptとTypeScriptで作業するときにさらに生産性を高めるために、WebStormにはAlt-Enterを押したときに利用できる新しいインテンションがあります。インターフェースの実装、派生クラスの作成、インターフェースまたは抽象クラスのメンバーを実装する、'switch'のケースを生成する、'for..of'と繰り返すのほんの一部です。

TypeScriptの改善

WebStormは、最新のTypeScript 2.9および今後登場するTypeScript 3.0リリースで追加された新しい言語機能をすべてサポートします。

これに加えて、WebStormは、JSDocの型で注釈を付けるのようなTypeScript言語サービス自体によって提供されるより迅速な修正を提供します。

Reactコンポーネントの抽出と変換

Reactコンポーネントを2つにリファクタリングする必要がありますか？コピー&ペーストを忘れる： render メソッドでJSXコードを選択し、リファクタリング - コンポーネントの抽出を使用します。

新しいインテンションを使用すると、Reactクラスのコンポーネントを機能コンポーネントに変換して元に戻すことができます。

Angular CLIとの新しい統合

アプリに新規… | Angular依存関係...アクションでフィーチャーの追加。IDEはAngular CLI ng add コマンドを使用して依存関係をインストールし、特別なインストールスクリプトでアプリケーションを更新します。

新規… | Angularスケマティック...アクションを使用して、@angular/material のようなライブラリーで定義されたAngular schematicsでコードを生成することもできます。

Vue.jsのイベントの補完

Vueテンプレートでは、WebStormがイベント用にコード補完を提供するようになりました。イベント名は、v-on: の後に、または略記 @eventを使用する場合に推奨されます。イベント修飾子としてコード補完もあります。

失敗したテストの再実行

WebStormのKarma、Jest、またはMochaでテストを実行すると、修正後にすべてのテストを実行する代わりに、失敗したテストのみを再実行できるようになりました。

Jestスナップショットの差分ビュー

スナップショットの不一致によりJestテストが失敗した場合は、使い慣れたIDE サイドバイサイドビューを使用する理由を確認できます。

エディターでテストの横にある新しいアイコンをクリックすることで、テストファイルから関連するスナップショットにすばやくジャンプすることも可能になりました。

WSL上でのNode.jsのサポート

LinuxのWindowsサブシステムでNode.jsをWebStormのNode.jsアプリケーションの実行とデバッグに、IDEの他のすべての開発タスク（テストの実行、linterの使用、ビルドツールの使用など）に使用できるようになりました。

Node.jsデバッガを再接続する

Node.js/Chrome への接続デバッグ構成の新しい自動的に再接続するオプションのおかげで、nodemonを使用するNode.jsアプリケーションをデバッグするがより簡単になりました。変更後にノード・プロセスをリロードすると、デバッグを続行するために自分でデバッガを再起動する必要はありません。

グローバルファイルウォッチャー

設定済みのファイル・ウォッチャーをIDE設定に保存して、異なるプロジェクトで使用することができるようになりました。以前は、特定のプロジェクトに対してのみファイルウォッチャーを設定できました。ファイルウォッチャーを使用すると、IDEでファイルを変更または保存するときに、コマンドラインツールを自動的に実行できます。

新しいドキュメントUI

新しい使い方、よりコンパクトで軽量なドキュメントポップアップ !

より明瞭で一貫性のあるフォーマットを使用して、メソッドのパラメータ、型および戻り型の情報をJavaScriptおよびTypeScriptで表示します。また、JSDocコメントで使用されるMarkdownをレンダリングします。

TypeScriptの改善

最新のTypeScript 2.7機能のサポートに加えて、このアップデートによりメンバーを実装する動作が改善され、未解決のプロパティーに対して新しいタイプガード付きサラウンドクイックフィックスが追加されました。

WebStormは、tsconfig.json以外の名前のTypeScript構成ファイルも認識するようになりました。

クラスとファイルの名前を変更する

今度はクラスに対してリファクタリング - 名前変更を実行すると、WebStormはクラスと同じ名前を持つファイルとその名前の名前を変更することを提案します。

また、クラス名、インターフェース名、またはタイプ名をAlt-Enterキーを押すと、ファイル名をこの名前に変更することを示唆する新しいインテンションが表示されます。

Prettier で再フォーマット

新しいPrettier で再フォーマットアクション（Alt-Shift-Cmd / Ctrl-P）を使用すると、Prettier(英語)を使用して、選択したコード、ファイルまたはディレクトリー全体をフォーマットできます。

Prettierはプロジェクト依存として、またはマシン上にグローバルにインストールする必要があります。

新しいVueプロジェクトを作成する

Vue CLI(英語)を使用して、WebStormで新しいVueプロジェクトを作成できるようになりました。

npm install -g vue-cliを実行してインストールし、IDEのウェルカム画面で新しいプロジェクトを作成する - Vue.jsを押して、新しいプロジェクトで使用するテンプレートとツールに関する質問に答えます。

Vueコンポーネントを抽出する

新しいVueコンポーネントを作成するをコピー&ペーストなしで既存のものから削除する - テンプレートの一部を選択し、リファクタリング - 抽出を使用するか、またはAlt-Enterを押してVue コンポーネントの抽出を選択します。

WebStormは新しい単一ファイルコンポーネントを作成し、インポートを追加し、すべてのデータとメソッドを小道具で渡します。

React Nativeアプリケーションのデバッグ

アップデートされたReact Nativeの設定により、WebStormはより多くの実行とデバッグのシナリオをサポートします。これで、バンドラの起動方法を別々に設定したり、デバッガをデバイス上にビルドして起動したアプリケーションにアタッチすることができます。

さらに、IDEですぐにExpo(英語)を使用するアプリケーションをデバッグできるようになりました。

パッケージマネージャの設定

WebStormでパッケージマネージャを設定する方が簡単になりました。Node.js および NPM環境設定では、npmとYarnの間で選択してから、依存関係をインストールしてスクリプトを実行することができます。

また、yarn.lockファイルを使って新しいプロジェクトを開くと、WebStormはYarnをインストールしていればYarnを使用します。

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

Node.jsデバッガには、ノードプロセス自体の出力を示すコンソールタブと、JavaScriptを実行できる新しいデバッガー・コンソールの2つのコンソールタブがあります。console.logメッセージを参照し、console.log が呼び出された場所にジャンプします。

Gitの部分コミット

部分的なGitコミットのサポートにより、ファイルから選択した変更のみをコミットできるようになりました。変更のコミットダイアログのdiffビューのチェックボックスを使用して、コミットするコードのチャンクを選択します。

エディター・ガターでアクションを使用して変更されたコード行を新しいチェンジリストに追加し、チェンジリストをコミットすることもできます。

もっと良いGitの改善

コミットの詳細では、コミットハッシュをクリックすると、ログ内のこのコミットにジャンプできます。

リベースをしているとき、GZ ブランチポップアップで新しいリベースを中断、リベースを続行、コミットをスキップアクションが利用できるようになりました。

クラスの完成と定義へ

HTMLのクラス名にあるCmd / Ctrl +クリックは、このHTMLファイルにリンクされているコンパイル済みCSSファイル内の宣言だけでなく、Sass、SCSS、またはLessソースへの宣言を示唆するようになりました。

HTMLでは、リンクされたCSSファイルに一致するシンボルがない場合、コード補完はすべてのスタイルシートからクラスとIDを提案します。