WebStorm 2018.1の新機能

新しいドキュメンテーションUI

ドキュメンテーションポップアップがコンパクトに、ライトウェイトになりました！

JavaScriptとTypeScriptでメソッドのパラメータ、型、戻り値がよりはっきりと、一貫性のある表示になりました。JSDocコメントのMarkdownもレンダーします。

TypeScriptの改善

最新のTypeScript 2.7サポートに加え、Implement Membersアクションや解決されていないプロパティのSurround with type guard クイックフィックスを追加しました。

またtsconfig.jsonという名前以外のTypeScript設定ファイルも認識するようになりました。

クラスとファイルを同時にリネーム

クラス名をリネームする際、ファイル名もリネームするか確認してくれるようになり、同時にリネームできるようになりました。

クラス名、インターフェース名、タイプでAlt-Enter を押せばファイルをその名前に変更するためのインテンションアクションが表示されます。

Prettierでリフォーマット

Reformat with Prettierアクション(Alt-Shift-Cmd/Ctrl-P)で選択したコード、ファイル、ディレクトリをPrettierでフォーマットできます。

Prettierはプロジェクトで依存しておくか、マシングローバルにインストールしておく必要があります。

新しいVueプロジェクト

WebStormからVue CLI.を使ってVueプロジェクトを作成出来るようになりました。

vue-cliはnpm install -g vue-cliでインストールできます。その後でCreate New Project – Vue.jsを新規プロジェクトのスクリーンで選択し、プロジェクトで使いたいテンプレートやツールを選択してください。

Vueコンポーネントの抽出

既存のものから新しいVueコンポーネントをコピー＆ペーストすることなく作成できます。テンプレートの任意の箇所を選択し、Refactor – ExtractまたはAlt-Enter を押してExtract Vue Componentを選択してください。

WebStormは単一ファイルのコンポーネントを作成します。importを追加し、全てのデータとメソッドをプロパティと共にパスします。

React Nativeアプリのデバッグ

新しいReact Native configurationでは、実行/デバッグでbundlerがどのように起動するのか個別に設定できるようになりました。また既にビルド済でデバイスで実行済のアプリにデバッガでアタッチできるようになりました。

さらにExpoを使うアプリをIDEから直接デバッグできるようになりました。

パッケージマネージャの設定

パッケージマネージャの設定がより簡単になりました。Node.jsとnpm preferencesで、依存をインストールしたり、スクリプトを実行するのにnpm かYarn どちらを使うか選択できます。

新しいプロジェクトにyarn.lock ファイルがあり、YarnがインストールされていればWebStormはYarnを使います。

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

Node.jsデバッガは2つのコンソールタブを表示するようになりました。Console タブ はnodeプロセス自身の出力が表示され、新しいDebugger Console ではJavaScriptを実行したり、console.logメッセージを表示したり、console.log が呼び出された箇所へジャンプしたりできます。

Gitの部分コミット

新しいGitのコミットウィンドウではチェックボックスで選択した変更箇所のみコミットできるようになりました。

また、変更箇所をエディタのガターエリアのアクションで新しいチェンジリストへ移動することも出来ます。

その他のGitの改善

コミット詳細画面で、コミットハッシュをクリックしてログ内のそのコミットにジャンプできます。

rebase時、Abort Rebase、Continue Rebase、Skip Commit アクションがGitブランチのポップアップで選択できるようになりました。

クラスの補完とgo to definition

HTMLのnameでCmd/Ctrl-click するとコンパイルされたCSSの定義箇所だけでなく、Sass、SCSS、Lessのソースへジャンプできるようになりました。

HTMLではコード補完はリンクされたCSSファイルにマッチするものがなければ、全てのスタイルシートからクラスとidをサジェストします。