Prettier-plugin-html-formatter-in-backtick
WORK IN PROGRESS
This plugin is in alpha state. Please try it out and provide feedback.
Intro
This is a Prettier plugin for formatting HTML inside backticks.
To format HTML code within backticks in your document, you can use a special comment /*html */
followed by your HTML code inside backticks. This format allows you to apply specific formatting rules or a formatting tool to the HTML code within the backticks. Here's a simple example:
// input
function add(a: number, b: number) {
const element = /*html */ `<div><div>hihi
</div><div>hihi
</div>
</div>`;
return a + b;
}
// output
function add(a: number, b: number) {
const element = /*html */ `<div>
<div>hihi</div>
<div>hihi</div>
</div>`;
return a + b;
}
There's a GIF here too!
Usage
npm install -D @adultlee/prettier-plugin-html-formatter-in-backtick
or, using yarn
yarn add -D @adultlee/prettier-plugin-html-formatter-in-backtick
Add plugin in prettier config file.
module.exports = {
"plugins": ["@adultlee/prettier-plugin-html-formatter-in-backtick"]
}
or, using .prettierrc.json
{
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"endOfLine": "auto",
"arrowParens": "always",
"trailingComma": "es5",
"plugins": ["@adultlee/prettier-plugin-html-formatter-in-backtick"]
}