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

---

dev notes

running the autoformatter on all files has uncovered two issues:

1. the prettier CLI formats differently than the VS Code extension, presumably because the plugin isn't invoked properly?
2. even autoformatting in VS Code results in output that jekyll can't compile.

i'm happy to poke at this more next week, but i'm leaning toward putting a pin in this work until we discuss cal-itp/mobility-marketplace#736.

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	ab42175
🔍 Latest deploy log	https://app.netlify.com/projects/cal-itp-website/deploys/693c952c9019590008c34d19
😎 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 prettier@3.x (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:
          - prettier@2.7.1
          - "@shopify/prettier-plugin-liquid@1.10.0"
        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 prettier@3.7.3
mise exec node@24 -- npm install --no-save @shopify/prettier-plugin-liquid@1.10.0
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!)

[jgravois]

this PR is back in sync with main and includes the ideas @Scotchester suggested in #537 (review).

one thing i didn't notice until today is that (even on main) Scott's nifty liquid CSS injection results in a few lint errors in VS Code that inhibit prettier from auto-formatting the file.

so far i've only found suggestions online for disabling linting altogether for scss/css files with front matter.

https://talk.jekyllrb.com/t/fixing-vscode-scss-linting-errors-on-front-matter/1710

not sure we need to do anything about that, but even if we do, seems neither here nor there with regard to this PR.