@seletskiy/plugin-pug weekly downloads statistics

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 before markdown Pug code with custom formatting:

Prettified code:

bash cd /path/to/project

initialise an npm project if you haven’t done it yet

npm init

or

yarn init

add Prettier and its Pug plugin to project’s dev dependencies

npm install --dev prettier @prettier/plugin-pug

or

yarn add --dev prettier @prettier/plugin-pug bash

format all pug files in your project

./node_modules/.bin/prettier --write "**/*.pug"

or

yarn prettier --write "**/.pug" json { "semi": false, "overrides": [ { "files": ".pug", "options": { "parser": "pug", "semi": true } } ] } json { "singleQuote": true, "overrides": [ { "files": "*.pug", "options": { "parser": "pug", "singleQuote": false } } ] } pug input( type="text", value="my_value", name="my_name", alt="my_alt", autocomplete="on" ) pug input( type="text", value="my_value", name="my_name", alt="my_alt", autocomplete="on") pug input(onClick="methodname("" + variable + "", this)") // transforms to input(onClick="methodname("" + variable + "", this)")

// In most cases ES6 template strings are a good solution input(onClick=methodname("${variable}", this)) pug • const id = 42 • const collapsed = true

div(id=id, class='collapse' + (collapsed ? '' : ' show') + ' cardcontent') // transforms to .cardcontent(id=id, class="collapse' + (collapsed ? '' : ' show') + '")

// better write .cardcontent.collapse(id=id, class=collapsed ? '' : 'show') // Now your js logic is extracted from the plain logic bash npm 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. Many thanks also to @j-f1, @lipis and @azz for the help in transferring this repos to the prettier orga.

Thanks to @Peilonrayz, who gave me the idea to rewrite the printer into a class and thus make the code a lot more maintainable.