WebStorm の新機能

WebStormの新機能

Extract Reactコンポーネントのリファクタリング、Angular CLIとの新しい統合、より良いテストワークフローとNode.jsのデバッグエクスペリエンス、その他数多くの改善がWebStorm 2018.2で利用可能です。

JavaScript&TypeScript

New inspection tooltip

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

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

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

Find unused code

未使用コードの検索

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

New JavaScript and TypeScript intentions

新しいインテンション

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

TypeScript improvements

TypeScriptの改善

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

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

フレームワーク

Extract React component

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

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

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

Extract React component

Angular CLIとの新しい統合

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

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

Completion for events in Vue.js

Vue.jsのイベントの補完

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

テスト

Rerun failed tests

失敗したテストの再実行

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

Rerun failed tests

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

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

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

ツール

Completion for events in Vue.js

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

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

Reconnect Node.js debugger

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

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

Global file watchers

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

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

その他の改善点:

  • IDEツールバーとツールウィンドウ上の新しいクリーンでシンプルなアイコンは読みやすさを保証し、視覚的な混乱を軽減します。
  • アプリケーションの実行とデバッグ、変更のコミット、MacBookのタッチバーからのプロジェクトの更新。
  • 50以上のReact開発のためのコードスニペットの新しいコレクション。
  • WebStormは現在新しいAngularプロジェクトに2倍の速さでインデックスを付けるで、コード補完の品質に影響を与えることなく妥協することなく解決します。
  • JavaScriptおよびTypeScriptファイルにポストフィックスの補完のためのカスタムテンプレートを追加できるようになりました。
  • 新しいJavaScriptおよびNode.jsデバッガのフレームアクションを削除するを使用すると、再び見たい臨界点を見つけられなかった場合、関数を再入力することができます。
  • ブレークポイントのある行でAlt-Enterを押し、インテンションのリスト内のブレークポイント関連のアクションを参照してください。
  • JSON5のサポートは、.json5拡張子を持つファイルで利用できるようになりました
  • JSONスキーマファイルはschemastore.orgから自動的にダウンロードされ、ファイル名に基づいてファイルに適用されます。
  • 複数のGitHubアカウントにログインすることができます。
  • 改訂時のリポジトリの参照アクションを使用すると、チェックアウトなしで任意のリビジョンでプロジェクト内のファイルを探索できます。
WebStorm 2018.1について学ぶ

JavaScript&TypeScript

New documentation UI for JavaScript and TypeScript

新しいドキュメントUI

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

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

TypeScript improvements – Surround with the type guard

TypeScriptの改善

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

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

Rename class and file together

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

今度はクラスのリファクタリング - リネームを実行すると、WebStormはクラスと同じ名前を持つ場合、ファイルの名前を変更するとその使用箇所を提案します。

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

コード・スタイル

Reformat with Prettier

Prettier で再フォーマット

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

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

フレームワーク

Create a new Vue project

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

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

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

Extract a Vue component

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

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

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

ツール

Debugging React Native apps

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

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

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

Configuring package manager

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

WebStormのパッケージマネージャーを構成するでは、Node.js および NPM環境設定でnpmYarnのどちらかを選択し、依存関係をインストールしてスクリプトを実行することができます。

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

New Node.js Debugger Console

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

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

バージョン管理

Partial commits in Git

Gitの部分コミット

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

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

More Git improvements – Abort Rebase, Continue Rebase and Skip Commit

もっと良いGitの改善

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

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

スタイル・シート

Completion and go to definition for classes

クラスの完成と定義へ

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

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

その他の改善点:

  • webpack 4に移行する場合、WebStormはwebpack設定ファイルのオプション名を確認して補完することができます。
  • テストと同様に、エディタでアイコンを右クリックしてnpm スクリプトの実行を使用できるようになりました。
  • HTMLコードをJSXファイルにコピーするを使用すると、WebStormは自動的にReact 固有属性の置き換える class およびオンイベントハンドラを実行します。
  • package.jsonの新しいインスペクションは、パッケージ指定された範囲と一致しませんがインストールされていることを警告します。
  • SVGプロパティのコード補完とCSSファイルの値が改善されました。
  • JetBrainsアカウントを使用して複数のマシン間でIDE設定を同期するを実行できるようになりました。
  • ECMAScriptの提案のサポート:テンプレート文字列内のエスケープシーケンス、RegExp lookbehindアサーションと名前付きキャプチャグループ、およびクラスフィールド。
  • 改良されたコード補完を使用し、 import()を使用して動的インポートの定義に移動します。
WebStorm 2017.3について学ぶ

JavaScript&TypeScript

New Pull Member Up refactoring

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

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

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

Extract type alias and interface

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

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

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

Better code completion and documentation for JavaScript

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

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

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

Multiple JavaScript versions in a project

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

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

フレームワーク

Improvements in Vue.js support

Vue.jsサポートの改善

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

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

Code snippets for Vue.js

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

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

テスト

Improved Jest integration

Jest統合の改善

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

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

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

ツール

Easy start with JavaScript debugger

JavaScriptデバッガで簡単に開始

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

New REST Client

新しいRESTクライアント

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

コード・スタイル

Import code style from ESLint and TSLint

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

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

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

スタイルシート

Better support for CSS

より良いCSSサポート

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

バージョン管理

Working with multiple branches

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

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

その他の改善点:

  • インポートはあるプロジェクトファイルから別のプロジェクトファイルへのコードをコピー&ペーストすると自動的に追加されますです。
  • 特定のバージョンのツールの代わりにシステムのノードバージョンのエイリアスを使用し、構成を実行します。
  • 新しいインテンションがTypeScriptの欠落している型宣言をインストールするを思い出させるようになりました。
  • WebStormは標準のJavaScriptとWeb APIの定義ファイルとしてあらかじめ構築された指標を提供しています。
  • `--watch`オプションでMocha実行コンフィギュレーションを開始すると、モカの監視モードを使用して変更点に関するテストを再実行するになります。
  • これで、型宣言ファイルでJavaScriptライブラリのコード補完を改善するを使用できるようになりました。 importまたはrequireステートメントでAlt-Enterを押し、"より良い型情報のためにTypeScript定義をインストールしてください: "を選択します。
  • IDEでcreate-react-appを使用して新しいプロジェクトを作成して実行すると、別の反応スクリプトバージョンを使用するが表示されます。
  • ライブ編集設定が更新されました:HTMLとCSSに使用し、設定で「Chromeでアプリケーションを更新する」を有効にし、JetBrains IDEサポートChrome拡張をインストールして、JavaScriptデバッグセッションを開始します。