How do you disable code reformatting for a particular css propertey

I am using Css Grid with the below example

.grid {
display: grid;
grid-template-areas: "header header header"
"sidebar content right"
"footer footer footer"
}

 

One of the properties grid template-areas I do not want to reformat when running code format.  The result is

grid-template-areas: "header header header" "sidebar content right" "footer footer footer"

Can I exclude just the property grid-template-areas from being reformatted?

5 comments
Comment actions Permalink

You can use formatter markers here:

- in Settings | Editor | Code Style, tick the Enable formatter markers in comments checkbox

- surround your code with formatter comments:

.grid {
display: grid;
/*@formatter:off*/
grid-template-areas: "header header header"
"sidebar content right"
"footer footer footer"
/*@formatter:on*/
}

We have a feature request for providing special formatting for grid-layout properties, https://youtrack.jetbrains.com/issue/WEB-10013. But it can't be expected in the near future:(

2
Comment actions Permalink

Excellent solution!! Thanks.

1
Comment actions Permalink

Thanks, Elena! Worked like a charm :)

1
Comment actions Permalink

Is there a way to globally exclude grid-template-areas: ?
Or could we have more granular controls through the code style settings?

0
Comment actions Permalink

there is no way to exclude certain code fragments globally.

For more granular controls, please vote for https://youtrack.jetbrains.com/issue/WEB-10013

0

Please sign in to leave a comment.