A- A A+
Brackets

На блоге до сих пор не уделялось внимание редакторам, ориентированным на работу с HTML, CSS, PHP и JavaScript. Однако, пройти мимо Brackets не получилось. Еще бы, разработка от Adobe и при этом бесплатная!

О программе

Автор данного материала перепробовал с десяток подобных редакторов, начиная с простейшего Notepad++ и заканчивая такими монстрами, как Adobe Dreamweaver.

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

Лозунг разработчиков Brackets: "Современный, с открытым исходным кодом текстовый редактор, который понимает веб-дизайн".

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

Шаг 1. Установка

Скачиваем последнюю версию (1.4) по ссылке:

Шаг 2. Боковая панель

Боковая панель скрывается (отображается) с помощью меню Вид => Скрыть боковую панель или сочетанием клавиш CTRL + ALT + H.

В верхней части панели отображаются файлы, которые открыты (Рабочие файлы). Ниже расположены папки с проектами.

Brackets

Папки с проектами добавляются простым перетягиванием из проводника (файлового менеджера) на эту панель.

Открытие файлов производится двойным щелчком мыши. Также редактор позволяет в своем окне полноценно просматривать изображения.

Brackets

Для управления папками и файлами необходимо в любом месте боковой панели, нажать правую кнопку мыши. Появляется контекстное меню с помощью которого возможно выполнить следующие операции: создать файл (папку), переименовать, удалить, показать в проводнике, активировать функции поиска (замены) и обновить проект.

Brackets

Шаг 3. Тема

Наверняка вам захочется, чтобы редактор выглядел более привлекательно. По умолчанию в Brackets имеется 2 темы: "Brackets Light" (светлая) и "Brackets Night" (темная). В этом можно убедиться перейдя в Вид => Themes.

Brackets

Чтобы поменять тему переходим в "Менеджер расширений", который находится в меню Файл. Более удобный способ его вызова состоит в клике на пиктограмму, расположенную в правом верхнем углу редактора.

Brackets

После открытия менеджера, перейдите на вкладку Themes, где дождитесь загрузки всех имеющихся тем.

Brackets

После клика на ссылку "Подробнее" осуществится переход на страницу с темой, где можно будет посмотреть ее демо. Из темных тем рекомендуем - "Stripper".

После выбора темы, в строке с ее названием нажмите кнопку "Установить".

После установки возвращайтесь в Вид => Themes, где в выпадающем списке строки "Current Theme", выберите скачанную тему.

Шаг 4. Шрифт

Если вам не нравится шрифт редактора по умолчанию, его легко изменить.

Перемещаемся в верхнее меню Вид => Themes 

Brackets

В строке Font Family можно вручную прописать свой шрифт. Главное, чтобы он был установлен на вашем компьютере.

Размер шрифта можно изменить также здесь, в строке Font Size или используя следующее сочетание клавиш:

  • Увеличить размер шрифта - CTRL + плюс
  • Уменьшить размер шрифта - CTRL + минус
  • Восстановить размер шрифта - CTRL + ноль (12px)
Brackets

Причем, при использовании указанных сочетаний изменяется и сохраняется именно размер шрифта, а не масштаб страницы!

Шаг 5. Экран

Речь пойдет о такой важной функции, как разделение экрана. В меню Вид имеются 3 пункта:

  • No Split - отмена разделения экрана
  • Vertical Split - вертикальное разделение экрана
  • Horizontal Split - горизонтальное разделение экрана
Brackets

Также, для разделения можно воспользоваться пиктограммой расположенной в верхней части боковой панели.

Brackets

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

Поменять местами открытые файлы можно в боковой панели, перетащив их сверху-вниз и наоборот.

Brackets

Шаг 6. Справочник CSS

Одна из уникальных функций, это быстрое получение технической информации о свойствах стилей.

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

Brackets

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

В следующем уроке продолжим изучать настройки и узнаем о крутой фишке редактора - "Live Preview" (онлайн просмотр).

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!