Biome formatter without auto-wrapping

[fregante]

I don't use Prettier in a specific project, but I do want some formatting rules (brake spacing, etc), for which I've been using ESLint.

Is it possible to use Biome as a formatter (JS) without enforcing a specific line width? I tried using "lineWidth": 180 but that means every array is still changed to a single line. I just want Biome to not touch the wrapping unless there's a specific reason to (e.g. _don't allow two instructions on a line: a(); b())

[KalebKloppe]

I agree, this is why I am looking for a new formatter. I need a formatter that lets the writer decide where to break the code. Prettier closed the discussion on this.

Syntax-highlighted code isn't read like paragraphs in a book, from left to right, top to bottom. People jump around looking for keywords and symbols. Sometimes the keywords and symbols are predictable and can be hidden off the page, but other times you might want to call attention to them.

I wish I could break the format intentionally:

const boilerplateStuff = ["dont", "worry", "about", "these"]
const moreBoilerplate = ["more", "stuff", "you", "don't", "need", "to", "focus", "on"]
const extraBoilerplateStuff = ["extra", "boilerplate", "that", "is", "not", "important"]
const importantStuff = [
  "gee",
  "these",
  "seem",
  "important"
]

Other times, I want to apply a consistent format, but the line length enforcement doesn't allow:

{ orderId: 1, customerName: "John Doe", orderTotal: 99.99, status: "Delivered" },
{ orderId: 2, customerName: "Jane Smith", orderTotal: 99.99, status: "Delivered" },
{ 
    orderId: 3, 
    customerName: "AnUnfortunately LongName", 
    orderTotal: 99.99, 
    status: "Delivered" 
},
{ orderId: 4, customerName: "Bob Brown", orderTotal: 99.99, status: "Delivered" },

[Conaclos]

Have you tried dprint? I think it could fulfill your needs.

Personally, I like the idea of a way to turn off auto-wrapping. However, this could be a significant change to the way Biome works. Also, it is not a high priority change, as it is already a lot of work to adjust Prettier.

[ematipico]

FYI, we have a page that talks about the Biome formatter option philosophy: https://biomejs.dev/formatter/option-philosophy/

[KalebKloppe]

In that page you mention

the chance to start fresh and avoid the pitfalls that Prettier had fallen into with its other existing options

It's important to note that the typographic advice for 'ideal line width' originates from formatting body text of a book, not a series of React components. Even in the context of body text, the ideal is typically presented as a range.

I suggest considering a minLineWidth and maxLineWidth (like eslint used to have) instead of a single lineWidth value.
For backwards compatibility, you could set the lineWidth value as both the minimum and maximum. The behavior would remain the same.

[RafaelKr]

It would be great to have the consistent rule from eslint available. So the developer can decide if the array should be wrapped or not. But if the developer wraps it, it must be consistently wrapped.

Please see the examples here: https://eslint.org/docs/latest/rules/array-element-newline#consistent

There are a lot of existing discussions around this issue in the prettier ecosystem:

• Newline for each item in JSON array prettier/prettier#2716 (63 comments)
• How can I prevent prettier from taking multi-line array to a single line? prettier/prettier-vscode#352 (42 comments)
• RFC - Future of Prettier and (re)considerations about current mindset prettier/prettier#8507 (general issue listing some others)
• Support library-specific plugin prettier/prettier#4424 (comment) (47 comments, highest voted comment is related)

Edit: When the developer decides to wrap every array item on an own line usually this is on purpose and Biome shouldn't revert this decision of the developer. Wrapping each item on an own line improves readability, quicker reordering of items and when working in a team it leads to less complex merge conflicts, when multiple developers change the same array.