Replies: 31 comments 113 replies
-
Architecture
|
Beta Was this translation helpful? Give feedback.
-
Line Wrapping and printWidthSee https://antfu.me/posts/why-not-prettier
The most frequently criticized feature is Prettier's automatic wrapping and unwrapping of lines based on its printWidth setting (typically 80 or 100 characters). While intended to prevent horizontal scrolling, this behavior often creates significant "noise" in Git diffs. A minor change to a long string or function signature can cause an entire block of code to be reformatted, obscuring the actual logic change and making code reviews more difficult and time-consuming. In certain contexts, such as functional programming pipelines or long, chained method calls, the resulting formatting can be objectively harder to read than the original, manually formatted code. The inability to disable this behavior is a major and long-standing complaint. |
Beta Was this translation helpful? Give feedback.
-
Builtin sorting and aesthetically featuresRemove the need for additional js plugins, which will slow down formatting as every file will need to call into prettier Sort imports (Partially supported)Based on https://perfectionist.dev/rules/sort-imports Tailwind CSS (Supported)Based on https://github.com/tailwindlabs/prettier-plugin-tailwindcss |
Beta Was this translation helpful? Give feedback.
-
DefaultsDefaults will be aligned to prettier for compatibility reasons. |
Beta Was this translation helpful? Give feedback.
-
Why not dprintDprint has two parts:
We want to offer a better formatter. We can offer a dprint wasm plugin for existing users of dprint. |
Beta Was this translation helpful? Give feedback.
-
Built-in tailwindcss support?https://github.com/tailwindlabs/prettier-plugin-tailwindcss Edit: Tailwind CSS has been supported, based on https://github.com/tailwindlabs/prettier-plugin-tailwindcss. See the configuration at https://oxc.rs/docs/guide/usage/formatter/config-file-reference.html#experimentaltailwindcss Related: issues/PRs |
Beta Was this translation helpful? Give feedback.
-
Config support
|
Beta Was this translation helpful? Give feedback.
-
|
Proper html formatting would be a huge deal for many users. Currently prettier enforces jsx style for html. <!-- prettier -->
<img src="" />
<!-- proper html -->
<img src=""> |
Beta Was this translation helpful? Give feedback.
-
|
I would like to completely abandon eslint in favor of oxlint, but I can't do that without using third-party eslint plugins. This is because no formatter (at the moment) can provide the flexibility and accuracy that https://eslint.style offers. If oxfmt becomes its counterpart, then it has a future. Otherwise, it will just be another unnecessary (or even harmful) formatter like prettier and biome. |
Beta Was this translation helpful? Give feedback.
-
Style/Script indentationWould've been important to have CSS, JS, HTML have indentation within them: <html>
<body>
</body>
</html>.text-blue {
color: blue;
}function a() {
return;
}But not having indentation on their edge is absolute nonsense: <head>
<style lang="text/css">
.text-blue {
color: blue;
}
</style>
</head>should be <head>
<style lang="text/css">
.text-blue {
color: blue;
}
</style>
</head> |
Beta Was this translation helpful? Give feedback.
-
|
I was starting a new project and was about to go with prettier along with Things are coming together and that is making big difference on our end. Thanks team. |
Beta Was this translation helpful? Give feedback.
-
|
I would love it if we could configure how ternaries are formatted https://x.com/pcattori/status/1734712411700023443 |
Beta Was this translation helpful? Give feedback.
-
|
Can you please add an option to not indent switch cases? Like this: switch (foo) {
case 1:
// case 2
case 2:
// case 2
}Prettier adds indentation before each case, and there is no option to change it. |
Beta Was this translation helpful? Give feedback.
-
|
Building off of preserving existing line breaks instead of enforcing a max print width – an option to enforce one level of indent for any expression already spanning more than one line (and parentheses if not otherwise fully contained within braces/brackets/backticks). const sum = (
variable1
+ superLongVariable2 * superLongVariable3 / superLongVariable4
- variable5
)const result = (
condition1 ?
value1
: condition2 ?
value2
:
value3
)const nodes = [
tree
.getRootNode()
]console.log(
'The value will be',
(
variable1 && variable2 && (
variable3?.method?.()
?? variable4
)
),
`at time ${
Date.now()
+ 24 * 60 * 60 * 1000
+ 10 * 60 * 1000
}`
)const visibleItems = (
[
{
x: 1,
y: 2,
},
{
x: -3,
y: -4,
},
{
x: (
left + (
element
?.getBoundingClientRect()
.width
?? 0
)
),
y: 10,
),
]
.filter(({ x, y }) => (
x > 0
&& y > 0
))
)TypeScript types too: type Color = (
| 'RED'
| 'GREEN'
| 'BLUE'
)type Options = (
| false
| {
foo: string
bar: number
}
| (
& {
hello: string
world: number
}
& MoreProps
& EvenMoreProps
)
) |
Beta Was this translation helpful? Give feedback.
-
|
What's the status on Vue/Svelte support? I couldn't find any info on this, will this be part of 1.0? |
Beta Was this translation helpful? Give feedback.
-
|
Hey, anyone figured out how to integrate oxfmt with lint-staged? My config: "lint-staged": {
"*": "oxfmt",
"*.{ts,js,mts,mjs,cjs,json}": "oxlint --fix"
}My result: |
Beta Was this translation helpful? Give feedback.
-
|
Will there be a equivalent of and/or compatibility with Documented comments:
|
Beta Was this translation helpful? Give feedback.
-
Let's say I'm using prettier with
I'm a bit conflicted because on one hand it should fallback to prettier for non supported formats, but on the other it won't let prettier fallback with plugins? |
Beta Was this translation helpful? Give feedback.
-
Is there a list of planned embed parent-child pairs? Or should community members create new posts in this discussion to ask for support? For example, I'm really enjoying SQL-in-JS via
Source: |
Beta Was this translation helpful? Give feedback.
-
|
Just recently discovered this project and really excited to see where it goes, all I ask is please give us, the developers, the ability to configure the formatter the way we want and don't go down the philosophy route of prettier and Biome as well. You're using rust, take a look at rustfmt's configurability, you have complete control over things, the way it should be. Fortunately the defaults are good and I've never felt myself needing to deviate from them but they're there if you want to change them. Please do the same, provide good sane defaults but ultimately let developers/teams/orgs decide for themselves. I've lost more years off my life having mental breakdowns over prettier's formatting decisions then I would ever have lost to "bikeshedding" (which in my 6 years of using of eslint has hardly ever been a problem, almost feels like a made up problem at this point). I'm currently at the point where I'm solely relying on eslint as a formatter for typescript and svelte on small projects, not ideal for svelte template formatting but it lets me configure what's best for me or my team and easiest to parse/read and understand, not some developers personal opinion on the "best way" other developers read code. |
Beta Was this translation helpful? Give feedback.
-
|
would like to have an option to support: https://eslint.style/rules/brace-style#stroustrup , this is the only reason I use eslint.style. just feel this style is more easy to read(using diff colour to compare difference): +if (foo) {
+ bar();
+ }
- else {
- baz();
-}
+if (foo) {
+ bar();
} else {
- baz();
-} |
Beta Was this translation helpful? Give feedback.
-
|
The architecture decision to use Prettier as a fallback for embedded languages is pragmatic - trying to reimplement CSS-in-JS formatting from scratch would be a huge undertaking with diminishing returns. Regarding the printWidth/line wrapping criticism: I think the key insight from antfu's post is that predictable formatting > theoretically optimal formatting. When a formatter produces different output depending on line length thresholds, it creates noisy diffs. Maybe oxfmt could offer a mode that's more conservative about reflowing - only break lines that exceed the limit, but don't eagerly collapse short lines. For builtin sorting: huge +1. Having to pull in JS plugins for import sorting defeats the purpose of a fast Rust formatter. The perfectionist.dev rules are a good reference for what people want. |
Beta Was this translation helpful? Give feedback.
-
|
I would like an option (preferably the default since Prettier's behaviour is breaking) to ignore comments. Just don't touch them at all. Prettier forces the comment onto a new line in the following, causing a broken CI {
- projects: [ // …disable x-rule
+ projects: [
+ // …disable x-rule
]
}In addition to not breaking CI, there are also benefits to putting the comment on the same line, such as code folding (when same line, the comment is displayed; when next line, the comment is hidden), so when the comment is explanatory instead of an override, you still get the explanation but don't have to have a huge chunk of code showing. |
Beta Was this translation helpful? Give feedback.
-
|
is it possible to sort e.g. with import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";but with import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server"; |
Beta Was this translation helpful? Give feedback.
-
|
There is also seem to be a case where one would prefer to use linter instead of formatter (e.g. eslint stylistic over prettier to have full control, which seem to work as a js plugin just fine with oxlint). However import sorting available only in oxfmt formatter without the ability to turn off other formatter changes (max width or indent) still makes you to rather use |
Beta Was this translation helpful? Give feedback.
-
|
has the |
Beta Was this translation helpful? Give feedback.
-
|
since oxlint doesn't support |
Beta Was this translation helpful? Give feedback.
-
We are using tab width 4 for JS and TS, for other files - tab width of 2. |
Beta Was this translation helpful? Give feedback.
-
Attributes on new line, only for long linesPrettier has the option A short tag that fits on one line would then format like this ( <v-row dense v-if="task.meta.chosenCategory">While a large tag would wrap every attribute: <v-autocomplete
:data-testid="'task_value_' + task.id"
ref="task-name-refs"
v-model="task.task"
return-object
:items="filterTasksByCategory(task.meta.chosenCategory)"
:rules="rules.task"
:menu-props="{ closeOnContentClick: true }"
:item-title="'name_' + t('lang')">This way
|
Beta Was this translation helpful? Give feedback.
-
"preserve" for CSS/SCSS similar to objectWrapThis formatting change is undesirable: - padding:
- calc(var(--px-base) * 3)
- calc(var(--px-base) * 3)
- calc(var(--px-base) * 2)
- calc(var(--px-base) * 3);
+ padding: calc(var(--px-base) * 3) calc(var(--px-base) * 3)
+ calc(var(--px-base) * 2) calc(var(--px-base) * 3);
}"preserve" for function arguments similar to objectWrapThis formatting change is undesirable: - public async loadActor(
- ids: number[],
- actor: ActorName = 'Humanoid'
- ) {
+ public async loadActor(ids: number[], actor: ActorName = 'Humanoid') {In both cases, we can know to intention to preserve the formatting under the condition that there is a newline prior to the first property.
|
Beta Was this translation helpful? Give feedback.

Uh oh!
There was an error while loading. Please reload this page.
-
This discussion documents our decision process for our up coming formatter called oxfmt.
Prioritizations are performance and better DX.
Using structured comments below for better discussion.
Beta Was this translation helpful? Give feedback.
All reactions