リファクタリング

ソースコードのリファクタリングは、ランタイムの動作を変更せずにコードを再構築することにより、プロジェクトの品質と保守性を向上させることができます。Visual Studio Code は、エディター内からコードベースを改善するための メソッドの抽出 や 変数の抽出 などのリファクタリング操作 (リファクタリング) をサポートしています。

たとえば、コードの重複 (メンテナンスの頭痛の種) を避けるためによく使用されるリファクタリングは、メソッドの抽出 リファクタリングです。これは、ソースコードを選択し、それを独自の共有メソッドに引き出すことで、他の場所でコードを再利用できるようにするものです。

リファクタリングは、言語サービスによって提供されます。VS Code には、TypeScript 言語サービスを介した TypeScript および JavaScript のリファクタリングに対する組み込みサポートがあります。他のプログラミング言語のリファクタリングサポートは、言語サービスを提供する VS Code 拡張機能 を介して有効になります。

リファクタリングの UI 要素と VS Code コマンドは、異なる言語間で同じです。この記事では、TypeScript 言語サービスを使用した VS Code でのリファクタリングサポートについて説明します。

コードアクション = クイックフィックスとリファクタリング

VS Code では、コードアクションは、検出された問題 (赤い波線で強調表示) に対してリファクタリングとクイックフィックスの両方を提供できます。カーソルが波線の上にある場合、または選択されたテキスト領域にある場合、VS Code は、コードアクションが利用可能であることを示す電球アイコンをエディターに表示します。コードアクションの電球を選択するか、クイックフィックスコマンド ⌘. (Windows、Linux Ctrl+.) を使用すると、クイックフィックスとリファクタリングのコントロールが表示されます。

クイックフィックスなしでリファクタリングのみを表示する場合は、リファクタリングコマンド (⌃⇧R (Windows、Linux Ctrl+Shift+R)) を使用できます。

注: エディターでのコードアクションの電球を完全に無効にするには、editor.lightbulb.enable 設定 を使用します。クイックフィックスコマンドと ⌘. (Windows、Linux Ctrl+.) キーボードショートカットを使用して、クイックフィックスを開くことはできます。

保存時のコードアクション

editor.codeActionsOnSave 設定を使用すると、ファイルを保存するときに自動的に適用されるコードアクションのセットを構成できます。たとえば、インポートを整理するなどです。ワークスペースファイルとアクティブな拡張機能に基づいて、IntelliSense は利用可能なコードアクションのリストを提供します。

editor.codeActionsOnSave に対して 1 つ以上のコードアクションを構成できます。コードアクションは、リストされている順序で実行されます。

次の例は、保存時に複数のコードアクションを構成する方法を示しています

// On explicit save, run sortImports source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.organizeImports": "always",
    "source.sortImports": "explicit",
},

次の値は、各コードアクションでサポートされています

• explicit (デフォルト): 明示的に保存されたときにコードアクションをトリガーします
• always: 明示的に保存されたとき、およびウィンドウまたはフォーカス変更からの自動保存時にコードアクションをトリガーします
• never: 保存時にコードアクションをトリガーしません

リファクタリングアクション

メソッドの抽出

抽出するソースコードを選択し、ガター内の電球を選択するか、(⌘. (Windows、Linux Ctrl+.)) を押して、利用可能なリファクタリングを表示します。ソースコードフラグメントは、新しいメソッド、またはさまざまなスコープの新しい関数に抽出できます。抽出リファクタリング中には、意味のある名前を入力するように求められます。

変数の抽出

TypeScript 言語サービスは、現在選択されている式に対して新しいローカル変数を作成するための const への抽出 リファクタリングを提供します

クラスを操作する場合、値を新しいプロパティに抽出することもできます。

シンボルの名前変更

名前の変更は、ソースコードのリファクタリングに関連する一般的な操作であり、VS Code には独立した シンボルの名前変更 コマンド (F2) があります。一部の言語では、ファイル間でシンボル名を変更することをサポートしています。F2 を押し、目的の新しい名前を入力して、Enter を押します。すべてのファイルにわたるシンボルのすべてのインスタンスの名前が変更されます。

リファクタリングプレビュー

リファクタリングを適用すると、変更はコードに直接実装されます。リファクタリングプレビューパネルでは、リファクタリング操作によって適用される変更をプレビューできます。

リファクタリングプレビューパネルを開くには、コードアクションコントロールを開き、リファクタリングの上にカーソルを置いて、⌘Enter (Windows、Linux Ctrl+Enter) を押します。

リファクタリングプレビューパネルで変更を任意に選択して、リファクタリング操作の結果である変更の差分ビューを取得できます。

承認または破棄コントロールを使用して、提案されたリファクタリングの変更を適用またはキャンセルします。

オプションで、リファクタリングプレビューパネルで提案された変更の一部を選択解除することにより、リファクタリングの変更を部分的に適用できます。

コードアクションのキーボードショートカット

editor.action.codeAction コマンドを使用すると、特定のコードアクションのキーボードショートカットを構成できます。たとえば、このキーボードショートカットは、関数の抽出 リファクタリングコードアクションをトリガーします

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function"
  }
}

コードアクションの種類は、拡張機能によって、拡張された CodeActionProvider API を使用して指定されます。種類は階層構造になっているため、"kind": "refactor" はすべてのリファクタリングコードアクションを表示しますが、"kind": "refactor.extract.function" は 関数の抽出 リファクタリングのみを表示します。

上記のキーボードショートカットを使用すると、単一の "refactor.extract.function" コードアクションのみが利用可能な場合、それは自動的に適用されます。複数の 関数の抽出 コードアクションが利用可能な場合、VS Code はそれらを選択するためのコンテキストメニューを表示します

apply 引数を使用すると、コードアクションが自動的に適用される方法とタイミングを制御することもできます

{
  "key": "ctrl+shift+r ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.function",
    "apply": "first"
  }
}

apply の有効な値

• first - 常に最初に利用可能なコードアクションを自動的に適用します。
• ifSingle - (デフォルト) コードアクションが 1 つしかない場合は自動的に適用します。それ以外の場合は、コンテキストメニューを表示します。
• never - 単一のコードアクションのみが利用可能な場合でも、常にコードアクションコンテキストメニューを表示します。

コードアクションのキーボードショートカットが "preferred": true で構成されている場合、優先されるクイックフィックスとリファクタリングのみが表示されます。優先されるクイックフィックスは、根本的なエラーに対処しますが、優先されるリファクタリングは最も一般的なリファクタリングの選択肢です。たとえば、複数の refactor.extract.constant リファクタリングが存在し、それぞれがファイル内の異なるスコープに抽出される可能性がありますが、優先される refactor.extract.constant リファクタリングは、ローカル変数に抽出されるものです。

このキーボードショートカットは、"preferred": true を使用して、選択されたソースコードを常にローカルスコープの定数に抽出しようとするリファクタリングを作成します

{
  "key": "shift+ctrl+e",
  "command": "editor.action.codeAction",
  "args": {
    "kind": "refactor.extract.constant",
    "preferred": true,
    "apply": "ifSingle"
  }
}

リファクタリングを含む拡張機能

リファクタリングをサポートする拡張機能は、VS Code マーケットプレース で見つけることができます。拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、検索ボックスに「refactor」と入力します。次に、インストール数または評価でソートして、どの拡張機能が人気があるかを確認できます。

ヒント: 上記の拡張機能は動的にクエリされます。上記の拡張機能タイルを選択して、説明とレビューを読み、最適な拡張機能を決定してください。

次のステップ

• 入門ビデオ - コード編集 - コード編集機能に関する入門ビデオをご覧ください。
• コードナビゲーション - VS Code を使用すると、ソースコード内をすばやく移動できます。
• デバッグ - VS Code でのデバッグについて学びます。

よくある質問

コードにエラーがあるのに電球が表示されないのはなぜですか?

電球 (コードアクション) は、カーソルがエラーを示すテキスト上にある場合にのみ表示されます。テキストにカーソルを合わせるとエラーの説明が表示されますが、クイックフィックスとリファクタリングの電球を表示するには、カーソルを移動するか、テキストを選択する必要があります。