ReSharper
 
2022.3
Shortcuts: Visual Studio
Get ReSharper
You are viewing the documentation for an earlier version of ReSharper.
  1. Code style and cleanup
  2. Use EditorConfig
  3. EditorConfig properties by language and category
  4. EditorConfig properties for Css: Code Layout

EditorConfig properties for Css: Code Layout

Last modified: 28 December 2022

tip

Formatting preferences listed on this page can be also configured visually, on the Code Editing | Css | Formatting Style | Code Layout page of ReSharper options (Alt+R, O).

Code layout

Declarations

Property names:

[resharper_]css_declarations_style, [resharper_]declarations_style

Possible values:

  • separate_lines_for_nonsingle: On separate lines if not simple

  • separate_lines: On separate lines

  • same_line: Single line formating

Examples:

separate_lines_for_nonsingle

.blue, .link { color: blue; }

#error, .error {
    color: red;
    backgroup-color: white;
}

separate_lines

.blue, .link { color: blue; }

#error, .error {
    color: red;
    backgroup-color: white;
}

same_line

.blue, .link { color: blue; }#error, .error {
                                 color: red;
                                 backgroup-color: white;
                             }

Media query

Property names:

[resharper_]css_media_query_style, [resharper_]media_query_style

Possible values:

  • same_line: Single line formating

  • separate_lines: On separate lines

Examples:

same_line

@media (ratio: 4/3), (ratio: 3/4) {
    .blue { color: blue; }
}

separate_lines

@media
(ratio: 4/3),
(ratio: 3/4) {
    .blue { color: blue; }
}

Selector

Property names:

[resharper_]css_selector_style, [resharper_]selector_style

Possible values:

  • same_line: Single line formating

  • separate_lines: On separate lines

Examples:

same_line

.blue, .link { color: blue; }

separate_lines

.blue,
.link { color: blue; }

Properties

Property names:

[resharper_]css_properties_style, [resharper_]properties_style

Possible values:

  • separate_lines_for_nonsingle: On separate lines if not simple

  • separate_lines: On separate lines

  • same_line: Single line formating

Examples:

separate_lines_for_nonsingle

.blue, .link { color: blue; }

#error, .error {
    color: red;
    backgroup-color: white;
}

separate_lines

.blue, .link {
    color: blue;
}

#error, .error {
    color: red;
    backgroup-color: white;
}

same_line

.blue, .link { color: blue; }

#error, .error { color: red; backgroup-color: white; }

Braces

Property names:

[resharper_]css_brace_style, [resharper_]brace_style

Possible values:

  • end_of_line: At the end of line (K&R style)

  • end_of_line_no_space: At the end of line (no space)

  • next_line: At next line (BSD style)

  • next_line_shifted: At next line indented (Whitesmiths style)

  • next_line_shifted_2: At next line indented 2 (GNU style)

Examples:

end_of_line

@media (ratio: 4/3) {
    .blue, .link { color: blue; }

    #error, .error {
        color: red;
        backgroup-color: white;
    }
}

end_of_line_no_space

@media (ratio: 4/3){
    .blue, .link{ color: blue; }

    #error, .error{
        color: red;
        backgroup-color: white;
    }
}

next_line

@media (ratio: 4/3)
{
    .blue, .link
    {
        color: blue;
    }

    #error, .error
    {
        color: red;
        backgroup-color: white;
    }
}

next_line_shifted

@media (ratio: 4/3)
    {
    .blue, .link
        {
        color: blue;
        }

    #error, .error
        {
        color: red;
        backgroup-color: white;
        }
    }

next_line_shifted_2

@media (ratio: 4/3)
    {
        .blue, .link
            {
                color: blue;
            }

        #error, .error
            {
                color: red;
                backgroup-color: white;
            }
    }