Как оформлять цепочки вызовов?

Question

[Максим]

Как оформлять цепочки вызовов?
Иногда цепочка получается компактной, например, что-то вроде:

values.filter(x => x !== 0).map(x => 10 / x).join(':');

А если колбеки занимают больше места?
Именовать и переносить.

С именованием плюс-минус понятно, хотя и кажется странным объявлять стрелочную функцию, которая будет использоваться один единственный раз и при взгляде на которую и без того понятно, что она делает (когда не понятно, тогда можно, чтобы читаемость была повыше). А с переносом?

values.filter(x => x !== 0)
.map(x => 10 / x)
.join(':');

Не очень выглядит.

Буду рад вашим соображениям о красоте или удобстве.

Comments

[t800zippygod]

перенос каждого нового chain'a на новую строку - хорошее и устоявшееся на практике решение. Довольно читабельное. главное делать отступы типа:

values.filter(x => x !== 0)
      .map(someFunction)
      .join(":")

[Сергей delphinpro]

На вопрос невозможно дать однозначный ответ.

Если вам попиз... потрындеть, то не здесь.

Answer 1

[Сергей Соколов]

Например, AirBnB предлагает переносить, сдвигая переносы, как и Google, на 4 пробела:

Пример из AirBnb

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', `translate(${radius + margin},${radius + margin})`)
    .call(tron.led);

// good
const leds = stage.selectAll('.led').data(data);

Comments

[Максим]

Спасибо.

По ссылке много чего интересного.

Answer 2

[abberati]

Устанавливаешь prettier и пишешь как хочешь. Он отформатирует правильно