Меню
ГлавнаяФото и видео

Brackets отзывы. Brackets. Необходимые плагины. Предпросмотр изменений в браузере

Предыстория Brackets

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

Adobe Brackets, да да вы не ослышались — эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code . Так что если вас спросят, знайте — это одно и тоже.

Чем мне приглянулся Brackets?

Первая ассоциация, которая у меня была при открытии софта — блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

Третье, оригинальные идеи, которых я не встречал в SublimeText, да и других редакторах. Интерактивный просмотр и подсветка элементов при верстке, быстрое редактирование, подсказки цвета, встроенная система справок, и многое другое. Особенно меня интересовала парочка плагинов. Об этом я расскажу в конце статьи, в разделе — «Плюшки редактора Brackets» .

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io . Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, Linux так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Brackets – настройки и фишки

  1. Установка редактора
  2. Исправляем проблему русского шрифта
  3. Интерфейс редактора
  4. Базовая настройка Brackets
  5. Split — разделение экрана
  6. Боковая панель
  7. Live Preview — интерактивный просмотр
  8. Inline Editors для HTML — быстрое редактирование
  9. Inline Editors для CSS — быстрое редактиврование
  10. Быстрая документация CSS

Brackets – плагины и расширения

  1. Темы оформления
  2. Brackets Icons — иконки в редакторе
  3. Overscroll – перемотка ниже кода
  4. Special Charecters — таблица спецсимволов
  5. Brackets CSS Color Preview — быстрый просмотр цветов
  6. ColorHints — быстрый выбор цвета
  7. Brackets Color Palette — выбор цвета с картинки
  8. Indent Guides — ориентация во вложенности кода
  9. CodeFolding — сворачивание кода
  10. Documets Toolbar — горизонтальная панель открытых файлов
  11. Emmet — быстрый набор HTML и CSS
  12. CssFier — бысрая вставка селекторов в CSS
  13. Minifier — сжатие CSS и JS файлов
  14. JS Beautifier — форматируем код
  15. Autoprefixer — автоматические префиксы
  16. Extract for Brackets (Preview) — Часть 1
  17. Extract for Brackets (Preview) — Часть 2
  18. eqFTP — клиент прямо в редакторе
  19. QuickFormTool — быстрая вставка форм
  20. SVG Font — просмотр SVG файлов
  21. Brackets Snippets (by zaggino) – сниппеты
  22. Response for Brackets — адаптивный дизайн

А сейчас, как и обещал…

Плюшки редактора Brackets

В начале давайте пробежимся по плюсам самой программы, а затем затронем «особенные» расширения и плагины, от которых я просто балдею.

Интерактивный просмотр (Live Preview)

Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют — живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

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

А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем — сами все увидите.

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

Если вы хотите подключить какой-то файл, стили, скрипты, картинки — не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!

Плагины и расширения Brackets (самые самые):

Brackets Emmet (22)

Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша написание кода ускориться раз этак в 10. Это расширение из разряда «Must Have» , которое должно стоять в каждом редакторе.

Extract for Brackets (Preview)

Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета . То есть, в программу Photoshop залазить уже не надо.

Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

Response for Brackets

Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

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

Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Косяки редактора Brackets.

Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.

Во-первых — никогда не ставьте сразу несколько плагинов. Особенно это касается тех, которые не будут описываться в видеокурсе. Просто некоторые из них работают криво с новой версией редактора. И он может начать глючить.

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

Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей.

В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

  • Ставьте Brackets не на системный диск
  • Установите Nodejs
  • Пробуйте запускать от имени администратора

Сегодня рассмотрим одну из программ, которую мы будем использовать для работы с версткой страниц – это Brackets. Скачать и установить программу можно с официального сайта по адресу brackets.io . В самой установке нет ничего сложного, а вот настройка для удобной работы займет у вас 5 минут.

Устанавливаем плагины в Brackets

Установка плагинов – это просто как дважды два. Запускаем Brackets, ищем панель в левой части и выбираем кнопку «Менеджер расширений».

В первый запуск программа инициализирует расширения, обновляя их базу. В менеджере расширений Brackets есть три вкладки: Доступные, Themes, Установленные . Соответственно нас интересуем вкладка Доступные .

В поле поиска вводим имя плагина, выбираем плагин и нажимаем «Установить». После установки всех плагинов – желательно перезагрузить программу.

Приведу ниже список плагинов, которые нам понадобятся:

  • Emmet – плагин, который позволяет значительно ускорить написание кода html и css используя сокращения и аббревиатуры. Так, если вы хотите, чтобы знак восклицания (!) после нажатия клавиши tab превращался в полноценную html страницу то этот плагин вам необходим. Также позволяет оборачивать текст тегами HTML .
  • Tabs — Custom Working – плагин, который добавляет красивые вкладки в Brackets. Помечает несохраненные файлы с помощью зеленых кружков. Основное назначение плагина – сделать работу более наглядной.
  • Overscroll – плагин, который позволяет прокручивать код до конца страницы и даже делать прокрутку пустой области.
  • Code Font – в современных версиях Brackets позволяет менять шрифт кода. В старых версиях – просто необходим, поскольку программа очень некрасиво отображала русский шрифт.
  • Brackets Additional Right Click Menu – добавляет в контекстное меню много удобных «плюшек» — например пункты «Скопировать» и «Вставить».
  • Autosave Files on Window Blur – плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).

Напоминаю, что после установки плагинов перезагрузите Brackets.

Также смотрите наше видео по установке плагинов в Brackets.

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

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

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

Интерфейс

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

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

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

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

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

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

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

Темы в Brackets

Split View

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

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


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

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


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

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

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

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


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

Extract for brackets (Preview)

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

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


Extract for brackets(Review)

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

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

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

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

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

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

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

Например:

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

XHTML

ul>li*4>a

ul> li* 4> a[ href= # ]

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

XHTML

    Live Preview

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

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

    Заключение

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

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

Текстовый редактор Brackets 1.6 – отлично подходит для верстки веб-сайтов. Это великолепный инструмент от разработчиков компании Adobe. С функцией лайвкодинга (livecoding) вам не придется перезагружать страницу во время верстки.

Описание редактора Brackets

В общем, внешний вид редактора можно настраивать на свое усмотрение. В нем присутствует набор стандартных тем оформления. Каждая тема меняет внешний вид окна редактирования кода. Здесь меняется как фон, так и подсветка синтаксиса. Присутствуют и темные, и светлые темы. По умолчанию, все открытые файлы и папки группируются в левой панели, но их, также, можно разместить и в виде вкладок, над открытым редактируемым файлом. То есть в Brackets все сделано таким образом, чтобы вы смогли сделать все наиболее удобным для себя.

Возможности Brackets

Данный текстовый редактор разработан с помощью веб-технологий и имеет все их преимущества. Например, это кроссплатформенность. То есть вы сможете запустить Brackets на любой платформе, будь то Windows, Linux или Mac.

Brackets имеет встроенный Color Picker для определения цвета во время верстки. Красиво и быстро работает автодополнение кода, причем имеется еще и система автодополнения путей к файлам и изображениям. Это будет экономить вам кучу времени и избавит от поиска нужных файлов по папкам. Плюс, присутствует сниппет для вставки текста-рыбы (lorem ipsum).

Также, помимо встроенных функций Brackets вы сможете расширить его функциональность при помощи плагинов. В маленьком вертикальном столбике справа есть иконка, похожа на элемент конструктора lego. При нажатии на нее откроется модальное окно со списком всех доступных плагинов. Их установка занимает всего несколько секунд и производится нажатием лишь одной кнопки.

Наверное, самой важной и отличительной особенностью Brackets является функция livecoding, которая отображает все изменения в коде сразу на веб-странице. Данная функция реализована здесь отлично. Это не банальная перезагрузка после внесения изменений, это именно лайвкодинг. Чтобы запустить ее нужно нажать на иконку в виде молнии в правой панели редактора. Это действие откроет в браузере файл для живого просмотра. Также, здесь можно включить функцию подсветки на странице того места где вы находитесь в коде. Это очень удобно и при частой работе с ней экономит для вас массу драгоценного времени.

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

Технические характеристики:

Версия: Brackets 1.6
Статус: Бесплатно
Язык: Русский
Автор: Adobe
Система: Windows
Размер: 36.7Mb

Веб-мастера и программисты для создания сайтов довольно часто используют текстовые редакторы. Но функционал обычных программ данной группы, например, Блокнота, слишком узок для людей, работающих в указанном направлении. Для них создаются специальные приложения, предназначенные для работы с языками разметки. Одним из таковых является бесплатный текстовый редактор Brackets от компании Adobe.

Основной функцией, благодаря которой Brackets пользуется популярностью у верстальщиков, является поддержка большого количества языков разметки и веб-программирования, а именно: HTML, Java, JavaScript, CSS, C++, C, C#, JSON, Perl, SQL, PHP, Python и многих других (всего 43 наименования).

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

Работа с текстом

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

Brackets умеет работать с очень большим перечнем текстовых кодировок: UTF-8 (по умолчанию), Windows 1250 – 1258, KOI8-R, KOI8-Ru и другими (всего 43 наименования).

Предпросмотр изменений в браузере

Brackets поддерживает функцию «Live Preview» , которая заключается в том, что все изменения, произведенные в текстовом редакторе, можно будет тут же посмотреть в браузере Google Chrome . Поэтому для возможности использования указанной функции наличие данного веб-обозревателя на компьютере обязательно. Верстальщик может сразу видеть, как произведенные им действия сказываются на видимом для пользователя интерфейсе веб-страницы, так как все изменения отображаются в Гугл Хром синхронно при сохранении файла.

Управления файлами

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

Интеграция в контекстное меню

Благодаря интеграции в контекстное меню «Проводника Windows» , можно любой файл открыть при помощи Brackets без предварительного запуска самой программы.

Режим отладки

С помощью Brackets можно просматривать и редактировать веб-страницы в режиме отладки.

Поиск и замена

В программе предусмотрена удобная функция поиска и замены по тексту или по коду разметки.

Работа с расширениями

Существует возможность увеличить функционал Brackets путем установки встраиваемых расширений. Управлять ими можно при помощи специального «Менеджера расширений» в отдельном окне. Используя эти элементы, можно добавлять в программу поддержку новых языков разметки и программирования, изменять темы оформления интерфейса, работать с удаленным FTP-сервером, управлять версиями приложения, а также встраивать другой функционал, не предусмотренный в исходном варианте текстового редактора.

Достоинства

  • Кроссплатформенность;
  • Мультиязычность (31 язык, включая русский);
  • Большое количество поддерживаемых языков программирования и текстовых кодировок;
  • Возможность добавления нового функционала при помощи расширений.

Недостатки

  • Функция «Live Preview» доступна только через браузер Google Chrome;
  • Некоторые разделы программы не русифицированы.

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