WebStorm 2021.2の新機能

コード編集

保存時にブラウザーのページをリロード

Live Edit 機能の改善を期待される皆さまのリクエストにお応えしました！ WebStorm では、HTML / CSS / JavaScript のファイルを編集し、保存するタイミングでブラウザーのページが自動的に更新されるようになります。エディターで HTML ファイルを開き、そのファイルにカーソルを合わせ、使用するブラウザーのアイコンをクリックしてください。すべてのブラウザーがサポートされています。

保存時のアクション実行

保存時に特定の操作を実行したい方のために、 WebStorm 2021.2 では、このワークフローをサポートできるようにしました！既存の機能をすべて改良し、1 か所に集め、保存時に行うコードの再フォーマットやインポートの最適などの新しいオプションを搭載して強化しました。

スクラッチファイルをスピーディに作成

プロジェクトのコンテキスト外のコードの作業をしたい場合は、エディター内で該当するコードを選択し、Alt+Enter を押します。そして Create new scratch file from selection を選択すると、 選択したコードが含まれたスクラッチファイルが作成されます。

Code With Me におけるコード補完の同期

Code With Me セッション中に Following モードで作業を行うときは、自分がフォローしているユーザーが使用しているコード補完の提案を追跡できるようになりました。

JavaScript と TypeScript

`require()` の自動インポート

ES6 シンボルを補完する際に WebStorm が欠落しているインポートステートメントを追加できることはご存じですか？同じ機能を CommonJS モジュールでも使用できるようになりました。require インポートがコード補完時に挿入されます。

JSDoc における TypeScript 型のサポート

WebStorm は .js ファイルの JSDoc コメント内で使用される TypeScript の構文を適切にサポートするようになりました。 既存のサポートを改良および拡張したほか、既存の多くの問題を修正しました。

アロー関数の新しいアクション

コードにアロー関数をすばやく追加する必要がありますか？ Ctrl+Alt+J を使用すれば、コードブロックをアロー関数で囲めるようになりました。また、arf と入力して タブを押せば、テンプレートを拡張して空のアロー関数を追加できます。

デバッグ作業中のプレビュータブ

これまで Project ビューでのみ使用できたプレビュータブですが、アプリのデバッグ作業中にも使用できるようになりました。これをオンにするには、Preferences / Settings | Editor | General | Editor Tabs にアクセスして Enable preview tab のチェックボックスにチェックを入れます。これにより、WebStorm は 1 つのタブにファイルを連続して開くようになるため、複数のファイルでエディター内が混雑するのを防げます。

フレームワークとテクノロジー

React の useState フックに対応した Rename リファクタリング

useState の値と関数のリファクタリングに無駄な時間をかける必要はもうありません。WebStorm でこれら両方の名前を変更できるようになりました！キャレットを状態値に置き、Shift+F6 を押すか、右クリックしてコンテキストメニューから Refactor | Rename を開いてください。

private npm パッケージの補完

コード補完が private npm パッケージでも使用できるようになり、package.json にプロジェクトの新しい依存関係を追加するのがさらに簡単になりました。 WebStorm では、public パッケージと同様に、パッケージの最新バージョンに関する情報をチェックできます。

classnames ライブラリと clsx ライブラリのサポート

To help you work more efficiently with CSS classes in your React projects, we’ve added support for popular classnames and clsx libraries. WebStorm では、CSS クラスの補完提案が表示されるほか、文字列リテラルのすべてのシンボルとリテラル名付きのプロパティが解決されます。

web-types の全般的なサポート

ウェブフレームワークをドキュメント化するオープンソーススタンダードである Web 型のサポートを拡張しました。以前は Vue のサポートに重点が置かれていました。しかし、これを使って HTML ファイルのカスタムコンポーネントのコーディング支援を充実させることができるようになりました。詳しくは、こちらのウェビナーの録画をご視聴ください。

バージョン管理

新しいコミット前チェック

コードをコミットする前にテストを実行できたらいいと思いませんか？まさにそれを行うためのオプションを新しく追加しました。 Commit ツールウィンドウで歯車アイコンをクリックし、Run Tests を選択してから、好きな実行構成を選択します。 WebStorm がファイルをテストし、問題があれば警告を出してくれます。

GPG 署名のサポート

コミットは、GPG キーを使って署名することによりセキュリティ保護できるようになりました。この機能は、Preferences / Settings | Version Control | Git の Configure GPG Key… で有効化できます。

ローカル履歴の検索

Local History のリビジョンを簡単に確認できるようになりました。変更されたファイルを右クリックし、Local History | Show History を開いてから、検索フィールドを使ってリビジョンの内容を確認します。

ユーザビリティ

ローカライズされた UI

本バージョンより、WebStorm の UI が日本語、中国語、および韓国語に完全にローカライズされています。ローカライゼーションは、バンドルされていない言語パックのプラグインとして提供しています。WebStorm でのインストールは、Preferences / Settings | Plugins から行ってください。

ツールウィンドウをスピーディに整理

ツールウィンドウをより簡単に整理できるようになりました。移動したいツールウィンドウの上部にカーソルを合わせて、任意の場所にドラッグしてからドロップします。 WebStorm のメインウィンドウからツールウィンドウを切り離したい場合も、IDE フレームの外にドラッグすることができます。

プロジェクトアイコンをより簡単にカスタマイズ

プロジェクトにカスタムアイコンを割り当てることができるのはご存知ですか？このプロセスを以前よりもシンプルにしました。 WebStorm の Welcome 画面でプロジェクトを右クリックし、Change Project Icon…オプションを選択してから、そのプロジェクトに関連付ける SVG ファイルをアップロードします。

Toolbox App からのアップデート通知

Toolbox App からの重大な製品アップデートを逃す心配がなくなりました。 WebStorm はダウンロードできる新バージョンがあることを知らせてくれるほか、それにアップグレードするオプションを表示してくれます。Toolbox App のバージョンが 1.20.8804 以降であることを確認してください。

改善された Preferences / Settings ダイアログ

Preferences / Settings ダイアログに高度な設定オプション付きのノードが追加されました。 Distraction-free モードで左余白を設定するオプションなど、新しい設定オプションがいくつか設けられています。また、ダイアログの右上隅にある矢印を使えば、最近開いたノードの間をスピーディに行き来できるようにもなりました。

キャッシュとログの自動クリーンアップ

WebStorm は、メジャーなアップデートがインストールされるたびに、最後に更新されてから 180 日以上が経過しているキャッシュとログのディレクトリをクリーンアップします。システム設定とプラグインのディレクトリは対象外です。このプロセスを手動でトリガーするには、メインメニューから Help | Delete Leftover IDE Directories… を開きます。

ビルトインターミナルの新機能

ユーザーエクスペリエンスの向上を図るため、ビルトインターミナルに 3 つの新機能を追加しました。 カーソルの形を変更したり、⌥ キーをメタ修飾子として使用したりできるようになりました。これらのオプションは、Preferences / Settings | Tools | Terminal にあります。また、http リンクも便利に使用できるようになりました。