[Atom editor / ...] Hoe format ik css: elke rule op 1 lijn

[? ?]

Of VSCode.

Hoe laat ik dit

code:

.foo
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 120%;
    border: 0;
}
.bar
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 130%;
    border: 0;
}

er uit zien als dit

code:

.foo { border: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 120%; }
.bar { border: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 130%; }

- sorteren van properties, liefst A-Z
- elke css rule op een nieuwe lijn

Als het kan in Atom editor, maar iets anders is ook OK.
Ik vind dit gewoon overzichterlijker en makkelijker te lezen voor mij.

[RobIII]

? ? schreef op dinsdag 28 februari 2017 @ 10:47:
Ik vind dit gewoon overzichterlijker en makkelijker te lezen voor mij.

serieus? Je zou zeggen andersom...
Zoek je niet gewoon een CSS minifier? Die zijn er voor zowat elke IDE en anders wel als build step op te nemen in je build proces.

[ Voor 15% gewijzigd door RobIII op 28-02-2017 12:15 ]

[? ?]

Een minifier plakt alles aaneen toch? Ik wil gewoon elke rule op één lijntje en gesorteerd.
Ik ben misschien raar, maar ik vind het zo overzichtelijker welke css rules ik allemaal heb.
Ik vind inderdaad geen plugin, misschien ben ik echt wel raar

Ik ga iets in c# prullen denk ik.

[n8n]

Zoeken naar /\{\n\s+/g en vervangen door een spatie.

[DJMaze]

Wat doe je dan met:

code:

.foo { border: 0; box-shadow: 0 0 1px #000; font-family: 'Roboto Condensed', sans-serif; font-size: 120%; }
.bar { border: 1px solid #000; font-family: 'Roboto Condensed', sans-serif; font-size: 130%; }

of

code:

.foo, .bar { border: 0; font-family: 'Roboto Condensed', sans-serif; font-size: 120%; }
.bar { font-size: 130%; }

Lekker leesbaar

[ Voor 24% gewijzigd door DJMaze op 28-02-2017 15:13 ]

[asstastic]

Hmm wat is er mis met handmatig coden