Shopify Liquid Prettier 插件

Shopify Liquid Prettier 插件是一个代码格式器，用于在 Liquid 和 HTML 代码中保持一致的风格。

安装

您可以使用 npm 或 Yarn 安装 Shopify Liquid Prettier 插件

npm install --save-dev prettier @shopify/prettier-plugin-liquid

yarn add --dev prettier @shopify/prettier-plugin-liquid

Prettier 3及以上版本，还需要在配置文件.prettierrc中声明

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

配置

Shopify Liquid Prettier 插件支持以下配置选项：

名称	默认值	描述
printWidth	120	换行前一行允许的字符数。要了解有关 printWidth 选项的更多信息，请参阅 Prettier 文档。
tabWidth	2	每个缩进级别包含的空格数。要了解有关 tabWidth 选项的更多信息，请参阅 Prettier 文档。
useTabs	false	是用tabs 还是空格进行缩进。要了解有关 useTabs 选项的更多信息，请参阅 Prettier 文档。
singleQuote	false	使用单引号还是双引号。要了解有关 singleQuote 选项的更多信息，请参阅 Prettier 文档
liquidSingleQuote	true	是否在 Liquid 标记和对象中使用单引号而不是双引号。
embeddedSingleQuote	true	是否在嵌入式语言（<script>、<style> 或 Liquid 中的 JavaScript、CSS、TypeScript）中使用单引号而非双引号。
htmlWhitespaceSensitivity	css	HTML 空格敏感度。要了解有关 htmlWhitespaceSensitivity 选项的更多信息，请参阅 Prettier 文档
singleLineLinkTags	false	是否打印<link>标签到一行
indentSchema	false	是否缩进 {% schema %} 标记的内容

使用方法

您可以在以下环境中使用Shopify Liquid Prettier插件：

终端
浏览器
编辑器

您也可以将插件作为预提交钩子或与捆绑程序一起使用。

在终端中使用插件

你可以将 Prettier 作为本地或全局依赖项在终端中使用。

本地依赖

要将 Prettier 作为本地依赖使用，可以将其作为脚本添加到 package.json 文件中：

package.json

...
{
  "scripts": {
    "prettier": "prettier"
  }
}
...

然后，你可以使用npm或Yarn运行它

npm run prettier -- path/to/file.liquid --write

yarn run prettier path/to/file.liquid --write

全局依赖性

如果将 Prettier 作为全局依赖安装，则可以使用以下命令运行它：

prettier path/to/file.liquid --write

在浏览器中使用插件

Shopify Liquid Prettier 插件提供了一个 standalone.js 文件，可与 Prettier 自身的 standalone.js 文件一起使用。

要在浏览器中使用 Prettier 和 Shopify Liquid Prettier 插件，请使用 npm CDN（如 UNPKG）包含这两个standalone文件。

<script src="https://unpkg.com/prettier/standalone.js"></script>
<script src="https://unpkg.com/@shopify/prettier-plugin-liquid/standalone.js"></script>

使用附带的standalone脚本，您可以格式化如下代码：

prettier.format(YOUR_CODE, {
  plugins: [prettierPluginLiquid],
  parser: 'liquid-html',
});

在编辑器中使用插件

您可以在以下编辑器中使用Shopify Liquid Prettier插件：

Visual Studio Code
Vim
WebStorm

Visual Studio Code

您可以通过以下扩展在Visual Studio Code中使用Shopify Liquid Prettier插件：

Shopify Liquid扩展

Shopify Liquid扩展默认包含Shopify Liquid Prettier插件。
如果您想激活保存时格式化功能，可以添加以下设置：

{
  "[liquid]": {
    "editor.defaultFormatter": "Shopify.theme-check-vscode",
    "editor.formatOnSave": true
  },
}

要了解如何在 Visual Studio Code 中使用 Prettier 格式化文件，请参阅 Prettier 扩展的文档。

Prettier 扩展

使用Shopify Liquid Prettier插件和Prettier扩展需要以下步骤：、

安装Prettier扩展。
在本地安装Shopify Liquid Prettier插件。

要了解如何在 Visual Studio Code 中使用 Prettier 格式化文件，请参阅 Prettier 扩展的文档。

Vim

在 Vim 中使用 Shopify Liquid Prettier 插件需要以下步骤：

安装 vim-plug。
安装 vim-prettier。
在本地仓库安装 Shopify Liquid Prettier 插件。

要了解如何在 Vim 中使用 Prettier 格式化文件，请参阅 vim-prettier 文档。

WebStorm

在 WebStorm 中使用 Shopify Liquid Prettier 插件需要以下步骤：

安装 Prettier 插件。
在本地仓库中安装 Shopify Liquid Prettier 插件。
重新启动 WebStorm。
在 WebStorm 偏好设置中搜索 Prettier，更新 “运行文件 “以包含 Liquid。您还可以勾选On save复选框，以便在保存时格式化。
单击 “确定 “保存设置。

要了解如何在 WebStorm 中使用 Prettier 格式化文件，请参阅 WebStorm 文档。

将插件用作预提交钩子

你可以将 Prettier 与预提交工具结合使用。预提交工具可以在提交前重新格式化 “暂存 “文件。

提示
要了解与 Prettier 兼容的预提交工具，以及如何安装它们，请参阅 Prettier 文档

与捆绑程序一起使用