Shopify Liquid CSS 和 Prettier 格式

Question

我在 Mac 上的 VS Code 上使用 Prettier 格式化 theme.css.liquid 时遇到问题。我尝试按照官方 Shopify 说明进行更漂亮 但没有成功。它似乎不喜欢液体双引号。

我尝试使用 Prettier 插件并将 Shopify Liquid Prettier 安装为开发依赖项，还尝试使用 Shopify Liquid VS Code Extension。

我的.prettierrc

{
  "plugins": ["@shopify/prettier-plugin-liquid"]
}

我的未格式化代码

@charset "UTF-8";


:root {
  --colorBtnPrimary: {{ settings.color_button | default: "#000" }};
  /*--colorBtnPrimaryLight:{{ settings.color_button | default: "#000" | color_darken: 10 }};*/
  --colorBtnPrimaryLight:{{ settings.color_button_hover | default: "#000" }};
  --colorBtnPrimaryDim:{{ settings.color_button | default: "#000" | color_darken: 5 }};
  --colorBtnPrimaryText:{{ settings.color_button_text | default: "#fff" }};
  --colorCartDot:{{ settings.color_cart_dot | default: "#ff4f33" }};
}

使用更漂亮的输出进行格式化：

@charset "UTF-8";

:root { --colorBtnPrimary: {{ settings.color_button | default: '#000' }}; /*--colorBtnPrimaryLight:
{{- settings.color_button | default: '#000' | color_darken: 10 -}}
;*/ --colorBtnPrimaryLight:{{ settings.color_button_hover | default: '#000' }}; --colorBtnPrimaryDim:
{{- settings.color_button | default: '#000' | color_darken: 5 -}}
; --colorBtnPrimaryText:{{ settings.color_button_text | default: '#fff' }}; --colorCartDot:
{{- settings.color_cart_dot | default: '#ff4f33' -}}
;

采用 CSS 语言功能格式化

:root {
  --colorBtnPrimary: {
      {
      settings.color_button | default: "#000"
    }
  }

;
...

期望的输出

:root {
  --colorBtnPrimary: {{ settings.color_button | default: "#000" }};
}

尝试使用 Shopify Prettier 插件进行格式化没有任何效果。如果我尝试“使用...格式化文档”，我什至无法从列表中选择它。 格式化其他液体文件没问题！我只是在 theme.css.liquid 方面遇到了麻烦。

如有任何帮助，我们将不胜感激！谢谢你

Answer 1

我认为你仍然不需要它，但对于其他人来说，这里有一个对我有用的 pretierrc.json :)

 {
    "printWidth": 120,
    "tabWidth": 4,
    "singleQuote": false,
    "plugins": ["@shopify/prettier-plugin-liquid"],
    "bracketSpacing": true,
    "prettier.bracketSameLine": true,
    "prettier.bracketSpacing": false,
    "singleLineLinkTags": true,
    "indentSchema": true,
    "overrides": [
        {
            "files": "*.liquid",
            "options": {
                
            }
        }
    ]
}

我唯一的问题是，如果我使用样式或其他类似的东西

.block-{{ block.id }}-element {

这样保存

.block-{{ block.id }}
 -element {