WebStorm 2018.1の新機能

JavaScript & TypeScript

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

New documentation UI for JavaScript and TypeScriptドキュメンテーションポップアップがコンパクトに、ライトウェイトになりました!

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

TypeScriptの改善

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

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

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

Rename class and file together

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

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

コードスタイル

Prettierでリフォーマット

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

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

フレームワーク

新しいVueプロジェクト

Create a new Vue project

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

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

Vueコンポーネントの抽出

Extract a Vue component

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

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

ツール

React Nativeアプリのデバッグ

Debugging React Native apps

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

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

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

Configuring package manager

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

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

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

New Node.js Debugger Console

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

バージョン管理

Gitの部分コミット

Partial commits in Git

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

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

その他のGitの改善

More Git improvements – Abort Rebase, Continue Rebase and Skip Commit

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

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

スタイルシート

クラスの補完とgo to definition

Completion and go to definition for classes

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

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

他の改善点:

  • webpack 4へ移行する際、webpack設定ファイル内のオプション名をチェックし、補完します
  • テストと同じように、npmスクリプトをエディタ横のボタンより実行できます
  • HTMLコードをJSXファイルへコピー する際、自動的にclassとon-eventハンドラをReact固有の属性へ置換します
  • package.json のインスペクションでインストールしてあるパッケージバージョンが指定したレンジにマッチしないと警告します
  • SVGプロパティとCSSファイルの値をより的確にコード補完します
  • JetBrainsアカウントを使ってマシン間のIDE設定を同期できます
  • ECMAScript proposalsのサポート: テンプレートストリングのエスケープシーケンス、RegExp lookbehind assertionと名前付きキャプチャグループ、クラスフィールド
  • import()動的インポートする際の改善されたコード補完 とgo to definition

紹介プログラムにより新規、他社より移行のお客様は最大1,000円割引。既存のお客様は紹介件数に応じて割引となります。

コマーシャルライセンス年間サブスクリプション 新規
パーソナル 年間サブスクリプション 新規

特定商取引に関する法律に基づく表示