VSCodeでAngularのコード編集を快適に2020
この記事はAngular Advent Calendar 2020の14日目の記事です。
はじめに
普段はJetBrains系のIDEを使ってAngularの開発をしているのですが、ふとVSCodeだとどんな感じになるのかなと気になり、調べてみました。
意外と網羅的にVSCodeのAngular向けの拡張などを紹介している記事がないような気がしたので、整理してみました。
※本記事ではコードの編集に内容を絞り、テストやデバッグ等については扱いません
移動・検索系
TypeScript内での定義元への移動
VSCodeは標準でTypeScriptをサポートしているので、拡張は入れなくてもGo to Definitionで移動できます。
テンプレート→TypeScriptの定義元への移動
VSCode拡張：Angular Support
テンプレート→TypeScriptの定義元へのプレビュー・移動をサポートします。
Go to Defenitionで変数の定義元に行ったり…
読み込んでいるコンポーネントの定義元に行ったりできます。
TypeScript→テンプレート への移動
この記事の公開時点では探した限り難しそうでした…
このあたり、JetBrains系のエディタのAngularプラグインだとサポートしてくれているのですが。
VSCodeのAngularのLanguage Serviceにissueがあり、今後対応されそうな雰囲気はあります。
コンポーネントのselectorの使用箇所を検索する
TypeScript→テンプレートは基本的に難しそうなのですが、selectorの使用箇所を調べることだけできるピンポイントな拡張は発見できました。
VSCode拡張：Angular DX
コンポーネントのselectorに対し、右クリック→Find All References で他コンポーネントのテンプレートからの参照を検索できます。
リファクタリング系
名前変更
TypeScript系は、VSCodeのサポートでいい感じになってくれます。
TypeScript変数名やメソッド名の変更
Rename Symbolで可能です。
ただし、例えばコンポーネントのプロパティの名前変更しても、テンプレート側に反映は調べた限り難しそうですね。テンプレート側も変更するいい感じの拡張があるとうれしい…
TypeScriptクラス名変更&ファイル名変更
クラス名変更は、Rename Symbolで可能です。他のtsファイルからの参照もいい感じに変更してくれますね。
ファイル名を変更すると、自動で他のtsファイルからの参照されている部分のファイルパスを変更してくれます。
メソッドや関数に切り出す
VSCode標準のRefactoring機能を活用できます
切り出したい処理を選択→右クリック→Refactoring→Extract to method
移動
TypeScriptファイル移動
クラス名・ファイル名変更と同様に、他のtsファイルからの参照されている部分のファイルパスを変更してくれます。
子コンポーネントとして切り出す
コンポーネントを書いていたら大きくなりすぎて、子コンポーネントとして切り出したい…というときに使えます。
VSCode拡張：Componizer
HTMLの属性が多くなりすぎたので複数行に分割する
VSCode拡張：split html attributes
複数行に分割したい部分を選択して実行します。
コンポーネント関連ファイル（template/style/typescript）をまとめて扱う
コンポーネントのtemplate/style/typescriptの3種類のファイルを1セットで扱えると便利。
コンポーネントの移動
template/style/typescript をがさっとまとめて選択した場合の挙動です。
template, styleについては、typescriptから相対パスで読み込むだけなので、移動する際のパスの変化は気にしなくても大丈夫ですね。
typescriptについては先述のように、VSCodeが他のtsファイルからの参照を変更してくれます。
コンポーネントの削除
template/style/typescript を画面分割して一気に表示：
VSCode拡張：Angular Split
この拡張は、オプションが指定できるのが良いです。
例えば、htmlとtsだけ出すとか、specも出すとか。
template/style/typescript をショートカットキーで行き来する
この手の拡張は似たようなものがいくつかあるので、1つピックアップします。
VSCode拡張：angular2-switcher
おわりに…？
まだ書ききれてないので、随時更新したい。
Discussion