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"]
}