Shopify/theme-tools

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

Closed this issue · 7 comments

fulldecent commented

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

  • 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.

Image

fulldecent commented

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 commented

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 commented

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

fulldecent commented

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 commented

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 commented

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 commented

the screenshot says liquid?

Image