ReSharper 2021.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 を使用すると、特定のファイル、フォルダー、ファイルマスクをさまざまな方法で無視できます。無視するファイルは、次のオプションページで設定できます。

  • コードインスペクション | 無視されたコードは、コードインスペクションからファイル、フォルダー、マスクを除外します。

  • コードインスペクション | 生成されたコードは、生成されたコードのコードインスペクションを部分的に無効にします

  • 環境 | 検索とナビゲーションを使用して、名前で検索コマンドで無視する必要があるファイルとフォルダーを指定します。

  • コード編集 | サードパーティコードは C++、JavaScript、TypeScript、CSS、HTML、JSON ファイル、フォルダー、ワイルドカードを追加して、「スキップ」または「ライブラリ」として扱います。ReSharper は「スキップされた」ファイルを完全に無視し、「ライブラリ」ファイルを読み取り専用として扱います。ナビゲーション用にインデックス付けされていますが、インスペクションクイックフィックスリファクタリングはありません。

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

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

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

関連ページ:

コード解析 | ReSharper

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

設計時にコードの問題を検出する | ReSharper

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

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

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

コードインスペクション設定の構成 | ReSharper

設計時コードインスペクションを構成する:デフォルトでは、ReSharper は、サポートされている言語に対応するすべてのファイルで設計時コードインスペクションを有効にします。必要に応じて、無効にすることができます。設計時コードインスペクションが有効かどうかに関係なく、コードインスペクションは常に特定のスコープで実行できます。メインメニューからを選択するか、Alt+R O を押してから、左側のを選択します。設計時コードインスペクションを切り替えるには、コード分析を有効にするチェックボックスを使用し...

CSS のコーディング支援

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