リファクタリング¶
VS Code にあるリファクタリングに関係する機能について記す。これらもエディターで有効となっているプログラミング言語用拡張機能次第であることがほとんどだ。VS Code が組み込みで用意しているのは、JavaScript/TypeScript のリファクタリング機能だ。
リファクタリング用インターフェイスおよびコマンドは、プログラミング言語によって異ならないように設計されている。
Code Actions¶
Todo
摘出系と識別子一括置換については把握しているので述べるが、他にも「らしい」機能があるはずだ。
クイック修正¶
まずいコードを書くと、当該箇所に波線が描画され、これを含む行の左側に電球アイコンが表示される。以下に示す操作のいずれかにより、問題点や改善方法を列挙した Quick Fix… ポップアップが出現する。
エディターに表示されている電球アイコンをクリックする
波線にキャレットを合わせて Ctrl + . を押す
VS Code が機械的に修正できる不具合については、項目のクリック一発で当該箇所付近が修正される。修正項目によっては、エディターの内容全体を修正するものさえある。
電球アイコンを出現させたくない場合には、設定項目 editor.lightbulb.enable をカスタマイズすることだ。これを無効にすると、ショートカットキーを押すことしでしかクイック修正ポップアップが出現しない。
コマンド |
キーバインド |
操作 |
|---|---|---|
Ctrl + . |
クイック修正 |
|
Ctrl + Shift + R |
リファクタリング表示 |
クイック修正を表示せずにリファクタリングしか表示したくない場合は Refactor コマンドを使用するといい。
メソッドや変数として摘出する¶
ソースコードの断片を選択してから上述のいずれかの方法でクイック修正コマンドを実行すると、利用可能なリファクタリング一覧がポップアップに出現する。メソッドや変数を改めて定義するコードが生成される。
説明のための JavaScript コードを次に示す：
class Circle {
constructor(radius){
this.radius = radius;
}
calcArea() {
return 2 * 3.14 * this.radius;
}
}
メソッド内の 2 * 3.14 を選択してクイック修正ポップアップを表示させると、
Extract … というグループ項目がある。この場合には定数としてリファクタリングするための次のコマンド二つが少なくとも含まれているはずだ：
Extract to constant in enclosing scope
Extract to constant in global scope
いずれかを実行すると（この場合は後者が自然）、定数識別子の入力を促され、その確定後、コマンド名の示すようにコードが修正される。例えば TAU と入力すると、次の変更が発生する：
2 * 3.14がTAUに置換される。クラス宣言の前に
const TAU = 2 * 3.14;が追加される。
さらにメソッドとして括り出そうというコマンド群も同時に現れる：
Extract to inner funtion in method ‘calcArea’
Extract to method in class ‘Circle’
Extract to funtion in global scope
いずれかを実行すると、定数摘出のときと同様の手順を経て自動的コード変更が発生する。
以上は JavaScript の編集例だが、静的型付け言語になるとインターフェイスや型の摘出に対応したコマンドが利用可能になる。それについては言語向け拡張機能の詳細を当たること。
キーバインドのカスタマイズについては キーバインド を参照。
識別子の名前を変更する¶
VS Code の基本的コマンドである Select All Occurrences 系コマンドで特定の文字列をすべて選択状態にしてから、新しい名前をタイプするという方法もあったが、この場合にはより適切なのは Rename Symbol コマンドだ。エディターをまたがって文字列を置換するし、リテラル文字列のマッチを無視したりと、気が利いている。キーバインドも Ctrl + Shift + L を押すよりは F2 一つを押すだけで済む。
