WebStormの新機能
WebStorm 2018.1は、Prettierとの統合、部分的なGitコミット、Vue.jsとReact Nativeのサポートの強化、完全に再設計されたドキュメントを追加します。
JavaScript & TypeScript
新しいドキュメントUI
新しい使い方、もっとコンパクトで軽量なドキュメントポップアップ!
より明瞭で一貫性のあるフォーマットを使用して、メソッドのパラメータ、型および戻り型の情報をJavaScriptおよびTypeScriptで表示します。また、JSDocコメントで使用されるMarkdownをレンダリングします。
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を押してビューコンポーネントの抽出を選択します。
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ビューのチェックボックスを使用して、コミットするコードのチャンクを選択します。
また、エディタガターのアクションを使用して変更されたコード行を新規変更リストに追加し、チェンジリストをコミットすることもできます。
もっと良いGitの改善
コミットの詳細では、コミットハッシュをクリックするを使用してログ内のこのコミットにジャンプすることができます。
リベースをしているとき、GZ ブランチポップアップで新しいリベースを中断、リベースを続行、コミットをスキップアクションが利用できるようになりました。
スタイルシート
クラスの完成と定義へ
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()を使用して動的インポートの定義に移動します。
