Experiment for making ESLint Stylistic to format like
Prettier does for html template tag literals (and svg, css).
It is just using Prettier inside the template literal. This is a analogous to ESLint plugin format, but for embedded languages.
This is my first attempt at making an ESLint plugin, so expect this to be very naive.
- Trim remaining surrounding whitespace
- Inherit indenting level
- How are nested literals supposed to behave?
- Should extract interpolations from the formatting process
- Replacing the text seems to block further processing for nested templates
pnpm i
pnpm dev
const name = `Rantanplan`
const animals = [
`dog`,"cat"]
export default createBeerBottle({
drink: ({ url }) => html`
${url}
<div>
<h1>It's a 404!</h1>
</ div>
${
// My eyes bleed
name + 'dddd'}
<span>
${animals.map((e,i)=>html`
<span>
<div> ${e} / ${i} </div>
</span>
`)}
</span>
<hr />
`,
});const name = `Rantanplan`;
const animals = [`dog`, "cat"];
export default createBeerBottle({
drink: ({ url }) => html`
${url}
<div>
<h1>It's a 404!</h1>
</div>
${
// My eyes bleed
name + "dddd"
}
<span>
${animals.map(
(e, i) => html`
<span>
<div>${e} / ${i}</div>
</span>
`,
)}
</span>
<hr />
`,
});const name = `Rantanplan`;
const animals = [
`dog`, "cat"
];
export default createBeerBottle({
drink: ({ url }) => html` ${url}
<div>
<h1>It's a 404!</h1>
</div>
${ // My eyes bleed name + 'dddd'}
<span>
${animals.map((e,i)=>html`
<span>
<div>${e} / ${i}</div>
</span>
`)}
</span>
<hr />
`
,
});