ReSharper 2024.1 ヘルプ

コードインスペクションと CSS のクイックフィックス

ReSharper のコード解析の主な機能は、CSS でもサポートされています。これらの機能の詳細については、コード解析の該当するトピックを参照してください。このセクションのメイントピックでは、フィーチャマトリックスを見つけて、CSS で正確にサポートされているものを確認することもできます。

このトピックでは、CSS のコード解析機能の使用例をいくつか見ていきます。

コードインスペクション

ReSharper の静的コード解析では、CSS コードの 150 以上の異なるエラーと問題を検出できます。

分析は、コードインスペクション現在の文書または指定された範囲に適用することによって実行されます

ReSharper: CSS error highlighting

CSS で使用可能なインスペクションのリストを確認するには、ReSharper オプション Alt+R, Oコードインスペクション | インスペクション重大度ページを開き、CSS ノードを展開します。

クイックフィックスの例

スタイルを作成する

対応するスタイル規則を持たないクラス名がある場合、ReSharper はそのような名前をハイライトして、次のようなクイックフィックスを提供します。

ReSharper: Create style quick-fix in CSS

クイックフィックスを適用した後、対応するクラスセレクタと空の宣言ブロックが挿入されます。

ReSharper: Create style quick-fix in CSS

スタイル抽出

現在の要素のスタイル情報を含む style 属性があり、対応するスタイルシートのクラスセレクタとして使用されていない名前の class 属性がある場合、ReSharper はそのような状況を検出して次のような迅速な修正を提供します。

ReSharper: Extract style quick-fix in CSS

クイックフィックスを適用した後、適切なスタイルルールが対応するスタイルシートに追加されます。

CSS 階層の表示

ReSharper には、css セレクターの階層全体を見ることができる便利なビューが付属しています。階層内のセレクタごとに、その定義をすばやく表示できます。

ReSharper: CSS hierarchy

階層を構築するには、スタイルセレクターにキャレットを置き、メインメニューで ReSharper | インスペクション | 階層を選択するか、Control+Alt+H を押します。

ReSharper は、CSS 階層を内部的に構築し、どのスタイルが他のスタイルをオーバーライドするかを示し、階層を上に移動できるようにすることもできます。この機能を切り替えるには、ReSharper オプションのコード編集 | CSS | インスペクションページの CSS スタイル階層を構築するチェックボックスを使用します。

CSS hierarchy gutter mark

ReSharper に特定のコードを無視させる

ソリューションのコードの一部をコード分析、ナビゲーション、その他の機能から除外するために、ReSharper では特定のファイル、フォルダー、ファイルマスクをさまざまな方法で無視するを使用できます。

パフォーマンスを向上させるために、ReSharper は、参照がなく、おそらく誤ってソリューションに追加された大きな Web ファイルを自動的に検出し、無視し始めます。

そのようなファイルのいずれかが検出された場合、必要に応じてそれらのファイルの無視を停止できる通知が表示されます。ReSharper オプションのコード編集 | サードパーティコードページでも、自動的に無視されるすべてのファイルを見つけることができます。

自動検出を停止し、大きな未使用の Web ファイルを無視するには、ReSharper オプションのコード編集 | サードパーティコードページでパフォーマンスに影響を与える可能性のある Web ファイルを検索し、インデックス作成から除外しますチェックボックスをオフにします。

関連ページ:

コード解析

ReSharper は、エディター内の単一のステートメントから、ソリューション全体のアーキテクチャまで、さまざまなレベルのコードを分析できます。コードの問題を見つける:ReSharper は、C#、VB.NET、XAML、XML、ASP.NET、ASP.NET MVC、Razor、JavaScript、TypeScript、HTML、CSS、ResX で 2500 を超えるコードインスペクションを適用することにより、静的コード分析(コードインスペクションとも呼ばれます)を提供します。スクリプト...

設計時にコードの問題を分析する

ReSharper は、エディターでコードファイルを開くとすぐに分析を開始し、最後まで編集を続けます。検出されたすべてのコードの問題は、重大度に従ってエディターでハイライトされます。問題のマップは、エディターウィンドウの右側のマーカーバーにも表示されます。ここでは、ファイルのステータスを即座に確認し、マークをクリックして特定のコードの問題に移動できます。デザインタイムインスペクションの機能:ReSharper によって実行されるデザインタイムコードインスペクションを説明するために、エディターに...

特定の範囲でコードの問題を見つける

設計時コードインスペクションは、エディターでコーディングしたり、特定のファイルを見直したりするときに役立ちます。ただし、ReSharper を使用すると、ソリューション全体または狭い範囲でスタティックコード分析を実行し、結果をフレンドリーな視点で調べることもできます。必要に応じてインスペクション結果を共有することもできます。開始コードインスペクション:ソリューション、プロジェクト、カスタムスコープのコードをインスペクションするソリューションワイドのインスペクションの結果(たとえば、未使用のパブ...

CSS のコーディング支援

ReSharper のコーディング支援機能のほとんどは、CSS でもサポートされています。これらの機能の詳細については、コーディング支援の該当するトピックを参照してください。このセクションのサブジェクトでは、フィーチャマトリックスを見つけて、CSS で正確にサポートされているものを確認することもできます。このトピックでは、CSS のコーディング支援機能の使用例をいくつか見つけることができます。構文のハイライト:ReSharper は、セレクター、プロパティ、プロパティの値、アットルール (やな...