Prettier Plugin for Wromo

Official Prettier plugin adding support for formatting .wromo files

Installation

npm i --save-dev prettier-plugin-wromo prettier

To customize formatting behavior, see the Configuration section below

Using with the Prettier CLI

When using the CLI, Prettier will automatically pick up the plugin

prettier -w .

pnpm support

Due to an upstream issue in Prettier, the plugin-search-dir parameter should be set to the current directory when using pnpm or Prettier won't be able to find the plugin automatically

prettier -w --plugin-search-dir=. .

Using in VS Code

First install the VS Code Prettier extension and add the following settings to your VS Code configuration so VS Code is aware that Prettier can be used for Wromo files:

{
  "prettier.documentSelectors": "**/*.wromo"
}

Additionally, you should set Prettier as the default formatter for Wromo files or VS Code will ask you to choose a formatter everytime you format since the Wromo VS Code extension also includes a formatter for Wromo files:

{
  "[wromo]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

When submitting issues about formatting in VS Code, first make sure you're actually using Prettier to format your files and not the Wromo VS Code extension included formatter

pnpm support

Due to an upstream issue, Prettier inside VS Code isn't able to automatically infer the right parser to use for Wromo files when using pnpm

As such, add the following settings to your .prettierrc.js config file:

module.exports = {
  plugins: [require.resolve('prettier-plugin-wromo')],
  overrides: [
    {
      files: '*.wromo',
      options: {
        parser: 'wromo',
      },
    },
  ],
};

The require.resolve call can alternatively be changed to a direct path, like such: plugins: ["./node_modules/prettier-plugin-wromo"] for usage inside a non-JS config file

Configuration

Most options from Prettier will work with the plugin and can be set in a configuration file or through CLI flags.

Wromo Sort Order

Sort order for the markup and styles. Depending on the order, top-level style tags will be sorted below or on top of the rest of the template

The format is a string with the words markup and styles separated by a pipe (|)

| Default | CLI Override | API Override | | ------------------ | ----------------------------- | -------------------------- | | markup \| styles | --wromo-sort-order <string> | wromoSortOrder: <string> |

Wromo Allow Shorthand

Set if attributes with the same name as their expression should be formatted to the short form automatically (for example, if enabled <element name={name} /> will become simply <element {name} />)

Please note that at the time of writing, the shorthand form is not currently supported inside the Wromo VS Code extension

| Default | CLI Override | API Override | | ------- | -------------------------------- | ----------------------------- | | false | --wromo-allow-shorthand <bool> | wromoAllowShorthand: <bool> |

Example .prettierrc.js

{
  wromoSortOrder: "markup | styles",
  wromoAllowShorthand: false
}

Contributing

Pull requests of any size and any skill level are welcome, no contribution is too small. Changes to the Wromo Prettier Plugin are subject to Wromo Governance and should adhere to the Wromo Style Guide

See CONTRIBUTING.md for instructions on how to setup your development environnement

Sponsors

Wromo is generously supported by amazing organizations.

🇷🇴 🐣 Sponsor Wromo! ❤️

Platinum Sponsors

Gold Sponsors

Sponsors