WebStorm の新機能

WebStorm 2019.3では起動の高速化、Vue.jsサポートの大幅な強化、JavaScriptのコード補完のより高度なスマート化、長く未解決であった多数のバグの修正を行いました。

パフォーマンス

起動の高速化

起動の高速化

これまでWebStormユーザーが直面していた、主要なパフォーマンスの問題の1つとして、IDEの起動時間の遅さが挙げられます。 過去2回のリリースサイクルを通して、私たちはウェルカム画面の表示とインデックス化済みのプロジェクトをIDEが開くまでの待ち時間の削減に注力してきました。 その結果、WebStormによるこれらの処理が以前のバージョンよりも20%高速化されました。

フレームワークとツール

Vueの個別ファイル補完

Vue.jsのコード補完をさらに高度化

コーディング速度を向上するため、WebStormでスロット名を自動補完できるようになりました。 この自動補完は、プロジェクトコンポーネントやVuetify、Quasar、BootstrapVueのようなコンポーネントライブラリで定義済みのスロット名に対して有効です。

また、WebStormは別ファイル上に存在するコンポーネント部品間のリンクを認識するようになり、単体の.vueファイル内では定義されていないプロパティ、データ、メソッドの正確な補完候補を提供できるようになりました。

Vue.jsプロジェクトのクイックドキュメント

Vue.jsプロジェクトのクイックドキュメント

WebStorm 2019.3では、Vue.jsや一部の人気コンポーネントライブラリで定義されたコンポーネントディレクティブのドキュメントを確認できるようになりました。 当該ドキュメントを確認するには、コード内のコンポーネント名やディレクティブ名の上でF1を押します。

人気テクノロジーの最新バージョンに対応

WebStorm 2019.3はSchematicsとAngular 9、および Yarn 2のプラグアンドプレイ機能をサポートしています。 また、TypeScript 3.7の主な機能optional chaining(オプショナルチェーン)nullish coalescing(null合体演算子)assertion signatures(アサーションシグネチャ))に対応しています。

Reactコンポーネントのサポート強化

WebStormは、propTypesのないコンポーネントに対して、コンポーネントの使用箇所で当該プロパティが渡されていることが確認できる場合、props.something未解決プロパティを報告しないようになりました

JavaScript&TypeScript

テンプレート言語のインジェクション

テンプレート言語のインジェクション

ファイルのメイン言語とは異なる言語のコード片を取り扱う必要がありますか? Alt-Enterを押し、PugHandlebarsEJSなどのファイルにコード片注入できるようになりました。

新しいシンボル名の提案

新しいシンボル名の提案

JavaScriptファイルやTypeScriptファイルで新しい変数やパラメータの名前を追加する際、使用中のプロジェクト、標準ライブラリ、および依存関係で定義されているクラスインターフェース型エイリアスの名前に基づいた名前が提案されるようになりました。

新しい変数、関数、クラス、インターフェースの場合は、同じ範囲で使用済みであるものの、未定義で未解決になっている名前も提案されます。

HTMLとスタイルシート

CDN上のCSSライブラリの補完

CDN上のCSSライブラリの補完

プロジェクト内でBootstrapや別のCSSライブラリを使用し、それをHTMLファイル内でCDNからリンクしている場合、当該ライブラリのソースをプロジェクトに追加することなくそのクラス名を補完できるようになりました。 この補完を有効にするには、HTMLファイル内のリンク上でAlt-Enterを押して「Download library」を選択するだけです。

バージョン管理

プロジェクト複製UIの改良

プロジェクト複製UIの改良

バージョン管理システムからプロジェクトを複製する際、ウェルカム画面とVCSメニューにGet from Version Controlダイアログが新しく表示されるようになりました。

この再設計にあたっては、主にGitHubからのプロジェクト取得操作の改善に努めました。最新のダイアログからは直接GitHubアカウントにログインできるようになりました。 ログイン後、ご自身のアカウントや所属組織のリポジトリ一覧を調べ、そこから直接WebStormにプロジェクトを複製することができます。

任意のブランチから変更をプッシュ

あるブランチで作業しながら、別のブランチの変更をプッシュする必要がありますか? この最新アップデートでは、変更をプッシュしたいブランチに切り替える必要はありません。対象ブランチをBranchesポップアップから選択し、Pushをクリックするだけです。

コミット手順のさらなる合理化

Version Controlツールウィンドウから直接コミットできるようになりました。別のダイアログがIDEの他の部分を邪魔することはありません。 この機能を利用するには、Preferences/Settings | Version Control | Commit DialogCommit from the Local Changes without showing a dialog(ダイアログを表示せずにローカルの変更からコミットする)にチェックを入れてください。

ブランチをチェックアウトするための新しいアクション

多数のユーザビリティの問題を解決するため、1つのCheckout as...アクションを2つの新しいアクション(リモートブランチに一本化したCheckoutアクションと、リモートブランチとローカルブランチの両方に対応したNew Branch from Selected...アクション)に置き換えました

IDE

Run Anythingアクション

ツールと設定を実行するための新しいアクション

npmやYarnのようなツールを起動し、最近のプロジェクトを開いたりRun/Debug構成を開始する必要がありますか? 今回、これらのすべての操作をRun Anythingアクション(Ctrl-Ctrl)を使用して一箇所から実行できるようになりました。

選択範囲内のみを検索

選択範囲内のみを検索

新しいIn Selectionフィルター(Cmd/Ctrl-Fを2回)を使用すると、検索対象をファイル内の選択したコード部分に絞り込み、特定の情報をより高速に検索できます。

Dartサポートのバンドルを停止

WebStorm 2019.3以降、Dartプラグインはバンドルされません。 この措置は同プラグインのリリースサイクルを短縮するために行われました。バンドル対象のプラグインはIDE全体のアップデートと同じタイミングでしかアップデートされないためです。 今後、Dartをご利用の際はPreferences/Settings | Pluginsから同じDartプラグインをインストールする必要があります。

全体に及ぶファイルウォッチャーをデフォルトで有効化

プロジェクトにPrettierのようなサードパーティ製ツールを使用し、それをファイルウォッチャー経由で設定する場合、自動的にその設定を作成するすべての新しいプロジェクトに適用したい場合があります。 このリリースでは、全体に及ぶファイルウォッチャーをデフォルトで有効化することで、この処理を実現できるようになりました。

WebStorm 2019.2の詳細

JavaScriptと&TypeScript

新しい補完ポップアップUI

新しい補完ポップアップUI

補完ポップアップが刷新され、より洗練された外観になりました。

JavaScriptとTypeScriptのコード補完表示がより分かりやすく、一貫性のあるものになりました。 シンボルの定義箇所を簡単に特定して、それが標準言語APIの一部であるかどうかを確認できるようになりました。 また、複数箇所で定義されているシンボル用に新しいアイコンが追加されました。

スマートで新しいインテンション

スマートで新しいインテンション

新しい Propagate to destructuring インテンション(Alt-Enter)を使うと、可能な場合に別のデストラクチャリング追加の変数を置き換えることができます。 デストラクチャリングを完全に削除するには、Replace destructuring with property or index access というインテンションアクションを使用してください。

条件文のブール式不必要な部分がある場合、IDEが警告を表示し、その単純化方法を提案するようになりました。

Renameリファクタリングの改善

Renameリファクタリングの改善

JavaScriptまたはTypeScriptファイル内のシンボル名を変更する際、IDEが動的な使用箇所をまとめて、デフォルトでそれらをリファクタリング対象から除外するようになりました。 これにより、リファクタリングの精度が向上し、Refactoring Previewツールウィンドウで正確にリネームすべきものをより細かくコントロールできるようになりました。

Vue.js

Vue.jsのサポート強化

Vue.jsコンポーネントライブラリのサポートを強化

Vue.jsアプリケーションでVuetify、BootstrapVue、Quasarをお使いですか? これらや他のVueコンポーネントライブラリのコンポーネントとそのプロパティに対するコード補完より正確になりました。 これらは、当社がIDEでこれらのライブラリを処理するために適用した新しいアプローチにより実現しました。

コード編集

20言語以上のシンタックスハイライト

20言語以上のシンタックスハイライト

WebStormでPHPPythonのファイルを時々見る必要がありますか? IDEに同梱されたTextMate文法ファイルコレクションにより、追加設定を行うことなくこれらの言語やその他多くの言語でシンタックスハイライトを利用できるようになりました。

入力ミスをしたキーワードと名前の補完

入力ミスをしたキーワードと名前の補完

functionを誤ってfuntcionfnctionと入力したご経験はありませんか? コード補完がこの種のエラーを認識できるようになりました。また、引き続き最適なオプションを提案します。 これはすべてのサポート対象言語とすべてのシンボル(キーワード、クラス、関数、コンポーネントその他)で機能します。

シェルスクリプトのサポート

シェルスクリプトのサポート

WebStormでシェルスクリプトのコーディング支援を利用できるようになりました。 コード補完.shファイルと.bashファイルで機能し、新しい実行構成を利用できるようになり、IDEにリンティング用のShellCheckやコード整形用のshfmtが統合されました。

重複コードの検索

重複コードの検索

新しいDuplicate code fragmentインスペクションを使用して、プロジェクト内の重複コードを見つけられるようになりました。 その場でコードをチェックし、エディタ内で即座に潜在的な重複箇所をハイライトします。 この機能はJavaScript、TypeScript、CSS、Sass、SCSS、Lessで動作します。

IDE

EditorConfigによるフォルダのコードスタイル

EditorConfigによるフォルダのコードスタイル

複数の.editorconfigファイルを追加することで、複数プロジェクトのさまざまな部分で異なるコードスタイルを維持できるようになりました。 長年サポートされてきた標準的なEditorConfigオプションのほか、使用可能なすべてのIDEコードスタイルオプションを網羅したIDE固有のプロパティを使用できるようになりました。

単一ウィンドウで複数プロジェクトを開く

単一ウィンドウで複数プロジェクトを開く

WebStormでプロジェクトを開いている状態で別のプロジェクトを開きたい場合、この2つめのプロジェクトをすでに開いているプロジェクト結合し、両方のプロジェクトを同じIDEウィンドウに表示できるようになりました。 結合したプロジェクトを閉じたい場合は、Projectビューで対象プロジェクトのルートを右クリックし、Remove from Project View を選択してください。

プラグイン構成の更新

プラグイン構成の更新

更新されたIDE環境設定のPluginページでは、必要なプラグインを探しやすくなっています。プラグインの説明が利用可能なプラグインのすぐ横に表示されるようになりました。 Updatesタブを削除しましたが、Installedセクションのプラグインの横に新しいUpdateボタンを追加しました。

ダウンロード済みのプラグインをすべて無効化、または再有効化するには、歯車アイコンをクリックして適切なオプションを選択してください。

バージョン管理

.gitignore での補完

.gitignore での補完

このIDEは、.gitignoreファイルでファイル名やフォルダ名のコード補完機能を提供します。 名前の上でCmd/Ctrl-クリックすると、Projectビュー内の対象ファイルやフォルダにジャンプできます。 Local Changesタブから.gitignoreに素早くファイルを追加できるようになりました。Unversioned ファイルグループで対象ファイルを右クリックしてAdd to .gitignoreを選択してください。

WebStorm 2019.1の詳細

JavaScriptと&TypeScript

JavaScriptでストラクチャリング(分割代入)の使用

JavaScriptでストラクチャリング(分割代入)の使用

デストラクチャリングを使用すると、非常に簡潔な構文を使用して、配列とオブジェクトの値を複数の変数に展開して代入できます。 WebStormの新しいリファクタリングとインテンション(Alt-Enter)は、JavaScriptコードやTypeScriptコードに簡単にデストラクチャリングを導入するのに役立ちます。

Promiseを持つ関数をasync/awaitに変換

Promiseを持つ関数をasync/awaitに変換

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

フレームワーク

Promiseを持つ関数をasync/awaitに変換

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

Angularアプリケーション用に、WebStormは入力時にアプリ内のAngular固有のエラーを検出するのに役立ち、クイックフィックスを提案する17個の新しいインスペクションを追加しました。 これらのインスペクションは、TypeScriptとテンプレートファイルの両方で機能し、バインディング、ディレクティブ、コンポーネント、その他多くの構成要素の使用状況をチェックします。

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

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

Angularアプリでは、Related Symbol…ポップアップ(Ctrl-Cmd-Up / Ctrl+Alt+Home)を使用して、TypeScript、テンプレート、スタイル、テストファイルなどのさまざまなコンポーネントファイル間を素早く移動できるようになりました。 TypeScriptファイルの場合、当該ファイルにインポートされたすべてのシンボルもポップアップに一覧表示されます。

VueアプリでのTypeScriptサポートの改善

VueアプリでのTypeScriptサポートの改善

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

Reactフックのメソッド抽出

Extract Methodリファクタリングはローカル関数で機能し、戻り値にデストラクチャリングを使用するようになったため、カスタムReactフックの抽出に最適です。

プロパティの補完が改善

今回、WebStormはスプレッド演算子を使ってマージされたReactプロパティに対してより優れたコード補完をご提供いたします。

HTMLとスタイルシート

ドキュメントの更新とブラウザの互換性

ドキュメントの更新

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

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

使用中の全CSSプロパティがターゲットブラウザのバージョンでサポートされていることを確認するため、環境設定で新しいBrowser compatibilityインスペクションを有効にできるようになりました。

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

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

CSS変数の抽出

新しいExtract CSS variableリファクタリングにより、var(--var-name)構文を使用して、現在の.cssファイル内の値のすべての使用箇所を変数に置き換えられるようになりました。

テスト

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

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

JestKarmaMocha、またはProtractorを使ってテストを実行して一部のテストが失敗した際、問題が発生した場所をエディタで直接確認できるようになりました。 IDEはスタックトレースからの情報を使用して、失敗したコードを強調表示します。 カーソルを合わせると、テストランナーのエラーメッセージが表示され、即座にテストのデバッグを開始できます。

CucumberとTypeScriptによるテスト

CucumberとTypeScriptをご使用ですか?  .featureファイルのステップから.tsファイル内にあるそれらの定義箇所ジャンプし、クイックフィックス(Alt-Enter)を使用して不足している定義を生成できるようになりました。

ツール

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

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

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

npmスクリプトの補完

npmスクリプトの補完

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

リンターのサポートを強化

WebStormが1つのプロジェクトでESLintTSLintの複数のプロセスを実行し、それらがmonorepoプロジェクトと複数のリンター構成を持つプロジェクトで正しく動作できるようになりました。

Docker Composeのサポート

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

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

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

IDE

新しいUIテーマ

新しいUIテーマ

プラグインとしてご利用可能なWebStormの新しいカラフルなUIテーマを使用できるようになりました。 ダークパープルグレーシアンライトのテーマの中から選択するか、独自のテーマを作成してください。

最近の場所のポップアップ

最近の場所のポップアップ

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

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

「Tools」メニューの「Save as a Template」という新しいアクションを使用して、プロジェクトをIDEの「ようこそ」画面で新規プロジェクトを作成するためのベースとして使用できるようになりました。

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

特定のファイルタイプに対してエディタでソフトラップを有効にできるようになりました。 これを行うには、Preferences/Settings | Editor | Generalを開き、「Soft-wrap files」フィールドでファイルの種類を指定します。