Awesome
<p align="center"> <a href="https://prettier.io" target="_blank"> <img alt="Prettier" src="https://cdn.rawgit.com/prettier/prettier-logo/master/images/prettier-icon-light.svg"> </a> <a href="https://pugjs.org" target="_blank"> <img alt="Pug" src="https://cdn.rawgit.com/pugjs/pug-logo/eec436cee8fd9d1726d7839cbe99d1f694692c0c/SVG/pug-final-logo-_-colour-128.svg" height="210"> </a> </p> <h2 align="center">Prettier Pug plugin</h2> <p align="center"> <a href="https://github.com/prettier/plugin-pug/blob/main/LICENSE"> <img alt="license: MIT" src="https://img.shields.io/github/license/prettier/plugin-pug.svg?style=flat-square"> </a> <a href="https://www.npmjs.com/package/@prettier/plugin-pug" target="_blank"> <img alt="NPM package" src="https://img.shields.io/npm/v/@prettier/plugin-pug.svg?style=flat-square"> </a> <a href="https://www.npmjs.com/package/@prettier/plugin-pug" target="_blank"> <img alt="downloads" src="https://img.shields.io/npm/dt/@prettier/plugin-pug.svg?style=flat-square"> </a> <a href="https://prettier.io" target="_blank"> <img alt="Code Style: Prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"> </a> <a href="https://github.com/prettier/plugin-pug/actions/workflows/ci.yml"> <img alt="Build Status" src="https://github.com/prettier/plugin-pug/actions/workflows/ci.yml/badge.svg?branch=main"> </a> </p>Intro
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
This plugin adds support for the Pug language to Prettier.
- Getting started
- Usage
- Configuration
- Workarounds / Known Issues
- Integration with editors
- Implementation details
- Contributing
- Credits
Getting started
Simply install prettier
and @prettier/plugin-pug
as your project’s devDependencies
:
npm add --save-dev prettier @prettier/plugin-pug
# or
yarn add --dev prettier @prettier/plugin-pug
# or
pnpm add --save-dev prettier @prettier/plugin-pug
Usage
CLI
npx prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
# or
yarn prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
# or
pnpm prettier --write "**/*.pug" --plugin="@prettier/plugin-pug"
Configuration file (.prettierrc)
{
"plugins": ["@prettier/plugin-pug"]
}
See Standard Prettier overrides and Pug specific options for more options.
API
await prettier.format('code', {
parser: 'pug',
plugins: ['@prettier/plugin-pug'],
});
Workaround / Known Issue
There are some code examples that are not formatted well with this plugin and can damage your code.
But there are workarounds for it. These generate even better pug code!
Example
If you have tags at the top/root that are indented, they will lose indentation due to a technical limitation of pug.
Please check these before committing after running this plugin for the first time and fix them manually.
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 VSCode extension to get support for VSCode.
In order to get @prettier/plugin-pug
working in projects that do not have local npm dependencies, you can install this plugin globally:
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 Vitest.
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
pnpm run preflight
.
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 repository to the prettier organization.
Thanks to @fisker for the constant help and support in terms of Prettier Core support.
Thanks to @Peilonrayz, who gave me the idea to rewrite the printer into a class and thus make the code a lot more maintainable.
Thanks to @lehni, @SkyaTura and @shadowgate15 for the massive contribution and the introduction of many new features into the project.
Thanks to @maoberlehner to acknowledge @prettier/plugin-pug
as officially well TTD tested at Vue Amsterdam 2023.