Auto-formatting WebC template files

[nielsbom]

So .webc files are HTML. So we can use HTML syntax highlighting and formatting for it. But we can also use them to hold site content, what Eleventy calls "templates". A template can also hold frontmatter like so:

---
layout: layouts/base.webc
---
<h2>An example</h2>
<main @html="content"></main>

An HTML formatter will mangle this so the frontmatter is incorrect.

---

I'm thinking a couple of things:

1. Ideally an editor should know the difference between the frontmatter part of a .webc file and the HTML part. I don't think that's gonna happen any time soon.
2. Can we configure an editor to only format .webc files in certain directories and not others? I'm not sure if that's possible straight from an editor, in VS Code it doesn't look like it.
3. Don't add frontmatter in .webc files, so in other words: don't use them for the content of a site. Instead use Markdown for example.

So my question is: what is a/your practical solution for this?

[ghost]

Easy: make the frontmatter a script element similar to the "js" type that returns an object. HTML everywhere.

[studiochris]

Formatting .webc files as Markdown instead of HTML seems to work in VS Code. Frontmatter is left intact on format, and Markdown supports HTML.

[zachleat]

Moving this to eleventy-plugin-webc, front matter is a Eleventy-specific feature and not internal to the WebC file format.

[zachleat]

Can you elaborate more specifically on which HTML formatting tools you’re referring to?

VS Code’s “Format Document” feature on a WebC file with front matter works fine, in a simple test.

[zachleat]

The most straightforward solution here if you’re dealing with formatting issues is to use Template data files instead of front matter: https://www.11ty.dev/docs/data-template-dir/

[nielsbom]

@riskygit

Easy: make the frontmatter a script element similar to the "js" type that returns an object. HTML everywhere.

I don't understand what you mean, can you please elaborate?

[nielsbom]

@studiochris

Formatting .webc files as Markdown instead of HTML seems to work in VS Code. Frontmatter is left intact on format, and Markdown supports HTML.

When I set the language mode for a .webc file to Markdown VS Code (correctly) does not mess up the frontmatter. But it then also stops formatting the HTML below the frontmatter and other features like Auto Closing Tags also stop working. Not a solution I'm that happy with.

[nielsbom]

@zachleat

VS Code’s “Format Document” feature on a WebC file with front matter works fine, in a simple test.

I tested some more and I discovered I'm (or rather was) using this deprecated formatter extension.

• the VS Code built-in HTML formatter (part of "HTML Language Features") does not mess up the frontmatter
• Prettier also does not mess up the frontmatter

Sorry for sorta crying wolf. Thanks for the help y'all!

[nielsbom]

@zachleat

The most straightforward solution here if you’re dealing with formatting issues is to use Template data files instead of front matter: https://www.11ty.dev/docs/data-template-dir/

Would that work for layout files tho?