WebStormの新機能

WebStorm 2018.3はここに多くのエキサイティングな新機能を追加し、全面的に機能強化しました: Angularサポートの大幅な改善、GitHubプルリクエスト、Node.js ワーカースレッドのデバッグ、さらに待ち受けています!

無料30日間のトライアル

JavaScript & TypeScript

JavaScriptのオートインポート

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

パラメーターのヒント

パラメータヒントがJavaScriptファイルで利用できるようになりました。彼らはメソッドと関数でパラメータの名前を表示するを使用し、コードを読みやすくします。

複数行 todo

複数行のTodoのコメントを追加する： todo または fixme を入力し、次の行に余分なインデントを追加して、続行を続けることができるようになりました。

メソッドのオーバーライド

親クラスまたはインターフェースからメソッドをオーバーライドするを選択して補完候補から選択すると、IDEは自動的にパラメータ、 super() 呼び出し、およびタイプ情報を追加します。

矢印関数で変数に変換する

新しいインテンション（Alt-Enter）は、関数を矢印関数を保持する変数に変換したり、クラスメソッドをフィールドに変換したりできます。

'null' と 'undefined' のチェック改善

WebStormは、 undefined または nullの値でメソッドが呼び出されるか、関数に渡されるか、そのプロパティーが使用されるため、TypeErrorを取得するときの検出する状況が改善されるようになりました。

フレームワーク

改良されたAngularサポート

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

Node.js API

Node.js APIのパラメータ情報とドキュメントはnode.d.tsのデータを使用するため、より詳細になりました。メソッドの実際の実装を見たい場合は、定義に移動するとNode.jsソースに移動します。

Vuetifyのサポート

WebStormは現在、バージョン1.1以上のVuetifyのコンポーネント用のコード補完を提供しています。

Reactの改善

Reactアプリでは、コード補完はすべてのコンポーネントライフサイクルメソッドを提案するようになりました。未解決変数インスペクションは未定義のコンポーネントについて警告します。

HTMLとスタイルシート

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

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

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

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

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

新しいCSSコードスタイルオプション

CSS、SCSS、Sass、Less、およびStylusのコードスタイルは、空白行の使用の設定を持つようになりました。さらに、ブロック内でアルファベット順またはカスタム順にCSSプロパティーをソートするを実行できるようになりました。

タグを除去します

HTMLタグとJSXタグ（Alt-EnterまたはShift-Cmd-バックスペース / Ctrl + Shift + Delete経由で利用可能）のアンラップ/除去アクションは、インデントを自動的に更新するようになりました。

テスト

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

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

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

ツール

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

WebStormはワーカースレッドのAPIにコード補完を提供し、デバッグワーカーを使用できます - Node.js 10.12以上と --experimental-worker フラグを使用します。どのスレッドでブレークポイントがヒットしているかを知ることができます。スレッド間で切り替えて、コールスタックと変数を表示することもできます。

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

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

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

package.jsonでの補完

package.jsonファイルの依存関係のため、WebStormは最新バージョンの提案と前のものを提供するようになりました。

Protractorテストを実行する

Protractorの単一のテストまたはスイートを実行またはデバッグするテストの横にあるエディターのガターアイコンを使用します。

ライブ編集

ライブ編集機能がChrome拡張なしで動作するようになりました。

バージョン管理

GitHub PRs

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

Gitサブモジュール

プロジェクトの更新、変更のコミット、差分の表示、衝突の解決など、Git統合のすべての使い慣れた機能は、Gitサブモジュールと連携するようになりました。

空白を無視

マージ中に空白を無視またはトリムするを使用できるようになりました。リビジョンのマージダイアログの上にある新しいドロップダウンで設定が利用できます。ファイルに対してAnnotateを使用すると、デフォルトで空白も無視されます。

プリコミットフックのサポート強化

コミット・ダイアログは、プリコミットフックでファイルに加えられた変更を正しく表示して処理するようになりました（例えば、lint- stagedを使用している場合など）。

IDE

新しい検索ポップアップ

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

ハイコントラストテーマ

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

IDEでは、ライン番号、VCS注釈、ブレークポイント、その他のガターアイコンをスクリーンリーダーで読み取ることができます。スクリーンリーダーのサポートの詳細については、ドキュメントを参照してください(英語)。

プラグインの設定

環境設定のプラグインのページを再設計しましたは、注目の最も人気のあるプラグインを表示するようになりました。カテゴリ別にプラグインを検索し、ダウンロードと評価で並べ替えることができます。

フォルダーをドラッグして開く

フォルダーをドラッグするをコードのIDEのウェルカムスクリーンにファイルマネージャまたはデスクトップからWebStormで開くようにします。

無料30日間のトライアル

WebStorm 2018.2について学ぶ

JavaScript & TypeScript

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

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

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

未使用コードの検索

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

New JavaScript and TypeScript intentions

新しいインテンション

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アプリケーションをデバッグするがより簡単になりました。変更後にノード・プロセスをリロードすると、デバッグを続行するために自分でデバッガを再起動する必要はありません。

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

これで、設定済みの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

新しいドキュメントUI

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

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

TypeScript improvements – Surround with the type guard

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ビューのチェックボックスを使用して、コミットするコードのチャンクを選択します。

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

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()を使用して動的インポートの定義に移動します。