Prettier Pug plugin

Please note that the plugin ecosystem in Prettier is still beta, which may make prettier-plugin-pug not ready for production use yet.

---

Plugin for Prettier to format pug code

You can disable code formatting for a particular code block by adding <!-- prettier-ignore --> before ```pug.

1Pug code with custom formatting:
2
3<!-- prettier-ignore -->
4```pug
5div.text( color =   "primary",  disabled  ="true"  )
6```
7
8Prettified code:
9
10```pug
11.text(color="primary", disabled)
12```

Getting started

Simply install prettier and prettier-plugin-pug as your project’s npm dependencies:

1cd /path/to/project
2
3## initialise an npm project if you haven’t done it yet
4npm init
5## or
6yarn init
7
8## add Prettier and its Pug plugin to project’s dev dependencies
9npm install --dev prettier prettier-plugin-pug
10## or
11yarn add --dev prettier prettier-plugin-pug

Usage

1## format all pug files in your project
2./node_modules/.bin/prettier --write "**/*.pug"
3## or
4yarn prettier --write "**/*.pug"

Prettier Options

• printWidth
  Currently not very accurate, but works
• singleQuote
  If you want to configure different quotes for pug than for js code, you can use prettier's override.

  1{
  2  "singleQuote": true,
  3  "overrides": [
  4    {
  5      "files": "*.pug",
  6      "options": {
  7        "parser": "pug",
  8        "singleQuote": true
  9      }
  10    }
  11  ]
  12}

• tabWidth
  Use spaces for indentation
• useTabs
  Use tab for indentation Overrides tabWidth

Integration with editors

If you are using a text editor that supports Prettier integration (e.g. Atom), you can have all Prettier perks for your Pug code too!

Use of this plugin in VSCode extension seems to be blocked by prettier/prettier-vscode#395. Feel free to help!

In order to get prettier-plugin-pug working in projects that do not have local npm dependencies, you can install this plugin globally:

1npm install --global prettier prettier-plugin-pug

In this case, you might need to check the settings of your editor’s Prettier extension to make sure that a globally installed Prettier is used when it is not found in project dependencies (i.e. package.json).

Nevertheless, it is recommended to rely on local copies of prettier and prettier-plugin-pug as this reduces the chance of formatting conflicts between project collaborators. This may happen if different global versions of Prettier or its Pug plugin are used.

Installing prettier-plugin-pug either locally or globally may require you to restart the editor if formatting does not work right away.

Implementation details

This plugin is written in TypeScript and its quality is maintained using Prettier and Jest.

Contributing

If you’re interested in contributing to the development of Prettier for Pug, you can follow the CONTRIBUTING guide from Prettier, as it all applies to this repository too.

To run prettier-plugin-pug locally:

• Clone this repository.
• Execute yarn install.
• Execute yarn lint to make sure that the code passes formatting and linting.
• Execute yarn test to make sure that TypeScript successfully compiles into JavaScript and and all unit tests pass.

Credits

This project was inspired by https://github.com/gicentre/prettier-plugin-elm.