@adultlee/prettier-plugin-html-formatter-in-backtick
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

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!

prettier-plugin-ezgif com-video-to-gif-converter

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

/@adultlee/prettier-plugin-html-formatter-in-backtick/

    Package Sidebar

    Install

    npm i @adultlee/prettier-plugin-html-formatter-in-backtick

    Weekly Downloads

    2

    Version

    0.2.0

    License

    ISC

    Unpacked Size

    27.2 kB

    Total Files

    48

    Last publish

    Collaborators

    • adultlee