Prettier 3.5 brings two new options for JavaScript code formatting
An experimental feature is used to make binary operators in JavaScript code more visible to developers.
(Image: Trismegist san/Shutterstock.com)
The open source tool Prettier has reached version 3.5. The tool for code formatting JavaScript, TypeScript, JSX and more comes with an experimental and a stable feature for JavaScript and can now handle TypeScript configuration files.
Videos by heise
Operators at a glance
An experimental option for JavaScript is hidden behind the new flag --experimental-operator-position <start|end>. If developers use this option with start, binary operators appear at the beginning of a line. This should provide a better overview compared to the standard behavior – with the operators at the end of a line –, as the code example from the Prettier team shows:
// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;
// `experimentalOperatorPosition: end` (default behavior)
var a =
Math.random() * (yRange * (1 - minVerticalFraction)) +
minVerticalFraction * yRange -
offset;
// `experimentalOperatorPosition: start`
var a =
Math.random() * (yRange * (1 - minVerticalFraction))
+ minVerticalFraction * yRange
- offset;
Multiline becomes single-line
The second new option for JavaScript formatting is objectWrap. As the development team explains, Prettier previously used semi-manual formatting of JavaScript object literals and retained the division of objects into multiple lines when a new line was present before the first property, even if there was sufficient space in one line.
This remains the default behavior, but developers can use --object-wrap=collapse to opt for the single-line variant, as the Prettier team shows in a direct comparison with the previous version 3.4:
// Input
const obj1 = {
name1: "value1", name2: "value2",
};
const obj2 = { name1: "value1",
name2: "value2",
};
// Prettier 3.4
const obj1 = {
name1: "value1",
name2: "value2",
};
const obj2 = { name1: "value1", name2: "value2" };
// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };
const obj2 = { name1: "value1", name2: "value2" };
As another new feature, Prettier can now handle TypeScript configuration files, such as prettier.config.ts. It should be noted that TypeScript support in Node.js is considered experimental and requires Node.js version 22.6.0 or higher. There are also updates for Markdown, CSS, Vue and Angular, among others.
Information on all changes in version 3.5 can be found on the Prettier blog.
(Image:Â WD Ashari/Shutterstock.com)
enterJS 2025 will take place on May 7 and 8 in Mannheim. The conference offers a comprehensive look at the JavaScript-supported enterprise world. The focus is not only on the programming languages JavaScript and TypeScript themselves, but also on frameworks and tools, accessibility, practical reports, UI/UX and security.
Tickets are available at an early bird price in the online store.
(mai)