WebStorm
Angular

WebStorm 2019.1からAngularコンポーネントのts、スタイルシート、テンプレート、テストを行き来しやすくなった

Angularプロジェクトを開発している時、あるコンポーネントの


  • TypeScript

  • CSSやSCSSなどのスタイルシート

  • テンプレート

  • テスト

を行ったり来たりすることはよくあると思います。

2019年3月にリリースされたWebStorm 2019.1に「AngularコンポーネントのRelated Symbolポップアップ機能」が追加され、該当コンポーネントのファイル群を行ったり来たりしやすくなりました。

Angularのコンポーネントを開いている時に次のコマンドを押すと、


  • Ctrl-Cmd-Up : macOS

  • Ctrl+Alt+Home : Windows and Linux

次の画像のように、該当コンポーネントのTypeScript、スタイルシート、テスト、テンプレートを開くようなポップアップが表示されます。

スクリーンショット 2019-03-28 1.29.09.png

これで該当コンポーネントのファイルを行ったり来たりしやすくなりましたね!


関連