Brackets: редактор кода с Live Preview для фронтенд-разработчиков

Brackets — это современный, открытый текстовый редактор, созданный специально для веб-разработчиков и дизайнеров. Изначально разработанный компанией Adobe, он отличается чистым и интуитивно понятным интерфейсом, а также уникальными функциями, такими как Live Preview (живой просмотр), которые делают процесс разработки наглядным и эффективным. В этой статье мы подробно рассмотрим все аспекты работы с Brackets.

Что такое Brackets?

Brackets — это бесплатный и открытый текстовый редактор, с самого начала создававшийся для работы с веб-технологиями: HTML, CSS и JavaScript. Его главная философия — предоставить разработчику «правильное количество помощи», не вмешиваясь в творческий процесс. Редактор написан на тех же технологиях, для работы с которыми он предназначен, что делает его по-настоящему родным для фронтенд-разработчиков.

Не смотря на то, что Adobe официально прекратила поддержку Brackets в 2021 году, проект продолжает жить и развиваться силами сообщества под именем Phoenix Code. Сам Brackets теперь позиционируется как легкий и проверенный временем инструмент, а пользователям рекомендуется ознакомиться с его наследником — Phoenix Code.

Ключевые особенности Brackets

• Инлайн-редактирование (Inline Editors). Позволяет редактировать CSS, связанный с HTML-элементом, прямо в HTML-файле, не переключаясь между вкладками.
• Живой просмотр (Live Preview). Редактор в реальном времени синхронизируется с браузером, и вы сразу видите результат своих изменений на экране.
• Поддержка препроцессоров. Brackets имеет встроенную поддержку популярных препроцессоров, таких как Sass и LESS, что значительно упрощает работу с ними.
• Быстрый просмотр (Quick View). При наведении курсора на цветовой код (например, #FFFFFF) или путь к изображению появляется всплывающее окно с предпросмотром этого ресурса.
• Быстрая документация (Quick Docs). По нажатию Ctrl/Cmd-K редактор отображает встроенную документацию для CSS-свойств и значений.

Где скачать и как установить Brackets

Скачивание

Официальный сайт для загрузки Brackets — brackets.io. Оттуда вы можете скачать установочный файл для вашей операционной системы (Windows, macOS или Linux). Для этого нажмите по ссылке Other Downloads.

После чего вы попадете на github, где уже сможете скачать установочный файл редактор.

Сообщество также поддерживает форк под названием Phoenix Code, который можно найти на phcode.io.

Установка

Windows и macOS. После загрузки установочного файла запустите его и следуйте инструкциям мастера установки. Процесс стандартен и не должен вызвать сложностей.

Linux (Ubuntu, Mint и другие).

Для установки Brackets в Linux есть несколько способов:

1. Через Snap (рекомендуется):

   sudo snap install brackets --classic

2. В виде Flatpak:

   flatpak install flathub io.brackets.Brackets

3. Через DEB-пакет:
   Скачайте DEB-пакет с официального сайта и установите его, дважды щелкнув по файлу или с помощью команды:

   sudo dpkg -i brackets.deb

Установка и настройка Emmet

Emmet — это невероятно мощный инструмент, который позволяет значительно ускорить написание HTML и CSS с помощью простых аббревиатур. Например, аббревиатура ul>li*5 может быть развернута в полноценный HTML-код с ненумерованным списком из пяти элементов.

Процесс установки Emmet в Brackets:

1. Откройте Brackets.
2. Кликните на иконку «Extension Manager» (Менеджер расширений) в правом верхнем углу или выберите в меню «File» > «Extension Manager».
3. В открывшемся окне в поисковой строке введите «Emmet».
4. Найдите расширение «Emmet» в результатах поиска и нажмите кнопку «Install» (Установить).

После установки вы можете сразу начать использовать все возможности Emmet.

Таким же образом можно установить дополнительные плагины и поменять тему

Реестр плагинов и тем: registry.brackets.io

Основные приемы работы с Emmet

Вот некоторые из самых полезных аббревиатур Emmet, которые вы можете использовать в Brackets:

• Создание скелета HTML: Наберите ! и нажмите Tab или выберите в меню Emmet «Expand Abbreviation», чтобы создать базовую структуру HTML-документа.
• Создание дочерних элементов: Используйте символ >.
  • Пример: div>ul>li развернется в:

    <div>
        <ul>
            <li></li>
        </ul>
    </div>

• Создание соседних элементов: Используйте символ +.
  • Пример: section+p+div развернется в:

    <section></section>
    <p></p>
    <div></div>

• Создание элементов с классами и ID: Используйте . для класса и # для ID.
  • Пример: div.header#top развернется в:

    <div class="header" id="top"></div>

• Множественное копирование: Используйте символ *.
  • Пример: li*5 создаст пять элементов списка.
• Нумерация: Используйте символ $.
  • Пример: li.item$*3 создаст:

    <li class="item1"></li> 
    <li class="item2"></li> 
    <li class="item3"></li>

Полезные расширения для Brackets

Одной из сильных сторон Brackets является его расширяемость. Вот несколько популярных расширений, которые улучшат ваш опыт разработки:

• Git: обеспечивает интеграцию с системой контроля версий Git прямо в редакторе.
• Beautify: форматирует код JavaScript, HTML и CSS, делая его чистым и читаемым.
• Markdown Preview: добавляет возможность живого просмотра Markdown-документов.
• File Icons: добавляет визуальные иконки для разных типов файлов в дереве проекта, что улучшает навигацию.
• Autoprefixer: автоматически добавляет вендорные префиксы в CSS-код, обеспечивая кроссбраузерность.
• W3C Validation: проверяет ваш код на соответствие стандартам W3C.

Популярные альтернативы Brackets

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

Visual Studio Code (VS Code) на сегодняшний день является самой популярной альтернативой. Это мощный, многофункциональный редактор, который подходит для работы с практически любым языком программирования и имеет огромное сообщество. Если ваши проекты выходят за рамки чистого фронтенда или вы планируете масштабировать их в будущем, VS Code может быть более надежным выбором.

Когда выбирать Brackets?

Выбирайте Brackets, если:

• Вы только начинаете свой путь в веб-разработке и работаете с HTML, CSS и JavaScript.
• Вы фронтенд-разработчик или веб-дизайнер, которому важны визуальные инструменты.
• Вы хотите легковесный инструмент для быстрого прототипирования.
• Вам нужна функция Live Preview без сложной настройки.

 Возможно, стоит рассмотреть альтернативу, если:

• Вы фулстек- или бэкенд-разработчик, работающий с Python, Java, C# и другими языками.
• Вы работаете над большими, сложными проектами с множеством технологий.
• Для вас важны регулярные обновления и долгосрочная поддержка редактора.

Заключение

Brackets остается отличным, специализированным инструментом, который идеально подходит для своей ниши — фронтенд-разработки. Его уникальные функции, такие как Live Preview и инлайн-редактирование, предлагают тот самый наглядный и удобный рабочий процесс, который ценят веб-дизайнеры и разработчики.

Несмотря на то что официальная поддержка от Adobe прекращена, сообщество продолжает поддерживать проект в виде Phoenix Code. Brackets — это редактор, который стоит попробовать, если вы хотите сосредоточиться на чистом и визуально ориентированном процессе создания веб-интерфейсов.