Шаблоны

HTML, JSX

0. Введение

TODO

1. Файлы с исходным кодом

TODO

2. Форматирование

2.1. Переносы

2.1.1 Тег

Перенос тега (разрывать тег) стоит, если:

1. Он выходит за установленную виртуальную границу (120 символов).

2. Хотя бы один атрибут содержит выражения из нескольких операндов.

3. Тег включает более 3 атрибутов.

Если строка с тегом требует переноса, то переносить необходимо все атрибуты. При этом первый из них должен быть записан на следующей строке с одним отступом:

    <!--Хорошо-->
    <component name="Name" title="TITLE" value="performer"></component>

    <!--Хорошо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    />

    <!--Плохо-->
    <!--Вариант неудачен тем, что при изменении длины первой строки приходится исправлять отступы для всех других строк.-->
    <!--Во-первых, это рутинная операциях, во-вторых, её не все делают, -->
    <!--во-вторых, иногда форматирование портится незаметно при автоматизированной замене, -->
    <!--например, названия компонента/блока/элемента.-->
    <component name="Name"
               title="TITLE"
               data="some data"
               value="performer"
               onclick="console.log(event)"></component>

    <!--Плохо-->
    <!--Вариант неудачен тем, что читать становится довольно сложновато. Наибольшие проблемы появляются при ревью изменений. -->
    <!--Они не очень наглядны в таких длинных строках, их просмотр становится более трудоёмким.-->
    <component name="Name" title="TITLE" value="performer" data="some data" type="text" mode="primary" onclick="console.log(event)" onfocus="onfocus()" onmouseleave="onmouseleave"></component>

2.1.2 Содержимое тега

Недопустимо оставлять содержимое тега на одной строке с закрывающей скобкой тега.

    <!--Плохо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    >Info</component>

    <!--Хорошо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    >
        Info
    </component>

3. Использование возможностей языка

3.1.1. Пустой тег

Если технически это возможно, т.е. мы технически можем так записать и такой вариант поддерживается устройствами пользователей, то пустой тег записывать без закрывающего тега.

    <!--Плохо-->
    <component></component>

    <!--Хорошо (при наличии технической возможности)-->
    <component/>