Frontend Garden

Prettier 3.5 – улучшает форматирование выражений и объектов

время чтения ~2 мин.

09.02.2025, Ссылка на новость

Вышел Prettier 3.5 и добавил несколько приятных фич: objectWrap – правила форматирования объектов, и experimentalOperatorPosition – экспериментальная опция для переноса операторов, которая полезна при форматировании длинных выражений.

Для форматирования объектов появился новый параметр – objectWrap, теперь можно принудительно “свернуть” объект, если он помещается на одну строку.

Форматирование объектов

До версии 3.5 форматирование объектов происходило либо по длине строки – если не помещался в одну строку, то он “раскрывался” на несколько строк; либо по первому символу после литерала – если перенос, то тоже будет “раскрыт”.

Так было:

const person = {
	firstName: 'John',
	lastName: 'Doe',
};
 
const item = { name: 'Effective TypeScript', type: 'book' };

А так станет с objectWrap в значении collapse:

const person = { firstName: 'John', lastName: 'Doe' };
 
const name = { name: 'Effective TypeScript', type: 'book' };

Prettier нередко добавляет фичи в виде экспериментов, так и был добавлен experimentalOperatorPosition, который позволяет объяснить форматтеру, в каком месте расставлять переносы строк в математических операциях: в в конце или в начале.

// Пример математического выражения
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;
 
// `experimentalOperatorPosition: end` (стандартное поведение)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;
 
// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

Дополнительными плюшками релиз не обделили: и конфиги на TypeScript’е писать разрешили, и переносы строк в JSX и CSS улучшили и дотюнили форматирование для Vue, Angular и Markdown.

Вид графа