Prettier Custom HTML Indent

3.3.2 verified Sat Apr 25 auth: no javascript

A fork of Prettier (v3.3.2) that adds custom indentation for HTML attributes, which is impossible to achieve via official plugins or options. This package allows setting a specific indentation width for HTML attributes (htmlAttributeIndent) and defining attributes that should stay on the same line as the tag (sameLineAttributes). It supports JavaScript, TypeScript, JSX, CSS, HTML, Vue, Angular, and more. The fork follows Prettier's release cadence and is compatible with Prettier's existing options and plugins. It is actively maintained as a separate package.

Common errors

error Cannot find module 'prettier' ↓

cause You have installed prettier-custom-html-indent but are importing from 'prettier'.

fix

Change import to 'prettier-custom-html-indent'.

error Error: Invalid option 'htmlAttributeIndent'. Allowed options: ... ↓

cause You are using the original prettier package instead of the fork.

fix

Install and import from 'prettier-custom-html-indent'.

error TypeError: prettier.format is not a function ↓

cause Using default import incorrectly with CommonJS require.

fix

Use: const prettier = require('prettier-custom-html-indent'); or import prettier from 'prettier-custom-html-indent'.

Warnings

breaking This package is a fork of Prettier. Do NOT use it alongside the original Prettier package; only one should be installed. ↓

fix Uninstall prettier and install prettier-custom-html-indent.

deprecated The 'htmlAttributeIndent' option is not standard Prettier; it may not be supported in future versions if upstream Prettier changes its API. ↓

fix Monitor the package for updates; consider pinning the version.

gotcha Options 'htmlAttributeIndent' and 'sameLineAttributes' only work with HTML/JSX parsers; they are ignored for other languages. ↓

fix Ensure you are formatting HTML files or set parser: 'html' or 'babel' for JSX.

Install

npm install prettier-custom-html-indent

yarn add prettier-custom-html-indent

pnpm add prettier-custom-html-indent

Imports

prettier
wrong
```
const prettier = require('prettier')
```
correct
```
import prettier from 'prettier-custom-html-indent'
```
This package replaces prettier. Use the package name 'prettier-custom-html-indent' for all imports.
format
wrong
```
import { format } from 'prettier'
```
correct
```
import { format } from 'prettier-custom-html-indent'
```
All exports are identical to prettier, but must be imported from 'prettier-custom-html-indent'.

resolveConfig

wrong

import { resolveConfig } from 'prettier'

correct

import { resolveConfig } from 'prettier-custom-html-indent'

Same as above: use the forked package name.

Quickstart

Formats HTML with custom attribute indentation (2 spaces) and keeps 'id' on the same line as the tag.

import prettier from 'prettier-custom-html-indent';

const code = `<div class="container" id="main" style="display:block">\n  <span>Hello</span>\n</div>`;

const formatted = prettier.format(code, {
  parser: 'html',
  htmlAttributeIndent: 2,
  sameLineAttributes: ['id'],
});

console.log(formatted);
// Output:
// <div class="container"
//   id="main"
//   style="display:block"
// >
//   <span>Hello</span>
// </div>