WebStormの新機能

新しいドキュメント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を提案します。

新しいプルメンバーリファクタリング

新しいリファクタリングでは、現在のJavaScriptまたはTypeScriptクラスからその親クラスまたはインターフェースにクラス階層を上に移動するできるようになりました。

または親クラスがまだない場合は、新しいスーパークラスの抽出リファクタリングを使用して、フィールドとメソッドをスーパークラスに抽出できます。

エキス型エイリアスとインターフェース

TypeScript用の新しい抽出エイリアスリファクタリングでは、複合型のエイリアスを作成し、自動的にそのすべての用途を新しい名前に置き換えることができます。 タイプエイリアスをインターフェースに変換するをサポートする新しいインテンションもあります。

新しいインターフェースの抽出リファクタリングを使用して直接新しいインターフェースを作成することもできます。

より良いコード補完とJavaScriptのドキュメント

標準JavaScriptオブジェクトおよびメソッドとWeb APIのコード補完およびパラメーター情報は、TypeScript宣言ファイルによって強化されているため、改善されました。

F1で利用可能なドキュメンテーションには、バンドルされた定義ファイルからの、またはMDN(英語)からのフェッチされたメソッドの簡単な説明も含まれています。

プロジェクト内の複数のJavaScriptバージョン

プロジェクトで異なるバージョンのJavaScriptを使用していて、ECMAScript 5.1ファイルでES6またはJSX構文を使用しているときにWebStormに不満を持たせたい場合は、環境設定 | 言語 & フレームワーク | JavaScriptでディレクトリごとにJavaScript言語バージョンを設定するを使用できるようになりました。

Vue.jsサポートの改善

今回のアップデートにより、WebStormのVue.jsへのサポートが大幅に改善されました!定義に対するコード補完とナビゲーションは、Vueの小道具、データオブジェクトのプロパティ、計算されたプロパティ、およびメソッドで機能します。

中括弧波括弧がVueテンプレートに自動的に追加されるようになりました。

Vue.jsのコードスニペット

WebStormはVueのコードスニペットのコレクションを追加します。これらのコードテンプレートは、頻繁に使用されるコードブロックの入力時間を節約するのに役立ちます。新しいVueファイルテンプレートを使用すると、新しいコンポーネントをすばやく作成することもできます。

Jest統合の改善

Jestの統合はさらに優れています! IDEでテストを実行すると、Jest自身の監視モードを使用するを使用してより速く再実行することができます。

カバレッジでテストを実行するをクリックしてカバレッジレポートを表示します。次に、ファイルにジャンプして、テストされていないコードの行があるかどうかを確認します。

テストウィンドウから、ワンクリックで失敗したスナップショットを更新します。

JavaScriptデバッガで簡単に開始

WebStormのJavaScriptデバッガを使い始めるために、まずJetBrainsのChrome拡張機能を最初にインストールする必要はありません。ちょうど新しいデバッグ設定を作成すると始めよう。 WebStormはChromeの新しいインスタンスを開き、シームレスにそれに接続します。

新しいRESTクライアント

WebStormはIDEからのテストAPIに新しい方法を導入しました。これで、HTTP要求を.httpファイルに書き込んだり、エディタガーターのアイコンを使ってすぐに実行することができます。

ESLintとTSLintからコードスタイルをインポートする

プロジェクトを開くと、WebStormは単純なESLintおよびTSLint設定ファイルからサポートされているコードスタイルルールを自動的にインポートします。

一方、ESLint設定ファイルがJavaScriptまたはYAMLで記述されている場合、または`extend`が使用されている場合は、ESLintコードスタイルルールを適用するアクションを使用してコードスタイルをインポートできます。

より良いCSSサポート

CSSのプロパティと値のコード補完はより正確になっています。これまでになかった変換する、遷移、pointer-eventsの値の補完候補が追加されました。

複数のブランチで作業する

開いているファイル、現在の実行コンフィギュレーション、ブレークポイントを含むブランチ、IDE ワークスペースを保存するを切り替えると、このワークスペースは、そのブランチに切り替えると自動的に復元されます。