a humble software engineer
0,0
рейтинг
19 августа 2013 в 04:27

Разработка → Обзор открытой IDE Adobe Brackets


С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост, в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда.

Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

(под катом скриншоты ~1.5Mb)


Интеллектуальное автодополнение кода


Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).

HTML:



CSS:

Автодополнение CSS-свойств



Автодополнение url-параметров



JavaScript (jQuery):





Inline-редактирование кода


Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».

Inline-редактирование CSS кода



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

Быстрый доступ к объявлению функции JavaScript:



На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.

Inline Color Editor:



Inline Bezier Tool:



Инструмент визуализации кривых Безье, используемых в качестве временной функции в CSS transitions. Находится в стадии активной разработки.



Быстрый доступ к документации (Quick Docs)


На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org.





Быстрый доступ к файлам проекта (Quick Open)


При нажатии Ctrl/Cmd-Shift-O всплывает приятная панель быстрого перехода к файлам проекта. Вводим начало имени необходимого файла — получаем результат:





Управление плагинами


За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:



Стоит сказать, что на данный момент уже доступно более 120 дополнений, среди которых можно найти Emmet, средства интеграции c Git, мини-карту кода а-ля Sublime Text и многие другие. Также стоит отметить, что количество доступных плагинов стабильно растёт. Вид IDE с дополнительными плагинами:





Живой предпросмотр (Live Preview) на базе Node.js


По умолчанию живой предпросмотр работает благодаря локальному Node.js-серверу. В предыдущих версиях эта функция работала через file://, что могло вызывать проблемы с интеграцией внешних сервисов, таких как Typekit.

Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии, для JavaScript уже есть плагин, реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:





Локализации


Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот, где есть поддержка кириллицы, но для этого надо немного поработать руками.

Изменение шрифта исходного кода
Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

Пути, где располагаются файлы шрифтов, в разных операционных системах:
  • Linux: /opt/brackets/www/styles/fonts/SourceCodePro/
  • Mac OS X: /Applications/Brackets\ Sprint\ 29.app/Contents/www/styles/fonts/SourceCodePro/
  • Windows: C:\Program Files (x86)\Brackets Sprint 28\www\styles\fonts\SourceCodePro




Responsive Design Tool


В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип этого плагина заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:



Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github'е, он ответил, что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.


Поддержка Linux


На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).



Ограничения Linux-версии и решение проблемы с запуском
Известно много проблем в версии текущей версии для Linux, самые существенные:
  • долгий запуск программы;
  • не работает подсветка в режиме живого предпросмотра;
  • расширения могут быть установлены только вручную в ~/.Brackets/extensions/user;
  • невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).


Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.


Итоги


Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

Ссылки


Официальный сайт, страница загрузки, плагины для Brackets
Проект на Github
Обучающее видео на tuts+
Бэклог проекта

P.S. Если вы нашли ошибку или неточность в тексте, прошу сообщить мне через личные сообщения.
Александр Мышов @Myshov
карма
95,2
рейтинг 0,0
a humble software engineer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (30)

  • +1
    Для изменения шрифта в редакторе есть другой способ: в www/styles/brackets_theme_default.less меняем правило .code-font на любимый шрифт и перезапускаем Brackets.
    • 0
      Спасибо, помогло.
  • 0
    Со стороны выглядит как «Попытка изобразить Sublime Text $ на новый лад».

    Не берусь как-либо критиковать этот редактор, но пока не имеется поддержки Zen-Coding`а, проект сыроват для обильного использования web-разработчиками.
    • +1
      Сергей Чикуёнок уже адаптировал Emmet под Brackets четыре месяца назад. Вот, собственно, сам проект на гитхабе.
      • +2
        Тогда, мне кажется, стоит упомянуть об этом в статье. Это достаточно немаловажный аспект.
        • 0
          Добавил информацию про Emmet в пост.
          Конечно, лучше хотя бы немного взглянуть на страницу плагинов, потому что там есть много всего, чему стоит уделить внимание.
          • 0
            Не спорю, стоит взглянуть. Но всё же, удачная и правильная «реклама» должна заинтересовывать потенциального пользователя.

            Говоря о том, что этот продукт «уже сейчас может стать для web-разработчика полноценным инструментом», следует подчеркнуть какие-либо главные достоинства, черты, позволяющие этому продукту быть тем самым полноценным инструментом. Без упоминания не главного, но по крайней мере обильно используемого Zen-Coding плагина, трудно назвать этот редактор таковым.

            Я не придираюсь, но читая данный пост, я сделал акцент именно на это.
            • +4
              на сколько я понимаю плагины пишутся на js, как и сама ide, а значит веб разработчик может не учить дополнительно питон или яву, чтобы дополнить ide нуным функционалом, что на мой взгляд очень удобно
    • 0
      Надо заметить, что в нем есть одна фича, которую стоит взять на заметку разработчикам Sublime Text(читай: быстро, решительно позаимствовать =). Inlines, на основе которых можно изобразить очень занятные вещи.
  • +3
    Сам не так давно играл с этой штукой, выглядит как вполне достойный кандидат на замену моей любимой коды
    • +1
      Как и ishaba, я поигрался недавно с Бракетс, был очень приятно удивлен. Но некоторых вещей все же не хватало:
      * нет сниппетов
      * нет подсветки выбранной переменной\метода в JS
      * нет мульти редактирования (этого и в вебшторме нет, или я не понял как его включить, хотя колоночный селект есть)
      * нет возможности выбрать цветовую схему (хотя бы для кода)
      Возможно что-то из этого есть и я просто не понял как включить или как это работает, буду благодарен за разъяснения.
      В остальном же вполне приятный проект на замену самблайму
      • +1
        для сниппетов есть экстенш
        а для цветовых схем аж целых два (между собой не конфликтуют)

        он мне теперь еще больше нравится)
      • 0
        Сам спросил, сам отвечу:
        * для сниппетов есть плагин, работает по cmd+alt+v, если написать
        f process
        

        получится:
        function process() {
        
        }
        
        и т.д.
        * Цветовые схемы как для кода так и для всей IDE тоже решаются установкой плагинов
  • +3
    Для языков программирования есть расширения?
    Меня в частности интересуют PHP и Python.

    Я не про подсветку кода, а про синтаксический анализатор и подсказки
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Меня постоянно удручает, что невозможно параллельно с Live Edit открывать Dev Tools в хроме. Если бы допилили функционал как тут, цены бы ему не было.
  • +1
    Эмбеддеры при чтении обзора плачут горькими слезами: как все у вас красиво и удобно выглядит.
  • 0
    Очень классная штука но пока сырая до ужаса. Уже давно слежу за ней, но пересесть пока полноценно не получается — три раза с большим промежутком ставил разные спринты, и каждый раз после пары часов плевался. К сожалению, помочь проекту нет возможности, но надеюсь что рано или поздно, спринту к 50-му это будет уже достаточно полноценный зрелый продукт.
    А пока после долгих поисков все-таки пересел с Text Wrangler на Sublime Text 3 в ожидании рабочих брекетов.
  • +5
    Сайт загрузки не выдержал хабраэффекта.
  • +1
    Так в нём есть множественные редактирования, как в sublime? Без них очень тяжело живется.
    По всей видимости нет. Рановато пока на него переходить.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    deleted, ошибся темой.
  • 0
    После продуктов JetBrains назвать это IDE язык не поворачивается. Текстовый редактор — да, наверное, даже не самый плохой.
  • 0
    Всё бы хорошо, да нет поддержки хоть какого маппинга папок на URL-ы. Даже с помощью плагинов. А жаль. Как следствие, годен только для разработки JS-кода (без include, насколько я понял) и вёрстки проектов, полностью лежащих в одном scope — корне домена. А у меня во всех проектах (не-JS) корень домена — это лишь подпапка public (www, etc.). В остальном, проект интересный, желаю ему скорейшего и гармоничного развития!

    P.S.: А за кириллические Source Sans Pro и Source Code Pro я Adobe поторопил. У них уже внутреннее тестирование проводится.
    • 0
      И когда обещают кириллицу? А то сейчас с русским большие траблы :)
      • 0
        С обещаниями они осторожны. Но давление со стороны общества растет и они задвигались активнее. А шрифт в Brackets поменять просто, в первом комментарии уже написали инструкцию. Под Windows неплохо идет шрифт Consolas.
        • 0
          Как поменять, я знаю :) Хотел уже даже попытаться сделать шрифт, зависимый от локализации. Но, видимо, можно просто подождать.
  • 0
    Как мне кажется, ST без Package Control не обрел бы такой популярности, которая у него сейчас есть. Без него он, по сути, обычный редактор, а с ним установка любого расширения сводится к паре простых действий (я даже не знаю и не хочу знать, куда он их складывает там).
    Вот что-то подобное сюда бы, и было бы просто чудесно.
    • 0
      Ой, не увидел, что 2013 год. Извините.
      • 0
        У Brackets есть отличный менеджер расширений внутри. + Сайт-реестр brackets-registry.aboutweb.com/ и еще один от разработчика расширения «рейтинга расширений» brackets.dnbard.com/.

        — Сегодня вышла мажорная версия 1.0 и таки-да, вместе с Adobe Extract расширением которое позволяет загрузить ваш psd в облако Adobe и верстать «на лету» получая свойства слоев (шрифт, цвет, ширину и тд) прямо в css.
        — О релизе, о том что нас ждет blog.brackets.io/2014/11/04/brackets-1-0-and-extract-for-brackets-preview-now-available/

        Являлся одним из тестеров этого расширения последние 2 месяца и могу сказать что очень помогает ускорить процесс верстки. Вы наверняка в курсе, вот свежее видео.

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