How to prevent auto-format from creating new line?

Technical Q&A
1

I use VSCode to customise a default Shopify theme (Dawn) and installed Shopify Liquid plugin.

It formats on save but it putting px on a new line, preventing the style from being effective.

The code below is one of the examples.

.section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}
    px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}
    px;
 }

I guess it is not due to printWidth but rather using moustache in the style as it always happens when I use it within style tag but I don’t know how to fix this issue.

Please help me…

2

It sounds like you are having an issue with the Shopify Liquid plugin for VSCode formatting the code in a way that is causing the styles to be ineffective. This is likely happening because the plugin is inserting a new line after the px units in the style declarations, which is not allowed in CSS.

To fix this issue, you can update the settings for the Shopify Liquid plugin to prevent it from inserting new lines after certain characters or patterns. You can do this by opening the user settings for the plugin in VSCode and adding the following configuration:

“liquid.format.insertSpaceAfterKeywords”: [“px”],

This will prevent the plugin from inserting a new line after the px units in your style declarations, ensuring that the styles are applied correctly.