Documentanion/action request: Dogfood the prettier-plugin-liquid module

[fulldecent]

Is your feature request related to a problem? Please describe. Yes, setting up Yarn Berry + Prettier + prettier-plugin-liquid requires many steps, and outside documentation which I have not successfully replicated.

Describe the solution you'd like The CI https://github.com/Shopify/theme-tools/blob/main/.github/workflows/ci.yml is updated to invoke Prettier + prettier-plugin-liquid to check code, done in the same way that a normal customer would use it to check their own HTML+Liquid files.

Describe alternatives you've considered Not use prettier-plugin-liquid

Checklist

• [x] I have checked and made sure that the proposal adheres to this plugin's principles

Additional context Add any other context or screenshots about the feature request here.

[fulldecent]

Okay, I've been working on this all week. I think this is the minimal package.json file that's required to actually use @Shopify/prettier-plugin-liquid with Yarn Berry.

{
  "license": "UNLICENSED",
  "devDependencies": {
    "@shopify/prettier-plugin-liquid": "^1.5.0",
    "prettier": "^3.3.3"
  },
  "scripts": {
    "prettier-check": "yarn prettier --check .",
    "prettier-fix": "yarn prettier --write .",
    "postinstall": "yarn dlx @yarnpkg/sdks vscode"
  },
  "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1",
  "dependencies": {
    "front-matter": "^4.0.2"
  },
  "dependenciesMeta": {
    "@shopify/prettier-plugin-liquid@1.5.0": {
      "unplugged": true
    }
  }
}

And all these notes seem to be missing from documentation.

[fulldecent]

Here is a successful attempt at setting up Yarn Berry + Prettier + prettier-plugin-liquid + VS Code and it required many undocumented tricks.

Full implementation at https://github.com/fulldecent/github-pages-template

And you are welcome to take these as documentation for this repo.

[charlespwd]

Your setup is not using the prettier plugin for liquid, you're getting an error that comes from the HTML parser:

[fulldecent]

I have posted above the full implementation of how I'm running prettier and how I think I'm running prettier-plugin-liquid module.

I've read the documentation here in this repo when setting it up and it seems correct.

---

Can you please help me see how to properly run Yarn Berry + Prettier + prettier-plugin-liquid so that it runs correctly? And perhaps we can include this as a specific documentation.

This is very difficult to set up. Especially if you want VS Code and GitHub Actions to work. And so a nice guide here will be really helpful for everyone.

[charlespwd]

Ah sorry I've been thrown off by the error message. It looks like it's because the parser name we have for Liquid is liquid-html. Liquid has no notion of HTML and we were leaving room to have a string Liquid pretty-printer (our parser /prettier pretty prints liquid and HTML at the same time).

Try changing your override to liquid-html instead of liquid. I suspect it's not finding the liquid override you're trying to use and is using the default instead.

https://github.com/Shopify/theme-tools/blob/main/packages/prettier-plugin-liquid/src/parser.ts#L11

[fulldecent]

Thank you @charlespwd. Yes we have already been using liquid-html when we got this error.

And liquid-html is a good name for that since we also have liquid markdown files (which we have to test a different way because I think prettier doesn't do that).

[charlespwd]

the screenshot says liquid?