ReSharper 2024.3 ヘルプ

CSS のリファクタリング

CSS スタイルのリファクタリングを使用すると、CSS スタイルをスタイルシートと HTML ファイル間ですばやく移動したり、新しいスタイルシートをその場で作成してそこに既存のスタイルを移動したりできます。数回クリックするだけで、CSS クラスとその使用箇所の名前を変更することもできます。

リファクタリングを実行する

  1. シンボルにキャレットを置き、リファクタリングするコードフラグメントを選択するか、ツールウィンドウ内の項目を選択します。

  2. 以下のいずれか 1 つを実行します:

    • メインメニューから ReSharper | リファクタリングを選択し、目的のリファクタリングを選択します。このメニューで使用できるリファクタリングのリストは、現在のコンテキストによって異なります。ReSharper がコンテキストのリファクタリングを提案できない場合、メニュー全体が無効になります。

    • エディター、ファイル構造ウィンドウ、またはその他の ReSharper ウィンドウで、変換する項目を右クリックし、コンテキストメニューからリファクタリングを選択してから、必要なリファクタリングを選択します。

    • メインメニューから ReSharper | リファクタリング | リファクタリングを選択するか、Control+Shift+R を押して、適用可能なリファクタリングのリストを表示し、そのうちの 1 つを選択します。選択項目のコンテキストメニューでリファクタリングを選択することもできます。

    • 特定のリファクタリングに割り当てられているデフォルトのキーボードショートカットを使用するか、お気に入りのリファクタリングコマンドにカスタムショートカットを割り当てます。

  3. 選択したリファクタリングにユーザー入力が必要な場合は、リファクタリングウィザードが開きます。ウィザードのダイアログはモーダルではないため、ウィザードが開いている間にコードを編集できます。

    リファクタリングアクションをロールバックするために、ウィザードにはオプション元に戻すを有効にするには、変更のあるすべてのファイルを編集用に開きますが用意されています。このオプションを選択すると、ReSharper は変更されたすべてのファイルを新しいエディタータブで開き、リファクタリングをロールバックできます。この場合、変更を自分で保存する必要があります。このオプションが選択されていない場合、ReSharper は変更されたファイルを開かずに自動的に保存します。

  4. リファクタリング操作によってコードの競合 (名前の重複、可視性の競合など) が発生する場合、ウィザードはリファクタリングを適用する前の最後のステップで競合のリストを表示します。一部の競合については、ウィザードがクイックフィックスを提案することもできます。詳細については、リファクタリングの競合を解決するを参照してください。

一部のリファクタリングは、エディターでコードを変更した直後に使用できます。詳細については、インプレースリファクタリングを参照してください。

スタイル抽出

このリファクタリングを使用すると、CSS ファイル内の別のルールセットまたは HTML の style 属性で定義された既存のルールから CSS ルールセットを作成できます。このリファクタリングは、CSS ファイルの CSS ルールセットや HTML ファイルの style タグ、HTML ファイルの style 属性のどこにでも置くことができます。開いているスタイル抽出ダイアログでは、チェックボックスを使用して、抽出するスタイル宣言を指定します(オプションで、リファクタリングを呼び出す前に希望の宣言を選択できます)。必要に応じて、新しいルールセットのセレクタを変更します。

Extracting CSS styles to a new rule-set

リファクタリングを適用した後、抽出されたルールセットは同じファイルに作成されます。HTML style 属性からインラインスタイルのルールを抽出する場合、抽出されたルールセットは style タグに配置されます。抽出したルールセットを別のファイルに配置する場合は、後で移動リファクタリングを使用します。

移動

このリファクタリングでは、CSS ルールセットを別のファイルに移動できます。このリファクタリングは、CSS ファイルの CSS ルールセットまたは HTML ファイルの style タグのどこにでもキャレットがある場合に呼び出すことができます。開いている移動ダイアログで、ターゲットファイルを指定するか、新しい CSS ファイルの名前を入力し、作成をクリックします。必要に応じて、インポート指示を挿入するを選択して、ルールセットが移動されるファイルの URL を @import に追加します。

Moving CSS rule-set to another file

リファクタリングを終了するには、次へをクリックします。

専用のショートカット F6 を使用してこのリファクタリングを呼び出すこともできます。

名前変更

CSS でも利用可能な Rename リファクタリングは、リファクタリングをどこで呼び出すか、宣言や使用箇所、CSS ファイルやマークアップファイルで、クラスセレクタや ID セレクタの名前を変更することができます。

開いた名前変更ダイアログで、クラスまたは ID の新しい名前を指定し、次へをクリックします。デフォルトでは、ReSharper は名前変更されたアイテムのすべての使用箇所を見つけ、リファクタリングウィザードの次のページに表示します。必要に応じて、名前を変更したくない用途の横にあるチェックボックスをオフにすることができます。

専用のショートカット F2 を使用してこのリファクタリングを呼び出すこともできます。

関連ページ:

コンテキストアクション

コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変更、null をチェックするコードの生成、'foreach' の 'for' への変換などの小さな変更をすばやく導入できます。ReSharper は、サポートされているすべての言語で数百のコンテキストアクションを提供します。完全なリストは、ReSharper オプション Alt+R, O のページとコ...

構造別にファイルを移動する

ファイル構造ウィンドウ:ReSharper では、ファイル構造ウィンドウを使用して現在のドキュメントの構造を移動でき、大きなファイルでのナビゲーションが大幅に簡素化されます。ウィンドウはエディターと同期されます。別のエディタータブに切り替えると、ウィンドウには対応するファイルの構造が表示されます。ファイル構造ウィンドウを開いて使用するを押すか、メインメニューからを選択します。あるいは、を押して、ポップアップでコマンド名を入力して、そこで選択することもできます。現在のドキュメントの内容はツリー

デフォルトのキーボードショートカットスキーム

すべての ReSharper アクションは、キーボードショートカットで呼び出すことができます。ほとんどのアクションには既定のショートカットがあり、そのまま使用できます。残りのアクションでは、必要に応じて、好きなショートカットキーを割り当てることができます。ReSharper は、2 つのデフォルトのキーボードショートカットスキームを提供します。Visual Studio — このスキームは、Visual Studio 独自のキーボードショートカットとの競合を最小限に抑えることを目的としています。I...

キーボードショートカットを設定する

すべての ReSharper アクションは、キーボードショートカットで呼び出すことができます。ほとんどのアクションには既定のショートカットがあり、そのまま使用できます。残りのアクションでは、必要に応じて、好きなショートカットキーを割り当てることができます。ReSharper は、2 つのデフォルトのキーボードショートカットスキームを提供します。Visual Studio — このスキームは、Visual Studio 独自のキーボードショートカットとの競合を最小限に抑えることを目的としています。I...

リファクタリングの競合を解決する

ReSharper のすべてのリファクタリングはソリューション全体に適用されるため、多くのファイルが影響を受ける可能性があり、一部の変更は既存のコードと競合する可能性があります。競合がある場合、ReSharper はそれらを検出し、リファクタリングウィザードの最後のページに競合のリストを表示します。例: 安全な削除リファクタリングをメソッドに適用するときに表示されるいくつかの競合を次に示します。競合には 2 つの型があります。コンパイルを中断することなく削除できる使用箇所は、アイコンでマークされて...

インプレースリファクタリング

一部のリファクタリングは、コマンドを呼び出さずに適用できます。エディターでコードを変更するだけで十分です。変更がコードをリファクタリングするためのインテンションである可能性があることを ReSharper が検出すると、変更されたコードの周囲に灰色の境界線が表示され、対応するアクションインジケーターが左側に表示されます。このアクションを使用して、ソリューション全体にリファクタリングを適用できます。以下のリファクタリングがその場で利用可能です: 名前変更:エディターで宣言の権利を変更し、クイックフ...