CODEWITHSUNDEEP
visual-studiosass
Andrew Corrigan
Andrew Corrigan

Reputation: 1057

Prevent Visual Studio from collapsing SCSS maps onto single line (VS2022)

I'm having some grief with Visual Studio trying to be smart and format things - specifically SCSS files.

At first, I thought this was to do with the CodeMaid extension; so I turned off, to no avail.

Essentially my issue is when you have an SCSS block like this:

$themes: (
    dark:( 
        'Franklin-Blue': #000000,
        'Light-Blue': #0d0d0d,
        'Pale-Blue': #2c2f33,
        'Pure-White': #ffffff,
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a, 
        'body-color': #000000,
        'text-color': #ffffff, 
        'bold-text': #7289da,
        'White-Blue': #7289da
    ), 
    light:( 
        'Franklin-Blue': #1d1c4d,
        'Light-Blue': #4e5d94,
        'Pale-Blue': #7289da,
        'Pure-White': #ffffff, 
        'VLight-Grey': #99aab5,
        'Middle-Grey': #2c2f33,
        'Dark-Grey': #23272a,
        'body-color': #ffffff,
        'text-color': #000000, 
        'bold-text': #000000, 
        'White-Blue': #ffffff
    ) 
);

You want it to stay like that, but Visual Studio formats it to:

$themes: ( dark:( 'Franklin-Blue': #000000, 'Light-Blue': #0d0d0d, 'Pale-Blue': #2c2f33, 'Pure-White': #ffffff, 'VLight-Grey': #99aab5, 'Middle-Grey': #2c2f33, 'Dark-Grey': #23272a, 'body-color': #000000, 'text-color': #ffffff, 'bold-text': #7289da, 'White-Blue': #7289da ), light:( 'Franklin-Blue': #1d1c4d, 'Light-Blue': #4e5d94, 'Pale-Blue': #7289da, 'Pure-White': #ffffff, 'VLight-Grey': #99aab5, 'Middle-Grey': #2c2f33, 'Dark-Grey': #23272a, 'body-color': #ffffff, 'text-color': #000000, 'bold-text': #000000, 'White-Blue': #ffffff ) );

How do I stop it from wrapping those blocks onto a single line?

Upvotes: 4

Views: 235

Answers (1)

peter_the_oak
peter_the_oak

Reputation: 3710

Unfortunately I don't find any setting in the preferences for the SCSS editor that changes this behaviour. But, at least you can cheat it by adding one line comments:

$fontSizesDisplay: ( //
"--font-size-display-1": $rcc-font-size-display-1, //
"--font-size-display-2": $rcc-font-size-display-2, //
"--font-size-display-3": $rcc-font-size-display-3, //
"--font-size-display-4": $rcc-font-size-display-4, //
"--font-size-display-5": $rcc-font-size-display-5, //
"--font-size-display-6": $rcc-font-size-display-6, //
);

I know it is ugly but like this, VS 2022 won't collapse the lines :-)

Edit: Turns out that at least Scout can handle ending commas. So no need to drop the comma on the last line.

Upvotes: 2

Related Questions