WebStorm の新機能

WebStormの新機能

WebStorm 2019.1はJavaScriptとTypeScriptのための新しいスマートインテンション、Angularのための改善されたサポート、CSSとHTMLのための更新されたドキュメント、より強力なデバッグコンソール、その他多くをもたらします。

JavaScript & TypeScript

Using JavaScript destructuring

JavaScript 分割代入の使用

分割代入を使用すると、非常に簡潔な構文を使用して、配列およびオブジェクトの値を変数に取り出せます。WebStorm の新しいリファクタリングとインテンション(Alt-Enter)は、簡単にあなたのJavaScriptまたはTypeScriptコードに分割代入を導入するのを手助けすることができます。

Convert function with Promise to async/await

Promise を async/await に変換

.then() および .catch() 呼び出しでPromiseを返す関数を、async/await構文を使用する非同期関数に自動的に変更することができます。関数名の上でAlt-Enterを押してasync 関数に変換するを選択するだけです。これはTypeScriptファイルだけでなく、JavaScriptとFlowでも可能です。

フレームワーク

Convert function with Promise to async/await

Angularアプリ用の新しいインスペクション

Angularアプリケーションの場合、WebStormは17個の新しいインスペクションを追加します。これは、入力時にアプリでAngular固有のエラー検出を支援し、迅速な修正を提案します。これらのインスペクションはTypeScriptファイルとテンプレートファイルの両方で機能し、バインディング、ディレクティブ、コンポーネント、および他の多くのものの使用を確認します。

Easier navigation in Angular projects

Angularプロジェクトでのより簡単なナビゲーション

Angularアプリでは、関連シンボル…ポップアップ(Ctrl-Command-Up / Ctrl+Alt+Home))を使用して、TypeScript、テンプレート、スタイル、テストファイルなどのさまざまなコンポーネントファイル間をすばやく移動できます。TypeScriptファイルでは、ポップアップにすべてのシンボルも表示されます。このファイルにインポートされました。

Improved support for TypeScript in Vue apps

VueアプリでのTypeScriptのサポート向上

WebStormは、.vueファイル内のTypeScriptコードに対する独自のTypeScriptサポートと共に、TypeScript言語サービスを使用するようになりました。これは、より正確な型チェック型情報が得られることを意味します。サービスによって提供されるクイックフィックスを使用することができ、TypeScriptツールウィンドウの現在のファイルにあるすべてのTypeScriptエラーを見ることができます。

React hooks のメソッド抽出

メソッドの抽出のリファクタリングはローカル関数で動作し、戻り値にデストラクタを使用するため、カスタムReact hooksの抽出に最適です。

props の補完を改善

WebStormは、スプレッド演算子を使用してマージされたReact propsに対して、より優れたコード補完を提供するようになりました。

HTMLとスタイルシート

Updated docs and browser compatibility

更新されたドキュメント

CSSプロパティー、HTMLタグおよび属性のドキュメント(F1)に、最新の説明MDNからブラウザサポートに関する情報、およびMDNに関する全記事へのリンクが表示されるようになりました。

CSSのブラウザ互換性チェック

使用しているすべてのCSSプロパティーがターゲットブラウザのバージョンでサポートされていることを確認するには、環境設定で新しいブラウザの互換性 インスペクションを有効にします。

CSSモジュールのキャメルケースサポート

プロジェクトでCSSモジュールを使用している場合、JavaScriptファイル内のクラスのコード補完は、ダッシュ付きのクラス名のキャメルケースバージョンを提案するようになりました。

CSS変数を抽出する

新しいCSS変数を抽出するリファクタリングでは、var(--var-name) 構文を使用して、現在の.cssファイル内の値のすべての使用箇所を変数に置き換えることができます。

テスト

Highlighting for failed line in test

テストで失敗した行の強調表示

JestKarmaMocha、またはProtractorでテストを実行してもいくつかのテストが失敗すると、問題が発生した場所をエディターで確認できます。IDEはスタックトレースからの情報を使用して、失敗したコードを強調表示します。ホバーすると、テストランナーからのエラーメッセージが表示され、すぐにテストのデバッグを開始できます。

CucumberとTypeScriptによるテスト

CucumberとTypeScriptを使用しますか? .featureファイルのステップから.tsファイルの定義ジャンプし、クイックフィックス(Alt-Enter)を使用して不足している定義を生成することができます。

ツール

New debugger console

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

JavaScriptとNode.jsのデバッグツールウィンドウで、新しく改善された対話型デバッガコンソールにアクセスしましょう。ツリービューを使用してオブジェクトを表示するようになりました。また、CSSによるログメッセージのスタイル設定および console.group()console.groupEnd()を使用したグループ化をサポートしました。あらゆる種類のログメッセージを除外することもできます。

Completion for npm scripts

npm スクリプトの補完

package.jsonファイルに新しいスクリプトを追加するとき、WebStormは現在インストールされているパッケージによって提供される利用可能なコマンドのための提案を提供します。 nodeと入力すると、IDEはフォルダーとファイルの名前を提案します。 npm runと入力すると、現在のファイルに定義されているタスクの一覧が表示されます。

linterのサポート向上

WebStormは、1つのプロジェクトでESLintTSLintの複数のプロセスを実行して、monorepo-projectsと複数のlinter構成を持つプロジェクトで正しく動作するようになりました。

Docker Composeのサポート

Node.jsアプリケーションのテストにDockerを使用している場合は、Docker Composeファイルに記載されている設定を使用して、IDEからアプリを簡単に実行およびデバッグできます。

依存関係のバージョン範囲ツールチップ

package.jsonで、Cmd/Ctrlを押して依存関係にあるバージョンの上にマウスを移動すると、npm install または yarn installの実行時にインストールできるバージョンの範囲がわかります。

IDE

New UI themes

新しいUIテーマ

プラグインとして利用可能なWebStormの新しいカラフルなUIテーマを使用することができます。ダーク・パープル(英語)グレー(英語)、およびシアンライト(英語)テーマから選択するか、独自のテーマを作成してください

Recent locations popup

最近使用したロケーション・ポップアップ

最近使用したロケーションポップアップ(Cmd-Shift-E / Ctrl+Shift+E)は、プロジェクト内移動するための新しい方法です。最近エディターで開いたすべてのファイルとその中のコード行のリストが表示されます。入力を開始して結果を絞り込み、必要なコードにジャンプすることができます。

プロジェクトをテンプレートとして保存

ツールメニューの新しいアクションテンプレートとして保存を使用すると、IDEのようこそ画面で新規プロジェクトを作成するためのベースとしてプロジェクトを使用できます。

選択したファイル・タイプをソフトラップ

特定のファイルタイプに対してエディターでソフトラップを有効にできるようになりました。これを行うには、環境設定/設定 | エディター | 一般を開き、ファイルのソフトラップフィールドにファイルの種類を指定します。

WebStorm 2018.3について学ぶ

JavaScript & TypeScript

Autoimports in JavaScript

JavaScriptのオートインポート

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

パラメーターのヒント

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

複数行 todo

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

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

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

アロー関数で変数に変換する

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

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

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

フレームワーク

Improved Angular support

改善されたAngularサポート

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

Node.js API

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

Vuetifyのサポート

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

Reactの改善

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

HTMLとスタイルシート

Accessibility inspections for HTML

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

より使いやすいHTMLコードを書くために、WebStormはWebコンテンツアクセシビリティガイドライン(英語)(WCAG)の推奨に基づいて新しいインスペクションを追加します。これらのインスペクションは約12のテクニックをカバーしており、Alt-Enterを押すと便利なクイックフィックスを提案します。

Rerun failed tests

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

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経由で利用可能)のアンラップ/除去アクションは、インデントを自動的に更新するようになりました。

テスト

Easier navigation for tests

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

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

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

ツール

Debug Node.js worker threads

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

WebStormは今ワーカーのスレッドのAPIのためのコード補完を提供し、デバッグワーカーにあなたを可能にする- Node.jsの10.12以上と --experimental-worker フラグを使用します。どのスレッドでブレークポイントがヒットしたかがわかります。呼び出しスタックと変数を確認するためにスレッドを切り替えることもできます。

More flexibility with ESLint and TSLint

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

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

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

package.jsonでの補完

package.jsonファイル内の依存関係について、WebStorm は最新バージョン以前バージョンの提案を提供し ます。

Protractorテストを実行する

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

ライブ編集

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

バージョン管理

GitHub PRs

GitHub PRs

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

Gitサブモジュール

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

空白を無視

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

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

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

IDE

New search popup

新しい検索ポップアップ

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

High-contrast theme

コントラストの高いテーマ

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

IDEでは、行番号、VCSの注釈、ブレークポイント、その他のガターアイコンをスクリーンリーダーで読み込めるようになりました。スクリーンリーダーのサポートについて詳しくは、ドキュメントを参照してください。

プラグインの設定

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

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

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

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の他のすべての開発タスク(テストの実行、linterの使用、ビルドツールの使用など)に使用できるようになりました。

Reconnect Node.js debugger

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

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

Global file watchers

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

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

その他の改善点:

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