aeschli / vscode-css-formatter

CSS Formatter for VSCode

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

customizing css document formating behaviors

myusrn opened this issue · comments

Is it possible to customize this css document formatting extension's alt+shift+f triggered formatting behaviors such that . . .

  1. reformatting of decedent selectors [ .someclass > * ] doesn't uses spaces vs stripping them out as it currently does [ .someclass>* ] ?

  2. reformatting of inline comments [ flex: 1; /* using this to achieve blahblah / ] doesn't kick the inline comment to its own separate line [ [ flex: 1; \n\r / using this to achieve blahblah */ ] ?

Alternatively are the above two reformatting behaviors based on some css document formatting standards that address browser parsing issues or following some well accepted standard and should be kept as is?

I would like to know if there is a suggested way to change the formatting from:

css{
}

to this:

css
{
}
commented

Hello! I appreciate your work ⭐ and want to know how to set formatter to wrap line in desired colon position.
for the moment i have formatted css as follow
body #skills>h2:nth-child(1), body div.education__content:nth-child(3)>div:nth-child(2)>span:nth-child(2), body div.education__content:nth-child(2)>div:nth-child(2)>span:nth-child(2), body div.education__content:nth-child(1)>div:nth-child(2)>span:nth-child(2), body #education>div>div:nth-child(3)>div.education__data.bd-grid>h3, body div.education__content:nth-child(2)>div:nth-child(2)>h3:nth-child(1), body #education>div>div:nth-child(1)>div.education__data.bd-grid>h3, body #education>h2, body #profile>p, body section.profile.section>h2, body .home__data>h3:nth-child(3), body main.l-main.bd-container div#area-cv.resume div.resume__left section#home.home div.home__container.section.bd-grid div.home__data.bd-grid h1.home__title, body main.l-main.bd-container div#area-cv.resume div.resume__left section.social.section h2.section-title, body #home>div>div.bd-grid.home__address>#text {

it goes as a single line up to 900-th column position that is not a good formatting for me/
could i have a line wrap after each single , or simple at specified column i.e. 120 or 79 position?

@tst32 That CSS selector tells me you're definitely doing things in a really unmaintainable way. The slightest changes to your HTML will make your selectors fail serially.

commented

That was a fast scratch from chrome dev tools...
You are right.
Let me note about issue subject - the solution is to use js-beautify --type css -r mystyle.css right way
de gustibus non est disputandum