{"_id":"@adultlee/prettier-plugin-html-formatter-in-backtick","_rev":"6-1b77821d984b193dcb718a2508f495c7","name":"@adultlee/prettier-plugin-html-formatter-in-backtick","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.3":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.1.3","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"url":"https://github.com/adultlee","name":"adultlee","email":"devlsi1228@gmai.com"},"license":"ISC","_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.1.3","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"dist":{"shasum":"e33d2967ad043d23d68d8018f27ff4a7840594e0","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.1.3.tgz","fileCount":21,"integrity":"sha512-K6wxn6YqURIU/Zi5CxxeVl1Oz+q04vdb0QqHD3garBuxflwFXM2ar+F4BmYfGW+cMxFojruhEM9g02EitvW7Og==","signatures":[{"sig":"MEYCIQCL1THcOrogZU7S6ZiRJ/fawkj1H648hzB3X7nbtDo8PgIhAOuPbXvDDrZoM8Hk8c9r3It5MsCPmfeyYMguzpqqEWzh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10619},"main":"dist/index.js","types":"./dist/index.d.ts","gitHead":"0eab16bc0b2b11845a5ac09f5f8a7c6cdac47f67","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"_npmVersion":"10.2.3","description":"This is a Prettier plugin for formatting HTML inside backticks.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"2.8.8","babel-jest":"^29.7.0","typescript":"^5.1.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.10.3","@babel/parser":"^7.22.4","@babel/traverse":"^7.22.4","@babel/preset-env":"^7.23.8","@babel/plugin-syntax-jsx":"^7.21.4"},"_npmOperationalInternal":{"tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.1.3_1704981588279_0.3993178689739447","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.1.4","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"url":"https://github.com/adultlee","name":"adultlee","email":"devlsi1228@gmai.com"},"license":"ISC","_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.1.4","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"dist":{"shasum":"09f68bd1a50560808f23d035cac7f38bc5cff789","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.1.4.tgz","fileCount":21,"integrity":"sha512-DByDlwxo8LRfVsmy2cPYfgcpiJ6ht+F89hOiO1mUe4Q+qlF96H4QNCNX4T9akI52wPquYLZlWcYJrSj95HpZ/Q==","signatures":[{"sig":"MEQCIFFWaLGE0AiTcLzOUOnHh/A/gPKd67adQ0FIOQ54yRT9AiBppO1hIWb+YOMQIhNJAe8cztKuF2YwMsHO8cTkJLlMTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11630},"main":"dist/index.js","types":"./dist/index.d.ts","gitHead":"d1adf90e0b3337ba0d0f76c5d12d560a5cc96a72","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"_npmVersion":"10.2.3","description":"This is a Prettier plugin for formatting HTML inside backticks.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"2.8.8","babel-jest":"^29.7.0","typescript":"^5.1.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.10.3","@babel/parser":"^7.22.4","@babel/traverse":"^7.22.4","@babel/preset-env":"^7.23.8","@babel/plugin-syntax-jsx":"^7.21.4"},"_npmOperationalInternal":{"tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.1.4_1704984536998_0.10439148946949639","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.1.5","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"url":"https://github.com/adultlee","name":"adultlee","email":"devlsi1228@gmai.com"},"license":"ISC","_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.1.5","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"dist":{"shasum":"74255eb82fe7b872c7b70d3ab18c546aaf949eb5","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.1.5.tgz","fileCount":44,"integrity":"sha512-A7Idj3e/d92sbgoGjdoozz0IJKFTFkWYk2pahNNLcy02h3Y+OBDeiqRUdJyoGP6FbiZEoNazvbpWyj69Kfc2Nw==","signatures":[{"sig":"MEYCIQCaLEeCDe47V8P1x2z5R8zlSq73m1jf9rKWzBBRhu+1KwIhANyWwrbxxu9JE/oGRGuZ50/xS9UTimlR1iGUZkqxWTJC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25112},"main":"dist/index.js","types":"./dist/index.d.ts","gitHead":"7038f4b91b6efc7c4ea32ca753989a6e88a08744","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"_npmVersion":"10.2.3","description":"This is a Prettier plugin for formatting HTML inside backticks.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"2.8.8","babel-jest":"^29.7.0","typescript":"^5.1.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.10.3","@babel/parser":"^7.22.4","@babel/traverse":"^7.22.4","@babel/preset-env":"^7.23.8","@babel/plugin-syntax-jsx":"^7.21.4"},"_npmOperationalInternal":{"tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.1.5_1704984950488_0.6253413326872124","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.2.0","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"url":"https://github.com/adultlee","name":"adultlee","email":"devlsi1228@gmai.com"},"license":"ISC","_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.2.0","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"dist":{"shasum":"7f1b3f97f35c62af1ac076ea3f3aa40dd486dec3","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.2.0.tgz","fileCount":48,"integrity":"sha512-GMrz3tET1pB0icDQUziywdgofFh7lHU7gdrJpIXLiMdnA2QDBltly2tImMhHB3DgysDj8OxO8ifZpYAsPUY0SA==","signatures":[{"sig":"MEUCIQDJZ2MZKgsPcSrKSpb5WlfbWUTpvX6y8vC0S5OHmPzIXQIgfVr6IbQxi7cG6X7HDIAOUIvEofzGT8NSX9Ifr4WD9Xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27226},"main":"dist/index.js","types":"./dist/index.d.ts","gitHead":"63a5ef28e8d56aba9312aa5d15fdd90e1887259e","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"_npmVersion":"10.2.3","description":"This is a Prettier plugin for formatting HTML inside backticks.","directories":{},"_nodeVersion":"20.10.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"2.8.8","babel-jest":"^29.7.0","typescript":"^5.1.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.10.3","@babel/parser":"^7.22.4","@babel/traverse":"^7.22.4","@babel/preset-env":"^7.23.8","@babel/plugin-syntax-jsx":"^7.21.4"},"_npmOperationalInternal":{"tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.2.0_1705036117258_0.4287743040524876","host":"s3://npm-registry-packages"}},"0.3.0":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.3.0","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"url":"https://github.com/adultlee","name":"adultlee","email":"devlsi1228@gmai.com"},"license":"ISC","_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.3.0","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"dist":{"shasum":"7b16165fff7901d23f2ed1676c0e428ce016577d","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.3.0.tgz","fileCount":13,"integrity":"sha512-UCnj3+bLgqSHdQpDlqyXTTm9TxHJK/pBqUPI3D3JWM5DmS4qzMo80a+yZBBgKsW4bDdLxYv6ub5iX35JlysYCw==","signatures":[{"sig":"MEQCIEV8SX89y8z4KrQjTnfxrxz/eZ8NTjfJI5UZX+uNGLqkAiA0AzEKTMmBShf0iGpSL5bJBxOqB60QAsedEx8jde56wg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6577},"main":"dist/index.js","types":"./dist/index.d.ts","gitHead":"74045854652f3c94d67d2743cd4aa448715ce601","scripts":{"dev":"tsc --watch","test":"jest","build":"tsc"},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"_npmVersion":"10.9.7","description":"This is a Prettier plugin for formatting HTML inside backticks.","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.1.1","ts-node":"^10.9.1","prettier":"2.8.8","babel-jest":"^29.7.0","typescript":"^5.1.3","@babel/core":"^7.23.7","@types/jest":"^29.5.11","@types/node":"^20.10.3","@babel/parser":"^7.22.4","@babel/traverse":"^7.22.4","@babel/preset-env":"^7.23.8","@babel/plugin-syntax-jsx":"^7.21.4"},"_npmOperationalInternal":{"tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.3.0_1782967482457_0.5991254187423907","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@adultlee/prettier-plugin-html-formatter-in-backtick","version":"0.4.0","description":"This is a Prettier plugin for formatting HTML inside backticks.","main":"dist/index.js","scripts":{"build":"tsc","test":"jest","dev":"tsc --watch"},"keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"author":{"name":"adultlee","email":"devlsi1228@gmai.com","url":"https://github.com/adultlee"},"license":"ISC","devDependencies":{"@babel/core":"^7.23.7","@babel/parser":"^7.22.4","@babel/plugin-syntax-jsx":"^7.21.4","@babel/preset-env":"^7.23.8","@babel/traverse":"^7.22.4","@types/jest":"^29.5.11","@types/node":"^20.10.3","babel-jest":"^29.7.0","jest":"^29.7.0","prettier":"2.8.8","ts-jest":"^29.1.1","ts-node":"^10.9.1","typescript":"^5.1.3"},"_id":"@adultlee/prettier-plugin-html-formatter-in-backtick@0.4.0","gitHead":"3851a13d0bcfb1f95cf9702ecb9d174cc83cca4d","types":"./dist/index.d.ts","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-v6MEneEukhPBT9kvrECEorw2u0ESbOYaimsMAocCHK3cinDU9tJdYPAfyfn6ISdwCfZmkYZyr7an0tWQirJ6Mw==","shasum":"1e2f22bf62fce785fd9bc36ccdb46a74d52f5dff","tarball":"https://registry.npmjs.org/@adultlee/prettier-plugin-html-formatter-in-backtick/-/prettier-plugin-html-formatter-in-backtick-0.4.0.tgz","fileCount":15,"unpackedSize":11880,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAtdjwysm18FlhjEXVg4GsCydkpI0GvBwes8bqz8du/sAiEAg5/zOiFW8x3/TJP9ZoeCyKX5E04HcUZgLLEuiiaS+Qo="}]},"_npmUser":{"name":"adultlee","email":"devlsi1228@gmail.com"},"directories":{},"maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/prettier-plugin-html-formatter-in-backtick_0.4.0_1782984164099_0.5591584117070392"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-11T13:59:48.190Z","modified":"2026-07-02T09:22:44.396Z","0.1.3":"2024-01-11T13:59:48.444Z","0.1.4":"2024-01-11T14:48:57.172Z","0.1.5":"2024-01-11T14:55:50.653Z","0.2.0":"2024-01-12T05:08:37.435Z","0.3.0":"2026-07-02T04:44:42.597Z","0.4.0":"2026-07-02T09:22:44.273Z"},"author":{"name":"adultlee","email":"devlsi1228@gmai.com","url":"https://github.com/adultlee"},"license":"ISC","keywords":["prettier","plugin","sort","html","backtick","import","typescript","javascript"],"description":"This is a Prettier plugin for formatting HTML inside backticks.","maintainers":[{"name":"adultlee","email":"devlsi1228@gmail.com"}],"readme":"# prettier-plugin-html-formatter-in-backtick\n\n> A Prettier plugin that formats HTML written inside JavaScript/TypeScript\n> template literals (backticks).\n\n## ⚠️ Alpha\n\nThis plugin is in **alpha**. It works for the common cases below, but has known\nlimitations (see [Limitations](#limitations)). Please try it and open an issue\nwith feedback.\n\n---\n\n## What it does\n\nWhen you write HTML inside a backtick string, mark it with a special\n`/*html */` comment right before the opening backtick. The plugin finds those\nblocks and formats the HTML with Prettier's built-in HTML formatter, then\nre-indents the result to sit one level below the surrounding code.\n\n**Before:**\n\n```js\nfunction add(a, b) {\n const element = /*html */ `
hihi\n
hihi\n\n\n\n\n
\n
`;\n return a + b;\n}\n```\n\n**After:**\n\n```js\nfunction add(a, b) {\n const element = /*html */ `
\n
hihi
\n
hihi
\n
`;\n return a + b;\n}\n```\n\nBlocks **without** the `/*html */` marker are left untouched, so you opt in per\nstring.\n\n\n\n---\n\n## Installation\n\nInstall as a dev dependency alongside Prettier:\n\n```bash\nnpm install -D prettier @adultlee/prettier-plugin-html-formatter-in-backtick\n```\n\nor with yarn:\n\n```bash\nyarn add -D prettier @adultlee/prettier-plugin-html-formatter-in-backtick\n```\n\nor with pnpm:\n\n```bash\npnpm add -D prettier @adultlee/prettier-plugin-html-formatter-in-backtick\n```\n\n> **Note:** this plugin currently targets **Prettier 2.x**.\n\n---\n\n## Setup\n\nRegister the plugin in your Prettier config. Any config format Prettier\nsupports works — pick one.\n\n**`.prettierrc.json`**\n\n```json\n{\n \"tabWidth\": 2,\n \"printWidth\": 80,\n \"plugins\": [\"@adultlee/prettier-plugin-html-formatter-in-backtick\"]\n}\n```\n\n**`prettier.config.js`** (or `.prettierrc.js`)\n\n```js\nmodule.exports = {\n tabWidth: 2,\n printWidth: 80,\n plugins: [\"@adultlee/prettier-plugin-html-formatter-in-backtick\"],\n};\n```\n\n**`package.json`**\n\n```json\n{\n \"prettier\": {\n \"plugins\": [\"@adultlee/prettier-plugin-html-formatter-in-backtick\"]\n }\n}\n```\n\nThe plugin respects your existing `tabWidth` and `printWidth` when formatting\nthe HTML.\n\n---\n\n## Usage\n\n### 1. Mark HTML with the `/*html */` comment\n\nPut the comment immediately before the opening backtick:\n\n```js\nconst template = /*html */ `
Title
Body
`;\n```\n\nThe spacing matters: it must be `/*html */` (a space before the closing `*/`).\n\n### 2. Run Prettier\n\n**Format from the command line:**\n\n```bash\nnpx prettier --write \"src/**/*.{js,ts}\"\n```\n\n**Format on save in VS Code:**\n\n1. Install the [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n extension.\n2. Add to your `.vscode/settings.json`:\n\n ```json\n {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"editor.formatOnSave\": true\n }\n ```\n\n3. Save a file — HTML inside `/*html */` backticks is reformatted automatically.\n\n**Add an npm script:**\n\n```json\n{\n \"scripts\": {\n \"format\": \"prettier --write \\\"src/**/*.{js,ts}\\\"\"\n }\n}\n```\n\nThen run `npm run format`.\n\n---\n\n## What gets normalized\n\nThe plugin delegates to Prettier's HTML formatter, so you also get:\n\n- **Indentation** — nested elements are re-indented to one level below the\n surrounding code.\n- **Void elements** — ` `, ``, `` become ` `, ``,\n ``.\n- **Lowercased tags** — `