EditorConfig properties for Css: Code Layout

Last modified: 26 May 2024

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 formatting

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 formatting

  • 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 formatting

  • 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 formatting

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;
            }
    }