WebStorm の新機能

WebStormの新機能

WebStorm 2019.3には、起動が20%高速化され、Vue.jsサポートが大幅に強化され、JavaScriptとTypeScriptのコード補完がさらにスマートになり、多くの残留バグが修正されました。

パフォーマンス

Faster startup

起動の高速化

これまで、WebStormユーザーが直面する最も一般的なパフォーマンスの問題の1つは、IDEの起動が遅いことでした。過去2回のリリースサイクルでは、ようこそ画面が表示れ、IDEが既にインデックスされているプロジェクトを開くのをユーザーが待たなければならない 時間短縮するために多くの努力を注ぎました。その結果、以前のバージョンよりもWebStormがこの20%高速(英語)を処理できるようになりました。

フレームワークとツール

Vue completion for separate files

Vue.js用のより高度なコード補完

コーディングの速度を上げるために、WebStormはスロット名自動補完できるようになりました。これは、Vuetify、Quasar、BootstrapVueなどのプロジェクトコンポーネントおよびコンポーネントライブラリで定義されたスロット名に対して機能します。

さらに、WebStormは、別々のファイルにあるコンポーネントの部分間のリンクを理解し、 props、データ、および単一の.vueファイルで定義されていないメソッドの正確な補完提案を提供します。

Quick documentation in Vue.js projects

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

WebStorm 2019.3 を使用すると、Vue.jsおよびいくつかの一般的なコンポーネントライブラリで定義されているコンポーネントディレクティブドキュメントを確認できます。そのためには、コード内のコンポーネントまたはディレクティブの名前でF1を押すだけです。

一般的なテクノロジーの最新バージョンのサポート

WebStorm 2019.3は、Angular 9およびYarn 2のプラグアンドプレイ機能を備えたschematicsをサポートしています。さらに、キーTypeScript 3.7の機能での作業に役立ちます。オプションのチェーンnullの合体、およびアサーション署名

Reactコンポーネントでのpropsのより良いサポート

propTypeのないコンポーネントの場合、WebStormは、propsがコンポーネントの使用で渡されることがわかると、コンポーネント定義で props.something未解決のプロパティレポートしなくなります。

JavaScript & TypeScript

Template language injections

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

ファイルのメイン言語とは異なる言語のコードフラグメントを使用する必要がありますか? Alt-Enterを押すことにより、PugHandlebars、およびEJSを含むそのようなコードフラグメントをファイルに挿入できるようになりました。

Name suggestions for new symbols

新しいシンボルの名前の提案

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

新しい変数、関数、クラス、インターフェースについては、同じスコープで既に使用されているがまだ定義されておらず、未解決としてマークされている名前の候補も表示されます。

HTMLとスタイルシート

Completion for CSS libraries on CDN

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

プロジェクトでBootstrapまたは別のCSSライブラリを使用していて、HTMLファイルのCDNからリンクしている場合、ソースをプロジェクトに追加せずに、そのライブラリからクラス名の補完を取得できるようになりました。これを有効にするには、HTMLファイル内のリンクでAlt-Enterを押し、ライブラリをダウンロードを選択します。

バージョン管理

Reworked UI for cloning projects

プロジェクトを複製するためのUIを作り直しました

バージョン管理システムからプロジェクトを複製すると、ようこそ画面とVCSメニューに更新されたバージョン管理から取得ダイアログが表示されます。

この再設計により、主にGitHubからプロジェクトを取得するエクスペリエンスを改善したいと考えました。更新されたダイアログから GitHubアカウントに直接ログインできるようになりました。ログインしたら、すぐそこからWebStormにアカウント内のリポジトリや、属する組織やクローンプロジェクトのリストを探索することができます。

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

片方のブランチから変更をプッシュする必要がありますか?最新のアップデートでは、変更をプッシュするブランチに切り替える必要がなくなりました。ブランチポップアップから選択し、プッシュクリックするだけです。

より合理化されたコミットプロセス

これで、バージョン管理から直接コミットするツールウィンドウを使用できます-別のダイアログでIDEの残りの部分がブロックされることはありません。そのためには、環境設定/設定 | バージョン管理 | コミット・ダイアログダイアログを表示せずにローカル変更からコミットするにチェックマークを付けます。

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

多くのユーザビリティの課題を解決するために、単一の別名チェックアウト...アクションを2つの新しいアクションに置き換えました: リモート ブランチの統合チェックアウト アクションリモートとローカルブランチの両方の選択からの新しいブランチ ...アクション

IDE

Run anything action

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

npmやYarn、最近のプロジェクトを開く、または実行/デバッグ構成を開始するなどのツール起動する必要がありますか? なんでも実行アクション(Ctrl-Ctrl)を使用して、すべてを1か所から実行できるようになりました。

Searching in the selection only

選択範囲のみで検索

新しい選択内フィルター(Cmd/Ctrl-Fを2回)を使用すると、ファイル内のコードの選択部分に検索を絞り込むことで、特定の情報をすばやく見つけることができます。

Dartサポートのバンドル廃止

WebStorm 2019.3以降、Dartプラグインはバンドルされなくなります。これは、リリースサイクル短縮するために行われました。バンドルされたプラグインは、IDE全体の更新と一緒にしか更新できません。Dartを使用する場合は、環境設定/設定 | プラグインから同じDartプラグインをインストールする必要があります。

デフォルトでグローバルファイルウォッチャーを有効にする

プロジェクトにPrettierなどのサードパーティツールを使用していて、ファイル監視を使用して構成している場合、作成したすべての新しいプロジェクトにこの構成を自動的に適用することができます。これで、デフォルトでグローバルファイルウォッチャーを有効にすることでこれを実現できます。

WebStorm 2019.2 について学ぶ

JavaScript & TypeScript

New UI of completion popup

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

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

JavaScriptとTypeScriptの補完候補の提示がより明確になり、一貫性が増しました。シンボルが定義されている場所、およびそれが標準言語APIの一部であるかどうかを簡単に見つけることができるようになりました。複数の定義を持つシンボルのための新しいアイコンもあります。

Smart new intentions

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

新しい非構造化への伝播 インテンション(Alt-Enter)では、可能であれば追加の変数の構造化で置き換えることができます。分割を完全に削除するには、構造化をプロパティまたはインデックスアクセスに置き換えますというインテンションアクションを使用します。

条件内のブール式不要な部分がいくつか含まれている場合は、IDEによって警告が表示され、単純化することが提案されます。

Improved Rename refactoring

改善された名前変更リファクタリング

JavaScriptまたはTypeScriptファイル内のシンボルの名前を変更すると、IDEは動的な使用箇所グループ化し、デフォルトでリファクタリングから除外します。これにより、リファクタリングがより正確になり、リファクタリング・プレビューツールウィンドウで何を正確に名前変更する必要があるかをより詳細に制御できます。

Vue.js

Better support for Vue.js

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

Vue.jsアプリケーションでVuetify、BootstrapVue、またはQuasarを使用しますか?これらおよび他のいくつかのVueコンポーネントライブラリのコンポーネント用コード補完とそのpropsより正確になりました。これは、IDEでこれらのライブラリを処理するために採用した新しいアプローチ(英語)によって可能になりました。

コード編集

Syntax highlighting for 20+ languages

20以上の言語での構文の強調表示

時折WebStorm内のいくつかのPHPまたはPythonファイルを調べる必要がありますか? IDEに同梱されているTextMate文法ファイルのコレクションのおかげで、構文の強調表示は現在、これらおよび他の多くの言語で利用可能です - 追加の設定は不要です

Completion for mistyped keywords and names

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

誤って function の代わりに funtcion または fnction と入力したことがありますか? コード補完はこの種のエラーを理解することができ、それでもあなたにとって最も関連性のあるオプション提案するでしょう。これは、キーワード、クラス、関数、コンポーネントなど、サポートされているすべての言語で使用できます。

Support for shell scripts

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

WebStormはシェルスクリプトを扱うのを手助けすることができます。コード補完.sh.bash ファイルで動作し、新しい実行設定が用意されており、IDEはlintためシェルチェック(英語)とを統合しshfmt(英語)コードをフォーマットします。

Searching for duplicate code

重複コードの検索

新しい重複したコードの一部 インスペクションを使用すると、プロジェクト内でコードの重複を見つけることができます。それはその場であなたのコードをチェックし、すぐにエディターで潜在的な重複強調表示します。JavaScript、TypeScript、CSS、Sass、SCSS、Lessで動作します。

IDE

Code style for a folder with EditorConfig

EditorConfigを使用したフォルダーのコードスタイル

複数の .editorconfig ファイルを追加することで、プロジェクトのさまざまな部分でさまざまなコードスタイル維持できるようになりました。長い間サポートされてきた標準のEditorConfig(英語)オプションに加えて、利用可能なすべてのIDEコードスタイルオプションをカバーするIDE固有のプロパティを使用することができます。

Open multiple projects in one window

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

WebStormでプロジェクトを開いて別のプロジェクトを開きたい場合は、この2番目のプロジェクトを開いたプロジェクトアタッチ して、両方のプロジェクトを同じIDEウィンドウに表示できます。アタッチプロジェクトを閉じる場合は、プロジェクトビューでそのルートを右クリックしてプロジェクト・ビューから除去を選択します。

Updated plugin configuration

更新されたプラグイン設定

IDE設定の更新されたプラグインページで、必要なプラグインを見つけやすくなりました - 利用可能なプラグインのリストの隣にプラグインの説明が表示されます。更新タブを削除しましたが、インストール済みセクションのプラグインの横に新しい更新ボタンを追加しました。

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

バージョン管理

Completion in .gitignore

.gitignoreでの完成

.gitignore ファイルでは、IDEはファイル名とフォルダー名についてコード補完候補を提示します。プロジェクトビューでこのファイルまたはフォルダーにジャンプする名前のCmd/Ctrl-click。ローカルの変更タブから .gitignore にファイルをすばやく追加することができます - Unversioned filesグループ内でそれを右クリックして.gitignoreに追加するを選択します。

WebStorm 2019.1 について学ぶ

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のようこそ画面で新規プロジェクトを作成するためのベースとしてプロジェクトを使用できます。

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

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