WebStorm の新機能

WebStormの新機能

WebStorm 2018.1は、Prettierとの統合、部分的なGitコミット、Vue.jsとReact Nativeのサポートの強化、完全に再設計されたドキュメントを追加します。

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デバッグセッションを開始します。
WebStorm 2017.2について学ぶ

JavaScript&TypeScript

Improved webpack support

改良されたwebpackサポート

JavaScriptファイルのコーディング支援は、Webpackモジュールの解像度(英語)を尊重するようになりました。これで、別名と複数のモジュールを持つ複雑なwebpack構成を使用している場合、WebStormはインポート文のパスを適切に解決し、インポートするシンボルを提案します。

Move symbol refactoring

シンボルの移動リファクタリング

新しいシンボルの移動リファクタリングを使用すると、ES6モジュールのクラス、グローバル関数または変数をJavaScriptまたはTypeScriptファイルから別のファイルに安全に移動できるようになりました。 WebStormはあなたのためにすべてのインポートと輸出を更新します。

Parameter hints and type info in TypeScript

TypeScriptのパラメータヒントとタイプ情報

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。

TypeScriptのオブジェクトは、CmdをWindows&LinuxのmacOSまたはCtrlで保持し、その上にマウスを置くと、推論された型を見てくださいを使用することもできます。

コード・スタイル

Import code style from .eslintrc

.eslintrcからコードスタイルをインポートする

ESLintコードスタイルルールのいくつかをIDEのJavaScriptコードスタイル設定にインポートできるようになりました。

.eslintrcファイルでこれについてのメッセージが表示されたら、'はい'に返信し、一致したルールを適用して、IDEフォーマットをESLint設定とより整合させます。

Code arrangement

コードの配置

新しい配置およびブランク行コードスタイルオプションでは、フィールドやメソッドなどの異なるコードブロックが順序付けられましたであり、JavaScriptおよびTypeScriptクラスでどのように区切られるかを設定できます。

コードの再配置アクションを呼び出すか、コードの再フォーマットと一緒に使用すると、コードをより読みやすく一貫性のあるものにすることができます。

フレームワーク

Support for Angular Material

Angularマテリアルのサポート

Angularマテリアルのサポートが改善されました。コードマテリアルアトリビュートの補完とナビゲーションを使用できるようになりました。

テスト

Run single Karma test

シングルKarmaテストを実行する

それらをすべて実行するのではなく、単一のテストを実行またはデバッグするまたはWebStormからKarmaを使用したスイートを今すぐ使用できます。

エディタでテストの横にあるアイコンをクリックし、実行またはデバッグを選択するだけです。アイコンにテストのステータスが表示されます。

Code coverage for Mocha

Mochaのコードカバレッジ

カバレッジ付きMochaテストを実行するIstanbul(英語)によって作成されたカバレッジレポートをIDEで見ることができます。

このレポートには、テストでカバーされているファイルの数とその中のカバーラインの割合が表示されます。レポートから、ファイルにジャンプして、正確な線が覆われているかどうかを調べることができます。

スタイルヒート

Support for CSS Modules

CSSモジュールのサポート

CSSモジュール(英語)を使用していますか? JavaScriptモジュールにCSSモジュールをインポートした後は、コード補完を取得し、そのモジュール内のクラス名の定義に移動します。

Improved support for Sass and SCSS

SassおよびSCSSのサポートの改善

SassおよびSCSSセレクタは、では、HTMLファイルでコード補完を使用して定義に移動できます。

ネストされたセレクタの場合、Cmdクリック / Ctrl +クリックを使用して定義に素早くジャンプできます。

ツール

npm install notification

npmインストール通知

WebStormは、プロジェクトの最新の依存関係キープに役立てます。プロジェクトを開いたり、バージョンコントロールからpackage.json、を編集したりすると、`npm install`または`npm update`を実行するようにIDEから指示されます。

その他の改善点:

  • インポートが自動的に追加され、プロジェクトで定義され、エクスポートされます。
  • Reactステートレスコンポーネントおよび小道具のコーディング支援の改善
  • プロジェクトビューのファイルのネスト設定をクリックして、どのファイルを視覚的にグループ化するかを設定します
  • JavaScriptとTypeScriptファイルのパンくずリスト
  • 新しいHTMLおよびJSX用のコードスタイルオプション: 最初の属性の前で改行および最後の属性の後で改行
  • module.exportsをES6にエクスポートを変換するクイックフィックス
  • 改良されたTypeScriptのナビゲーション: 定義に移動すると.tsファイルから.d.tsファイルが優先されます
  • Angularテンプレート用メソッドのクイックフィックスを作成する
  • バージョン管理の改善: メッセージフォーマットをコミットする設定、Gitのコミットを戻すアクション、コミットメッセージの新しい言い換えアクション