Скачать программу 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

Для начала о названии и логотипе. 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.

Основной функцией, благодаря которой 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 является мощным текстовым редактором для работы с программным кодом и языками разметки, который обладает очень широким функционалом. Но даже к столь широким возможностям программы можно добавить новые с помощью встраиваемых расширений.

Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков - Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

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

Мы познакомим вас с девятью крутыми плагинами, которые упростят работу в Brackets.

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

Скриншот плагина -CanIUse

Упрощает работу с тегами

    , ,