Обзор открытой 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:
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-версии и решение проблемы с запуском
- долгий запуск программы;
- не работает подсветка в режиме живого предпросмотра;
- расширения могут быть установлены только вручную в ~/.Brackets/extensions/user;
- невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).
Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.
Итоги
Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.
Ссылки
P.S. Если вы нашли ошибку или неточность в тексте, прошу сообщить мне через личные сообщения.
НАЧАЛО РАБОТЫ С BRACKETS
Добро пожаловать в раннюю версию Brackets, нового редактора с открытым исходным кодом для веба следующего поколения. Мы большие фанаты стандартов и хотим построить лучший инструмент для JavaScript, HTML и CSS и связанных с ними открытых веб-технологий. Это наше скромное начало.
Во многих отношениях, Brackets необычный редактор. Одна примечательная особенность в том, что этот редактор написан на JavaScript, HTML and CSS. Это означает, что большинство пользователей Brackets имеют навыки необходимые для доработки и расширения редактора. На самом деле, мы используем Brackets каждый день для того, чтобы улучшать Brackets. Он так же имеет несколько особенностей вроде Быстрого Редактирования, Интерактивного Просмотра и других, которые вы не сможете найти в других редакторах. Читайте далее для того чтобы узнать, как использовать эти особенности редактора.
Мы испытываем несколько новых штук
Быстрое редактирование CSS и JavaScript
Теперь никакого переключения между документами и потери контекста. Во время редактирования HTML используйте сочетание клавиш Cmd/Ctrl + E для открытия быстрого редактора, который показывает все связанное с этой строкой CSS. Сделайте изменение CSS-стилей, нажмите ESC и вернитесь обратно к редактированию HTML. Или просто оставьте блок с CSS-правилами открытым, и они станут частью вашего HTML-редактора. Если вы нажмете ESC вне быстрого редактора, все CSS-правила закроются.
Хотите увидеть это в действии? Поставьте курсор на теге —> выше и нажмите Cmd/Ctrl + E . Вы должны увидеть, как выше появится быстрый редактор CSS. Справа вы увидите список CSS-правил, которые относятся к этому тегу. Просто прокрутите правила вниз, используя Alt + Up/Down , чтобы найти то, которое вы хотите отредактировать.
Вы так же можете использовать эти горячие клавиши при работе с кодом JavaScript, для того, чтобы увидеть содержание функции, просто наведите курсор на её название. На данный момент внутри встроенного редактора нельзя открыть еще один, поэтому вы можете использовать только Быстрое Редактирование, когда курсор находится в «полноэкранном» редакторе.
Просматривайте изменения CSS вживую в браузере!
Вы знаете эти пляски с «сохранить/перезагрузить», которые мы делаем годами? Когда вы делаете изменения в вашем редакторе, нажимаете сохранить, переключаетесь в браузер и затем нажимаете перезагрузить, чтобы наконец увидеть результат? Вместе с Brackets этого больше не придется делать.
Brackets откроет прямое соединение с вашим локальным браузером и направит ваши изменения CSS, как только вы их напечатаете! Вы, возможно, уже делали что-то подобное с инструментами, встроенными в браузер, но с Brackets больше нет нужды копировать и вставлять финальный CSS обратно в редактор. Ваш код запускается в браузере, но живет в вашем редакторе!
Подсвечивание HTML-элементов и CSS-правил в реальном времени
С Brackets стало проще понять, как изменения в HTML и CSS отразятся на странице. Когда ваш курсор находится на CSS-правиле, Brackets подсветит все затронутые элементы в браузере. То же самое и с редактированием HTML-файла, Brackets будет подсвечивать соответсвующие HTML-элементы в браузере.
Если у вас есть установленный Google Chrome, вы можете попробовать это сами. Нажмите на иконку молнии в правом верхнем углу или нажмите Cmd/Ctrl + Alt + P . Когда Интерактивный Просмотр включен в HTML-документе, все подключенные CSS-документы могут редактироваться в реальном времени. Иконка изменится с серой на золотую, когда Brackets установит соединение с вашим браузером. Теперь, поставьте курсор на теге —> выше и используйте Cmd/Ctrl + E , чтобы открыть записанные CSS-правила. Попробуйте изменить размер границы с 10 пикселя до 20 или изменить цвет фона с «transparent» на «hotpink». Если Brackets и ваш браузер работают вместе, вы увидите, как ваши изменения мгновенно отразятся в вашем браузере. Круто, правда?
Сегодня, Brackets поддерживает Интерактивный Просмотр только для CSS. Сейчас мы работаем над поддержкой Интерактивного Просмотра для HTML и JavaScript. В текущей версии вы не увидите изменений в вашем HTML- или JavaScript-файле до тех пор, пока не сохраните документ. Интерактивный Просмотр работает только с Google Chrome. Но в будушем мы планируем добавить эту возможность для всех основных браузеров.
Быстрый просмотр
Для тех из нас, кто до сих пор не запомнил значения цветов для HEX или RGB, Brackets позволяет быстро и просто посмотреть напрямую, какой цвет используется. В любом CSS- или HTML-файле, просто наведите курсор на значение цвета или градиента и Brackets автоматически отобразит этот цвет/градиент. То же самое и с изображениями: просто наведите курсор на ссылку с изображением в редакторе и Brackets выведет миниатюру этого изображения.
Попробуйте быстрый просмотр сами, поместите курсор на тэг —> вверху этого документа и нажмите Cmd/Ctrl + E для того, чтобы открыть быстрый редактор CSS. Сейчас просто наведите курсор на любое значение цвета в CSS. Вы так же можете увидеть это в действии с градиентом, открыв быстрый редактор CSS на тэге —> и наведя курсор на любое значение фонового рисунка. Попробуйте быстрый просмотр изображений, поместите ваш курсор на любой скриншот в этом документе.
Принимайте участие
Brackets — проект с открытым исходным кодом. Веб-разработчики со всех уголков мира способствуют созданию лучшего редактора кода. Многие разрабатывают дополнения, которые расширяют возможности Brackets. Расскажите нам, что вы думаете, поделитесь идеями или непосредственно поддержите проект.
- Brackets.io
- Блог команды Brackets
- Brackets на GitHub
- Brackets Wiki
- Почтовая рассылка разработчиков Brackets
- @Brackets в Twitter
- Общайтесь с разработчиками Brackets в IRC в #brackets на Freenode
Как работать в brackets
Summary —
In this page, we describes about audiences, objective, prerequisites and the topics that are covered as part of tutorial.
Introduction —
Adobe bracket editor is an open-source code editor, lightweight software for front-end development and very useful to the web designers.
Brackets is written in HTML, CSS, and JavaScript.
Brackets have close-by features along with CSS code reference and HTML development.
Brackets allow us to see the live preview, that means the new changes incorporated in the code using the editor can immediately reflected on the browser without saving or reload the page.
Audiences —
The tutorial is for anyone who can be a student, a fresher, a software engineer, a web developer, an expert or anyone who is trying to develop a web project or working on web developement using Brackets Editor.
In this tutorial, all the topics are covered with in-depth information that includes screenshots and useful to improve your programming skills.
Objective —
The objective of this tutorial is to support web developers with all the information about best editor to develop their project.
Prerequisites —
There are no prerequisites to learn the Brackets. Having a computation background and having any other code editor experience will be an advantage in understanding the concepts a bit easier. Without a computation background, it is a bit time-consuming to understand the concepts, and you need to go through the topic more than once to understand clearly.
- Brackets Tutorial
- Overview
- Introduction
- Download & Installation
- Basics
- Working Files Section
- Sorting Files Section
- Split Editor Section
- Getting Started Section
- Extensions Manager
- Customizing workstation
- File Menu
- Edit Menu
- Opening projects
- Opening File
- File management
- Quick edit
- Live Preview
- Other Features
- Shortcuts
- Extensions
- Themes
- Emmet
- Emmet HTML
- Emmet CSS
- JavaScript
- Bootstrap
- PHP
- Debug
Brackets для сомневающихся и новичков
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.
Введение
- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Функционал «из коробки»
- плагин для Live Preview — работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения
- подсветка синтаксиса
- подсказки при редактировании CSS, JS и HTML-файлов
- корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.
Brackets из коробки
Общего назначения
Extensions Rating
Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения.
До и после
Brackets Git
Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.
Git в Brackets
Code Folding
Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.
Сворачивание кода
Emmet
В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:button.btn.btn-primary
После нажатия клавиши Tab она будет развёрнута в такую:
Идём дальше:
div.btn-toolbar>(button.btn.btn-default)*3по нажатию развернётся в
Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
Прощай, Zen Coding. Привет, Emmet!
Вышел Emmet v1.0
Также рекомендую официальную инструкцию (на английском).Codeoverview
Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.
Помимо плагина CodeOverview есть также BluePrint в стадии Beta. Какой лучше — решайте сами.Обзор кода
Documents Toolbar
Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).
Brackets Fonts
Позволяет выбрать из списка шрифт, которым будет выводиться текст в редакторе. Обратите внимание на то, как стали отображаться кириллические символы. Кроме этого есть ещё несколько плагинов с таким же функционалом. Имеется возможность открыть в меню пункт Вид/Themes, где вручную прописать, какие шрифты следует использовать.
Шрифты
Http Server for Brackets
- Это не LivePreview, т.е. страницу надо обновлять вручную.
- Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
Grunt for Brackets
Brackets может предложить плагин для Grunt’а. Его настройка — отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp — признак дурного тона и несерьёзности разработчика.
Beautify, Beautifer
Простым нажатием комбинации клавиш Ctrl+L или Ctrl+B плохо оформленный JS- или HTML-код превращается в оформленный вполне приемлемо. На картинках global_main.js Хабра до и после применения данного плагина. Не используйте эти плагины для LESS! Они вставляют пробелы после двоеточий, что делает LESS-файл некомпилируемым.
Ассистент, всё в мясорубку!
QuickSearch
При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++, чего не скрывает.
Notepad++? Нет.
SFtpUpload, FTP-Sync
Позволяют выгружать файлы проекта на сервер через (S)FTP. Умеют в авторизацию по ключу.
FTP Sync, SFtpUpload
Верстальщику
LESS Autocompile
-
В заголовке .less-файла нужно написать что-то вроде:
// out: ../css/login.cssBrackets Autoprefixer
Думаю, этот плагин не нуждается в представлении. Он вставляет в имеющийся CSS-файл необходимые дополнения для поддержки вендорных префиксов и старых браузеров. В зависимости от настроек можно получить самые разные результаты. Имеет довольно простое окно параметров. Полный список можно посмотреть на странице проекта на GitHub.
Минимализм настроек Autoperefixer
CSSLint, LESSLint, LESS StyleSheets Formatter
Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.
Ошибки в CSS
HTMLHint, More CSS Code Hints, More HTML5 Code Hints
Плагины просто дают больше подсказок при правке HTML и CSS. Учитывая, с какой скоростью базовую поставку Brackets добавляются различные улучшения и дополнения, следует ждать интеграции функционала этих плагинов в ядро.
ColorHints, Brackets Color Picker
Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color.
Подсказки при вводе градиентов и цвета
JavaScript-разработчику
JSHint, JSLint, JSHint Configurator, JSLint Configurator
Крайне полезные плагины для разработчиков, которые не только верстают, но и пишут код на JavaScript. На выбор JSHint и JSLint, хотя можно использовать оба (второй куда более предвзято отнесётся к вашему коду). Конфигураторы, как видно из названия, позволяют настроить разные параметры проверки кода, например, игнорировать использование функции requirejs до её объявления.
Все и так знают, для чего нужен каждый из параметров
FuncDocr
Плагин позволяет быстро документировать функции JS.
Например, имеется следующий код:Desktop.prototype.addResizeHandler = function(handler) < if ($.isFunction(handler)) < this.resizeActions.push(handler); >>;Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
/** * [[Description]] * @param handler [[Description]] */ Desktop.prototype.addResizeHandler = function(handler) < if ($.isFunction(handler)) < this.resizeActions.push(handler); >>;AngularJS Code Hints, AngularJS for Brackets
Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.
Rename JavaScript Identifier
Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.
Ложка дёгтя
При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная — скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов. Второе — довольно неудобное дерево навигации. Третье — некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.
- Overview