ReSharper 2019.2 Help

Code Inspection and Quick-Fixes in CSS

The key features of ReSharper's code analysis are also supported in CSS. You can find the detailed information on these features in the corresponding topics of the Code Analysis section. In the main topic of the section, you can also find the feature matrix and check what exactly is supported in CSS.

In this topic, you can find some examples of using code analysis features in CSS.

Code Inspection

ReSharper's static code analysis can detect more than 150 different errors and problems in CSS code.

The analysis is performed by applying code inspections to the current document or in any specified scope.

ReSharper: CSS error highlighting

To look through the list of available inspections for CSS, open the Code Inspection | Inspection Severity page of ReSharper options (Alt+R,,O), and then expand the CSS node.

Examples of Quick-fixes

Create style

If there is a class name that does not have the corresponding style rule, ReSharper highlights such name and provides the following quick-fix.

ReSharper: Create style quick-fix in CSS
After applying the quick-fix, the corresponding class selector and empty declaration block are inserted.
ReSharper: Create style quick-fix in CSS

Extract style

If there is a style attribute that contains style information for the current element and there is a class attribute with a name, that is not used as a class selector in the corresponding style sheet, then ReSharper detects such situation and offers the following quick-fix.

ReSharper: Extract style quick-fix in CSS
After applying the quick-fix, the appropriate style rule is added to the corresponding style sheet.

Viewing CSS hierarchy

ReSharper comes with a handy view that allows you to see the whole hierarchy of css selectors. For each selector in the hierarchy you can quickly view its definition.

ReSharper: CSS hierarchy

To build a hierarchy, set the caret at a style selector, and choose ReSharper | Inspect | Hierarchies in the main menu, or press Ctrl+Alt+H.

ReSharper can also build the CSS hierarchy internally, showing you which styles override other styles and allowing you to navigate up the hierarchy. To toggle this feature, use the Build CSS style hierarchy checkbox on the Code Editing | CSS | Inspections page of ReSharper options.

CSS hierarchy gutter mark

Making ReSharper ignore specific code

ReSharper allows you to ignore specific files, folders and file masks in different ways. You can configure ignored files on the following options pages:

  • Code Inspection | Settings to exclude files, folders, and masks from code inspection.

  • Code Inspection | Generated Code to partly disable code inspection for generated code.

  • Environment | Search & Navigation to specify files and folders that should be ignored by Search by Name commands.

  • Code Editing | Third-Party Code to add C++, JavaScript, TypeScript, CSS, HTML and JSON files, folders and wildcards to be treated either as 'skipped' or 'library'. ReSharper will completely ignore 'skipped' files, and treat 'library' files as read-only — indexed for navigation, but no inspections, quick-fixes and refactorings.

Last modified: 18 November 2019
CSSCoding Assistance