brackets_editor_logo

Brackets. Обзор редактора кода

  • 7, Апрель, 2015

Brackets — простой редактор кода

Brackets – проект разработанный компанией Adobe. Изначально задумывался как редактор кода, для упрощённого создания web-приложений. За последний год вышло несколько обновлений, которые не просто повысили работоспособность редактора, но и добавили несколько функций, которые будут полезны разработчикам.

На данный момент актуальная версия — Brackets 1.2.

Давайте начнем с интерфейса программы:

Интерфейс

Интерфейс программы состоит:

  • Меню – файл, правка, поиск и тд
  • Область выбора файлов проекта для редактирования
  • Область написания кода

Так же можно выделить кнопку для включения режима Live Preview, но о ней чуть позже.

Изначально, без плагинов и тем оформлений, интерфейс программы довольно прост и стандартен. Ничего лишнего для начинающего разработчика: подсветка синтаксиса кода в области редактирования, каталог директорий проекта.

С помощью комбинации CTRL++ / CTRL+- можно увеличивать/уменьшать размер шрифта.

С выходом версии 0.42 появилась поддержка смены и установки тем. По стандарту были только Light и Dark. Должен признать, что темная тема для меня приятнее на вид.

Смена тем производиться во вкладке ВидThemes. В той же вкладке можно поменять шрифт и его размер.

theme brackets
Темы в Brackets

Split View

Версия 0.44 исправила большое количество багов, улучшила работоспособность, а также добавила такую функцию как Split View. Эта функция позволят разделить область редактирования на две части, и работать с двумя файлами одновременно. Надо признать — это в разы упростило разработку.

Разделение возможно по горизонтали.

brackets_horizontal
Горизонтальное разделение области редактора Brackets

А так же, можно разделить и по вертикали.

brackets vertical split
Вертикальное разделение области редактора Brackets

Палитра цветов

Так же в Brackets присутствует полезна функция как вызов палитры цветов с помощью комбинации CTRL +E. Работает она так:

Ставите курсов в коде цвета и нажимаете комбинацию CTRL+E. Откроется палитра цветов, где вы можете указать какой цвет и с какой прозрачностью вам нужно.

color in brackets
Палитра цветов Brackets

Extract for brackets (Preview)

Спустя три года после выхода самой первой версии Brackets была выпущена версия 1.0. Помимо улучшения производительности, был добавлен такой плагин как Extract for brackets (Preview).

Он позволяет открывать шаблоны в формате PSD прям в Brackets, и просматривать их как в Photoshop по слоям. С его помощью можно посмотреть размеры того или иного элемента страницы, например блоков, в пикселях или процента, а также его расположение, и потом сразу же в редакторе ввести эти значения.

extract for brackets
Extract for brackets(Review)

Изначально идея отличная, и довольно полезная. Но проблема заключалась в том, что в версии 1.0 плагин некорректно работал, тормозил и нагружал систему.

Так же минусом является необходимость наличия учетной записи в «облаке» Adobe Creative Cloud, потому что PSD шаблоны загружаются туда.

Честно говоря, даже после выхода новых версий, я этой функцией не пользуюсь, из-за «глючности».

Менеджер расширений

Установка плагинов происходит в окне Менеджера расширений, там же можно установить и темы оформления.

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

Emmet – плагин позволяющий с помощью сокращений написать большой код, с экономией времени.

Например:

Написав такой код в html документе:

После нажатия горячих клавиш (стандартно настроено на клавишу TAB) написанный код «развернётся» в

При знании синтаксиса написания, довольно удобно. Но об этом и других плагинах мы поговорим в других статьях.

plagin brackets
Менеджер расширений Brackets

Live Preview

Ну и напоследок расскажу о такой замечательной функции как Live Preview. С помощью этой функции можно видеть результат в реальном времени. Принцип прост: выбираете html документ, включаете Live Preview. Откроется окошко браузера, в котором будет отображаться ваш проект в текущем варианте написания. Стоит добавить, что эта функция работает только с браузером Chrome. Вроде бы говорили о поддержке других браузеров, но только в будущих версий программы.

Но эта функция, на мой взгляд, ключевая. Особенно для разработчиков работающих с двумя экранами.

Заключение

На этом я хочу закончить этот обзор. Еще могу добавить, что Brackets отлично подойдет начинающим web-разработчикам. Я как начинающий верстальщик сайтов, рекомендую использовать его. Этот редактор не требователен к ресурсам, прост в интерфейсе, а с помощью горячих клавиш и плагинов позволяет ускорить и упростить написание кода.

Официальный сайт редактора Brackets.