JSX и вветвления ― jsx-control-statements

Одна из раздражающих меня в React вещей, это помесь XML и JS синтаксиса. И ладно бы в одном файле, но, блин, даже в одном блоке. Сочетания XML и конструкций вроде {arr.map(arr => { очень сильно бьют, как по читаемости, так и по глазам в целом. К счастью, есть возможность этого избежать, используя jsx-control-statements. Т.к. его внедрение оказалось делом не совсем тривиальным, я решил написать об этому небольшой очерк.

Для начала, что нам даёт этот плагин?

<If condition={anyCondition}>...</If>
// вместо
{anyCondition && ...}

А также

<For each="el" index="key" of={arr}>...</For>
// вместо
{arr.map((el, key) => ...}

Т.е. XML-like конструкции, похожие на соответствующие им из XSLT (только более компактные). Также там есть ещё <Choice/> для switch-ей.

Ok, а как оно работает? Оно городит новые DOM-элементы? Нет. Оно ещё на уровне babel-я трансформируется в те самые && и .map. Т.е. это синтаксический сахар для эстетов. Ok, как подключить? 

• npm i jsx-control-statements
• в настройки babel-я в plugins добавляем “jsx-control-statements”

Всё, работает. А как насчёт lint-инга? Оказалось, что тут тоже всё схвачено (для eslint), но нужно немного понастраивать:

• npm i eslint-plugin-jsx-control-statements
• в настройках eslint
  • в plugins добавляем jsx-control-statements
    • в extends добавляем jsx-control-statements

Теперь никаких неудобств. Проблем с подстветкой синтаксиса тоже никаких (если у вас вообще JSX нормально отображается, конечно).