Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,8 @@ pnpm add --save-dev prettier @prettier/plugin-pug

## Usage

### CLI

```bash
npx prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
# or
Expand All @@ -70,9 +72,24 @@ yarn prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
pnpm prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
```

## Configuration
### Configuration file (.prettierrc)

```json
{
"plugins": ["@prettier/plugin-pug"]
}
```

See [Standard Prettier overrides](https://prettier.github.io/plugin-pug/guide/standard-prettier-overrides.html) and [Pug specific options](https://prettier.github.io/plugin-pug/guide/pug-specific-options.html) for more options.

### API

See [documentation](https://prettier.github.io/plugin-pug/guide)
```js
await prettier.format('code', {
parser: 'pug',
plugins: ['@prettier/plugin-pug'],
});
```

## Workaround / Known Issue

Expand Down
57 changes: 35 additions & 22 deletions docs/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ yarn add --dev prettier @prettier/plugin-pug

## Usage

### CLI

Format all pug files in your project:

::: code-group
Expand All @@ -40,6 +42,39 @@ yarn prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"

:::

### Configuration file

You can write your `.prettierrc.cjs` like this to get fully type check support with documentation:

```js
// @ts-check
/// <reference types="@prettier/plugin-pug/src/prettier" />

/**
* @type {import('prettier').Options}
*/
module.exports = {
plugins: ['@prettier/plugin-pug'],

printWidth: 120,
singleQuote: true,

pugSingleQuote: false,
// ... more pug* options
};
```

### API

Using the `plugins` option on the API, you can format .pug files:

```js
await prettier.format('code', {
parser: 'pug',
plugins: ['@prettier/plugin-pug'],
});
```

### Selectively ignoring automatic formatting

You can disable code formatting for a particular element by adding `//- prettier-ignore` comments in your pug templates:
Expand Down Expand Up @@ -82,25 +117,3 @@ Pug code with automatic formatting:
.text(color="primary", disabled)
```
````

## Type support in configuration file

You can write your `.prettierrc.cjs` like this to get fully type check support with documentation:

```js
// @ts-check
/// <reference types="@prettier/plugin-pug/src/prettier" />

/**
* @type {import('prettier').Options}
*/
module.exports = {
plugins: ['@prettier/plugin-pug'],

printWidth: 120,
singleQuote: true,

pugSingleQuote: false,
// ... more pug* options
};
```