{"id":13682738,"url":"https://github.com/Prettyhtml/prettyhtml","last_synced_at":"2025-04-30T09:34:06.448Z","repository":{"id":32945902,"uuid":"137676613","full_name":"Prettyhtml/prettyhtml","owner":"Prettyhtml","description":"💅 The formatter for the modern web https://prettyhtml.netlify.com/","archived":false,"fork":false,"pushed_at":"2023-01-03T19:16:15.000Z","size":4321,"stargazers_count":282,"open_issues_count":12,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-06T22:37:39.239Z","etag":null,"topics":["angular","formatter","html","html-parser","prettier","rehype","svelte","vue","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prettyhtml.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-17T18:22:46.000Z","updated_at":"2024-09-23T15:31:07.000Z","dependencies_parsed_at":"2023-01-14T23:00:24.802Z","dependency_job_id":null,"html_url":"https://github.com/Prettyhtml/prettyhtml","commit_stats":null,"previous_names":["starptech/prettyhtml"],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prettyhtml%2Fprettyhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prettyhtml%2Fprettyhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prettyhtml%2Fprettyhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prettyhtml%2Fprettyhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prettyhtml","download_url":"https://codeload.github.com/Prettyhtml/prettyhtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224151057,"owners_count":17264425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","formatter","html","html-parser","prettier","rehype","svelte","vue","web-components"],"created_at":"2024-08-02T13:01:52.282Z","updated_at":"2024-11-12T02:31:42.075Z","avatar_url":"https://github.com/Prettyhtml.png","language":"JavaScript","readme":"![Prettyhtml Banner](/logo.png)\n\n[![Build Status](https://dev.azure.com/prettyhtml/Prettyhtml/_apis/build/status/Prettyhtml.prettyhtml)](https://dev.azure.com/prettyhtml/Prettyhtml/_build/latest?definitionId=1)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)\n[![npm version](https://badge.fury.io/js/%40starptech%2Fprettyhtml.svg)](https://badge.fury.io/js/%40starptech%2Fprettyhtml)\n\nOpinionated general formatter for your Angular, Vue, Svelte or pure HTML5 templates. Try it on the [playground](https://prettyhtml.netlify.com/).\n\n\u003e **Project status:**  Unfortunately, This project lacks maintainers. Prettier has landed HTML support in 1.15.0. I recommend it to use it if it matches your requirements. If you want to contribute to this project, feel free to create a PR/Issue.\n\n## Features\n\n- Indentation based primary on node-level + tag length, not content.\n- Can parse Angular, Vue or HTML5 templates.\n- Formats embedded content with [prettier](https://github.com/prettier/prettier) with respect to your local settings.\n- Doesn't change the behaviour of your attributes and tags.\n- Remove all superfluous white-space. There are two additional rules:\n  - Collapses multiple blank lines into a single blank line.\n  - Empty lines at the start and end of blocks are removed. (Files always end with a single newline, though.)\n- Enforce consistent output of your HTML.\n- Follows the same option [philosophy](https://prettier.io/docs/en/option-philosophy.html) as prettier.\n\n## Framework specific features\n\n| Feature                         | Framework |\n| ------------------------------- | --------- |\n| HTML5                           | all       |\n| Self-closing custom elements    | vue       |\n| Self-closing none void elements | vue       |\n| Case-sensitive attributes       | angular   |\n| Case-sensitive elements         | angular   |\n\n## Packages\n\n- [prettyhtml](/packages/prettyhtml) CLI and API.\n- [prettyhtml-formatter](/packages/prettyhtml-formatter) Formatter.\n- [prettyhtml-hast-to-html](/packages/prettyhtml-hast-to-html) Stringifier.\n- [prettyhtml-hastscript](/packages/prettyhtml-hastscript) Hyperscript compatible DSL for creating virtual HAST trees.\n- [prettyhtml-sort-attributes](/packages/prettyhtml-sort-attributes) Sort attributes alphabetically.\n- [prettyhtml-quick](/packages/prettyhtml-quick) Formats your changed files based on Git.\n- [webparser](/packages/webparser) Optimized HTML parser for formatters\n- [expression-parser](/packages/expression-parser) Framework agnostic template expression parser.\n- [rehype-webparser](/packages/rehype-webparser) Adapter between HTML parser and rehype.\n- [rehype-minify-whitespace](/packages/rehype-minify-whitespace) Collapse whitespace.\n- [hast-util-from-parse](/packages/hast-util-from-webparser) Transform [webparser](/packages/webparser) AST to HAST.\n\n## Ignore element\n\nAdding this flag before a tag will preserve from whitespace and/or attribute wrapping.\n\n1. Preserve from indentation, whitespace and attribute wrapping\n\n```html\n\u003c!--prettyhtml-ignore--\u003e\n\u003cdiv\u003e\u003c/div\u003e\n```\n\n2. Preserve only from whitespace processing. This excludes indentation.\n\n```html\n\u003c!--prettyhtml-preserve-whitespace--\u003e\n\u003ch1\u003e foo \u003c/h1\u003e\n```\n\n3. Preserve only from attribute wrapping\n\n```html\n\u003c!--prettyhtml-preserve-attribute-wrapping--\u003e\n\u003ch1 foo=\"bar\" ...\u003e foo \u003c/h1\u003e\n```\n\n## Install\n\n```bash\n# regular\n$ npm install @starptech/prettyhtml --global\n\n# when using proxy like sinopia/verdaccio\n$ npm install @starptech/prettyhtml --global --registry=https://registry.npmjs.org/\n```\n\n## CLI\n\nThis will process recursively all HTML files in the current directory.\n\n```\n$ prettyhtml example.html \"./**/*.html\"\n```\n\n### Help\n\n```\n$ prettyhtml --help\n```\n\n## Pre-Commit hook integration\n\nWe provide a simple package called [prettyhtml-quick](/packages/prettyhtml-quick) which is able to format only changed files. This example use [husky](https://github.com/typicode/husky) to manage git hooks in the package.json\n\n```json\n{\n  \"husky\": {\n    \"hooks\": {\n      \"precommit\": \"prettyhtml-quick --staged\"\n    }\n  }\n}\n```\n\n## API\n\n## `prettyhtml(doc: string, options?): vFile`\n\nFormats a string and returns a [`vFile`](https://github.com/vfile/vfile). The method can throw e.g when a parsing error was produced. The error is from type [`vfile-message`](https://github.com/vfile/vfile-message).\n\n##### `options`\n\n###### `options.tabWidth`\n\nThe space width of your indentation level (default: 2)\n\n###### `options.useTabs`\n\nUse tabs instead spaces for indentation (default: false)\n\n###### `options.printWidth`\n\nUse different maximum line length (default: 80)\n\n###### `options.usePrettier`\n\nUse prettier for embedded content (default: true)\n\n###### `options.prettier`\n\nUse custom prettier settings for embedded content (default: local config)\n\n###### `options.singleQuote`\n\nUse single quote instead double quotes (default: false)\n\n###### `options.wrapAttributes`\n\nForce to wrap attributes (when it has multiple, default: false)\n\n###### `options.sortAttributes`\n\nSort attributes alphabetically (default: false)\n\n## Editor support\n\n- [VSCode](https://github.com/StarpTech/prettyhtml-vscode) extension (not published yet)\n- [Vetur](https://vuejs.github.io/vetur/formatting.html#formatters) Vue tooling for VS Code\n\n## Why\n\nPrettier has [landed](https://github.com/prettier/prettier/releases/tag/1.15.0) HTML support some days ago. This is awesome and will help many people to reduce the headache of correct formatting in teams. The reason why I still using prettyhtml is clear:\n\n- It is very easy to maintain because we have a [specification](https://github.com/syntax-tree/hast) and an [ecosystem](https://github.com/rehypejs/rehype) (and @vfile, @syntax-tree) of plugins.\n- It should be able to format any superset of HTML as long it is parseable with minor tweaks. We use a modified version of the Angular 6 template parser. There is no need to maintain multiple parser.\n- Prettyhtml doesn't try to understand all Javascript frameworks in depth even when it means that the user has to update some places manually.\n\n## Acknowledgement\n\nBig thanks to the creators of the excellent [rehype](https://github.com/rehypejs/rehype) and [unified](https://github.com/unifiedjs/unified) ecosystem.\n","funding_links":[],"categories":["JavaScript","Built on rehype"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrettyhtml%2Fprettyhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPrettyhtml%2Fprettyhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPrettyhtml%2Fprettyhtml/lists"}