chore: use shopify-liquid VS code plugin to autoformat html

[jgravois]

resolves #541

• wires up prettier 3.x as the default autoformatter
• leans on the Shopify liquid VS Code extension to format .html files
• abandons the djLint pre-commit step

theoretically it should be possible to get prettier + plugins configured to run via pre-commit, but i haven't found any joy getting that setup with @shopify/prettier-plugin-liquid yet (CIL for more notes about that).

prettier/pre-commit#16

as for the formatting changes... i figured it made sense to start with a single file as a conversation starter.

---

alternatives explored

https://shopify.dev/docs/storefronts/themes/tools/shopify-liquid-vscode#code-formatting

i could only get ☝️ to autoformat .liquid files. 🤷

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	f273bd0
🔍 Latest deploy log	https://app.netlify.com/projects/cal-itp-website/deploys/6931bc5374047d0008fc1789
😎 Deploy Preview	https://deploy-preview-537--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[jgravois]

this change helps allows us to use [email protected] (instead of 2.x)

https://marketplace.visualstudio.com/items?itemName=prettier.prettier-vscode

[jgravois]

i futzed around for longer than i probably ought this morning trying to wire up prettier + @shopify/prettier-plugin-liquid to run as a pre-commit hook too.

the configuration below doesn't error, but it results in formatting that does not match what is generated in VS Code (even when i made sure to use prettier@2 or prettier@3 consistently)

- repo: https://github.com/pre-commit/mirrors-prettier
    rev: v2.7.1
    hooks:
      - id: prettier
        name: prettier + plugin-liquid
        additional_dependencies:
          - [email protected]
          - "@shopify/[email protected]"
        args:
          - --plugin=@shopify/prettier-plugin-liquid
        types_or: [css, html]

i'm in favor of merging this PR as-is if we prefer the formatting that is produced in VS Code and just accepting that changes made via the github UI will no longer be formatted automatically.

i'm interested in hearing other opinions though. it wouldn't hurt my feelings to just close this PR and let sleeping dogs lie either.

[thekaveman]

RE:

i could only get ☝️ to autoformat .liquid files. 🤷

Did you try updating the file extension specific formatter config? E.g. we have an entry for liquid files (and I don't think we actually use that extension anywhere), while also telling VS Code it should treat .html files as liquid

Sounds like you messed around with this a bit, just wanted to ask.

[jgravois]

Did you try updating the file extension specific formatter config?

i did indeed get that bit working and updated the PR description and subsequent comments to clarify where this PR stands now.

[thekaveman]

Sorry if I wasn't clear; I meant in trying that other option: https://shopify.dev/docs/storefronts/themes/tools/shopify-liquid-vscode#code-formatting

If you tried adding an explicit html language override / section to tell it to use that formatter. Probably neither here nor there, ignore! 😆

[Scotchester]

One thing I would definitely like to see before merging this:

I assume we'll want to use the new config to mass-format all our existing files. When doing so, let's confine the formatting to a commit that only does that, then add the commit SHA to .git-blame-ignore-revs?

[jgravois]

i did a dry-run and discovered two issues in our HTML that needed to be fixed prior to bulk autoformatting. f273bd0

when the runway is clear, now it'll be a cinch to do the actual deed:

mise exec node@24 -- npm install --no-save [email protected]
mise exec node@24 -- npm install --no-save @shopify/[email protected]
mise exec node@24 -- prettier --write "src/**/*.{css,html}"

afterwards i'll commit that change and inject the SHA into a new .git-blame-ignore-revs file in the root of the repo (TIL!)