リファクタリング

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

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

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

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

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

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

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

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

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

editor.codeActionsOnSave 設定を使用すると、ファイルを保存するときに自動的に適用される一連のコードアクションを構成できます (例: import の整理)。ワークスペースのファイルとアクティブな拡張機能に基づいて、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 には独立した Rename Symbol コマンド (F2) があります。一部の言語では、ファイル間のシンボルの名前変更をサポートしています。F2 を押し、新しい希望の名前を入力して Enter を押します。すべてのファイルにわたるシンボルのすべてのインスタンスの名前が変更されます。

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

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

Refactor Preview パネルを開くには、コードアクションコントロールを開き、リファクタリングの上にカーソルを合わせ、⌘Enter (Windows、Linux Ctrl+Enter) を押します。

Refactor Preview パネルでいずれかの変更を選択すると、リファクタリング操作の結果として生じる変更の差分ビューが表示されます。

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

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

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

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

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

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

上記のキーボードショートカットを使用すると、"refactor.extract.function" コードアクションが 1 つしか利用できない場合は自動的に適用されます。複数の 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 - コードアクションが 1 つしか利用できない場合でも、常にコードアクションのコンテキストメニューを表示します。

コードアクションのキーボードショートカットが "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 Marketplace で見つけることができます。拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) に移動し、検索ボックスに「refactor」と入力します。その後、インストール数や評価で並べ替えて、どの拡張機能が人気かを確認できます。

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

次のステップ

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

よくある質問

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

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