A Better Formatter 😭

[babakfp]

Hi

Prettier is not perfect, so I want to talk a bit about how to build a better alternative (IMO).

Defaults

Use 4 for indentation size

Using 2 for indentation size, makes the code hard to read. So many projects use 2 because it's the default.

Semicolon Off

To keep code clean.

Prettier

It may be seen like a bad idea to have a different API than Prettier, but what if Prettier changes their API after OXC formatter comes out, is OXC going to just follow what Prettier does? I think the goal should be better defaults.

(I saw a discussion about OXC being a drop-in replacement to Prettier, so that's why I added this text).

Built-in import/export sorter

There are so many prettier plugins for this, but some things are wrong with all of them.

prettier-plugin-organize-imports
@ianvs/prettier-plugin-sort-imports
@trivago/prettier-plugin-sort-imports
prettier-plugin-sort-imports

These are the plugins that I have tried, but none of them are perfect.

Build something the has many customization features.

Add all and any kind of customization options

NOTE: if adding custom plugins was super easy to do, then this could be less of an issue if people can just easily build custom plugins (having good docs needed).

Make it super easy to build plugins for it

It's super hard to build plugins for Prettier. Biome is doing something different for this, which may worth checking it out.

Built-in package.json formatter

I've seen so many package.json files that there is no sorting done by the developer, and it's hard to find and work with the content inside it. It could be helpful if there was a good built-in enabled by default formatter for this. Just as example:

title
version
description
license
scripts

It should also be possible to customize the sorting order.

Other

There is this issue with Prettier.

https://github.com/tailwindlabs/prettier-plugin-tailwindcss?tab=readme-ov-file#compatibility-with-other-prettier-plugins

Another issue, I wrote this:

IanVS/prettier-plugin-sort-imports#119 (comment)

And got this response:

IanVS/prettier-plugin-sort-imports#119 (comment)

It would be great if OXC formatter didn't have such limitations.

---

Allow using comments to change formatting options for blocks of code. Similar to how you can do multiline prettier ignore comments.

---

Custom indentation for specific blocks of code

I'm working on a WordPress/Elementor plugin and this is the result I get with Prettier:

<?php
defined('ABSPATH') or die();

$this->start_controls_section('tab:style/accordion:tab_content', [
    'label' => esc_html__('Tab Content', 'elementor-fullpage-accordion'),
    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]);

$this->add_responsive_control('tab_content_padding', [
    'label' => esc_html__('Padding', 'elementor-fullpage-accordion'),
    'type' => \Elementor\Controls_Manager::DIMENSIONS,
    'size_units' => ['px', 'em', 'rem', 'custom'],
    'selectors' => [
        '{{WRAPPER}} .efp-accordion-item.on .efp-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
    ],
]);

$this->end_controls_section();

Instead, I want this:

<?php
defined('ABSPATH') or die();

$this->start_controls_section('tab:style/accordion:tab_content', [
    'label' => esc_html__('Tab Content', 'elementor-fullpage-accordion'),
    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]);

    $this->add_responsive_control('tab_content_padding', [
        'label' => esc_html__('Padding', 'elementor-fullpage-accordion'),
        'type' => \Elementor\Controls_Manager::DIMENSIONS,
        'size_units' => ['px', 'em', 'rem', 'custom'],
        'selectors' => [
            '{{WRAPPER}} .efp-accordion-item.on .efp-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
        ],
    ]);

$this->end_controls_section();

Notice how add_responsive_control is indented, like there is an invisible scope/block. I need this because on the visual side of this code, add_responsive_control is a UI control inside an accordion. So, doing this allows me to scan trough code easily.

How could this be implemented? Using comments would be fine. Having a way to configure the formatter so that it knows what to do without needing to add comments all the time, would be even better. The second would need an easy API for this.

---

Please don't stick with arguments like "A formatter should be opinionated". A great formatter should have great defaults and excellent and rich features, easy to use, customizable and easy to extend.

---

Don't break object key value pairs

This is bad:

{
    key:
        "very long value"
}

This is good:

{
    key: "very long value"
}

Add an option that, no matter the length, the value won't break into a new line.