Option to indent the closing bracket of a multiline element by +1

[MrHaila]

Request / Idea

Thanks for the plugin. We are migrating a sizeable codebase to use it. One currently impossible style opinion would be really helpful for us: indenting the trailing ) of a multiline element to the same indent level as the props.

Input

ExampleComponent(
  variant="danger"
  title="Oh no, a connection error!"
)

Expected Output

ExampleComponent(
  variant="danger"
  title="Oh no, a connection error!"
  )

Crude Implementation

// Line 1171 in printer.ts
- this.result += this.indentString.repeat(this.indentLevel);
+ this.result += this.indentString.repeat(this.indentLevel + 1);

Additional Context

We feel this is preferable over the current default indent position as it allows you to both comment out the whole component one one go...

// Errors
// ExampleComponent(
  variant="danger"
  title="Oh no, a connection error!"
)

// Works
// ExampleComponent(
  variant="danger"
  title="Oh no, a connection error!"
  )

...as well as retains the ability to re-order the props easily without having to manually move the closing bracket to the end of the last prop.

Could this style be supported as an option? The code is trivial, so it's more of a bike-shedding question.

[Shinigami92]

There are two theoretical problems right now:

1. pugBracketSameLine is based on prettier original bracketSameLine
2. why are you try to reorder attributes manually instead of benefitting from pugSortAttributes

[MrHaila]

why are you try to reorder attributes manually instead of benefitting from pugSortAttributes

Not mutually exclusive! We have some amount props where the ordering is not easily expressed in a regexp, for example Vue components with multiple v-model bindings that might look like this:

SomeComponent(
  autoSortedPropsHere
  v-model:first-prop="foo"
  @update:first-prop="onFirstPropUpdate"
  v-model:second-prop="foo"
  @update:second-prop="onSecondPropUpdate"
  )

This is a case where it's nice to retain some freedom of manual sorting. We have a fair amount of components that also have props that you want to group semantically (non-optional field first, optional fields second, etc.) instead of alphabetically or in a globally fixed order.

I agree that the built-in ways to auto-sort are powerful, but leaving a bit of freedom is the chef's kiss.

On the first point... not much more to comment than HTML is a very different domain to pug when it comes to indentations and there this same thing does not matter much 😕

[Shinigami92]

So because this would be potentially a new option, you should have a look into https://github.com/prettier/plugin-pug/tree/main/tests/options and explore from there how options are implemented.

I suggest you to open up a PR and so we can explore of how easy or hard it is to implement and support/maintain.