На блоге до сих пор не уделялось внимание редакторам, ориентированным на работу с HTML, CSS, PHP и JavaScript. Однако, пройти мимо Brackets не получилось. Еще бы, разработка от Adobe и при этом бесплатная!
О программе
Автор данного материала перепробовал с десяток подобных редакторов, начиная с простейшего Notepad++ и заканчивая такими монстрами, как Adobe Dreamweaver.
Надолго не задерживался, все время чего-то не хватало. То скорости работы, то функционала. К тому же, практически все редакторы кодов платные.
Лозунг разработчиков Brackets: "Современный, с открытым исходным кодом текстовый редактор, который понимает веб-дизайн".
В Brackets удивило удобство работы, оригинальные идеи, расширяемость посредством множества плагинов, разнообразие тем, интерактивный просмотр, поддержка русского языка. В общем, случилась любовь с первого взгляда!
Шаг 1. Установка
Скачиваем последнюю версию (1.4) по ссылке:
Шаг 2. Боковая панель
Боковая панель скрывается (отображается) с помощью меню Вид => Скрыть боковую панель или сочетанием клавиш CTRL + ALT + H.
В верхней части панели отображаются файлы, которые открыты (Рабочие файлы). Ниже расположены папки с проектами.
Папки с проектами добавляются простым перетягиванием из проводника (файлового менеджера) на эту панель.
Открытие файлов производится двойным щелчком мыши. Также редактор позволяет в своем окне полноценно просматривать изображения.
Для управления папками и файлами необходимо в любом месте боковой панели, нажать правую кнопку мыши. Появляется контекстное меню с помощью которого возможно выполнить следующие операции: создать файл (папку), переименовать, удалить, показать в проводнике, активировать функции поиска (замены) и обновить проект.
Наверняка вам захочется, чтобы редактор выглядел более привлекательно. По умолчанию в Brackets имеется 2 темы: "Brackets Light" (светлая) и "Brackets Night" (темная). В этом можно убедиться перейдя в Вид => Themes.
Чтобы поменять тему переходим в "Менеджер расширений", который находится в меню Файл. Более удобный способ его вызова состоит в клике на пиктограмму, расположенную в правом верхнем углу редактора.
После открытия менеджера, перейдите на вкладку Themes, где дождитесь загрузки всех имеющихся тем.
После клика на ссылку "Подробнее" осуществится переход на страницу с темой, где можно будет посмотреть ее демо. Из темных тем рекомендуем - "Stripper".
После выбора темы, в строке с ее названием нажмите кнопку "Установить".
После установки возвращайтесь в Вид => Themes, где в выпадающем списке строки "Current Theme", выберите скачанную тему.
Если вам не нравится шрифт редактора по умолчанию, его легко изменить.
Перемещаемся в верхнее меню Вид => Themes
В строке Font Family можно вручную прописать свой шрифт. Главное, чтобы он был установлен на вашем компьютере.
Размер шрифта можно изменить также здесь, в строке Font Size или используя следующее сочетание клавиш:
- Увеличить размер шрифта - CTRL + плюс
- Уменьшить размер шрифта - CTRL + минус
- Восстановить размер шрифта - CTRL + ноль (12px)
Причем, при использовании указанных сочетаний изменяется и сохраняется именно размер шрифта, а не масштаб страницы!
Шаг 5. Экран
Речь пойдет о такой важной функции, как разделение экрана. В меню Вид имеются 3 пункта:
- No Split - отмена разделения экрана
- Vertical Split - вертикальное разделение экрана
- Horizontal Split - горизонтальное разделение экрана
Также, для разделения можно воспользоваться пиктограммой расположенной в верхней части боковой панели.
После разделения экрана редактора, в пустое окно поставьте курсор и выберите в боковой панели файл для открытия.
Поменять местами открытые файлы можно в боковой панели, перетащив их сверху-вниз и наоборот.
Шаг 6. Справочник CSS
Одна из уникальных функций, это быстрое получение технической информации о свойствах стилей.
Открываем файл стилей, ставим курсор на любое свойство и нажимаем сочетание клавиш CTRL + K. Под курсором мгновенно появляется информация о выбранном свойстве и его значениях.
Информация на английском языке, но как подсказку в любом случае можно использовать.
В следующем уроке продолжим изучать настройки и узнаем о крутой фишке редактора - "Live Preview" (онлайн просмотр).