Веб-редактор Brackets

Что такое Brackets?

Это свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems.

Интерфейс редактора

 На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких  как просмотр HTML-кода в браузере в реальном времени (Live Preview),  упрощение ввода кода и т.д. Принять участие в разработке и поддержке расширений может любой желающий.

Необходимые инструменты:

Инсталляция веб-редактора Brackets

Расширения Brackets, которые стоит установить:

• Emmet - ускоряет ввод кода и создание таблиц стилеq
• Здесь можно посмотреть обучающие видео по работе с Emmet
• Autosave every edit! - автоматически сохраняет каждое изменение кода
• Brackets-color-finder - облегчает выбор цвета

Как установить расширение?

1. Открываем Менеджер расширений:

 2. В первый запуск программа инициализирует расширения, обновляя их базу. В менеджере расширений Brackets есть три вкладки: Доступные, Themes, Установленные. Соответственно нас интересует вкладка Доступные.

3. В поле поиска вводим имя плагина, выбираем плагин и нажимаем «Установить». После установки всех плагинов – желательно перезагрузить программу.

Боковая панель в программе Brackets

Если боковая панель скрыта ее можно развернуть сочетанием клавиш Ctrl+Alt+H или перейдя во вкладку «Вид» – «Показать боковую панель».

Боковая панель в программе Brackets условно делится на две части:

• Рабочие файлы
• Область проекта

Рабочие файлы

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

Если мы кликнули по файлу из области проекта один раз, он открывается в режиме просмотра. Если мы вносим какие-либо изменения (поставим пробел, например), файл автоматически добавится в рабочую область.

Все файлы, в которые были внесены изменения, слева будут помечены большой точкой, напоминающей нам о том, что файл не сохранен (сохраняются файлы сочетанием клавиш Ctrl+S).

При смене проекта программа запоминает файлы над которыми велась работа и по возвращению открывает их в рабочей области.

Чтобы создать новый файл или папку, кликните правой клавишей мыши в любом месте области проекта и в контекстном меню выберите нужный пункт.

С помощью контекстного меню можно переименовывать файлы (F2), удалять и открывать их расположение в проводнике.

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

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

Разделение экрана (Split) в программе Brackets

Для  большинства редакторов кода функция разделения экрана стандартна - это очень удобно при работе с несколькими файлами одновременно.

Экран разделяется на две части – горизонтально или вертикально, в зависимости от наших предпочтений, и имеет три варианта:

• No Split
• Vertical Split
• Horizontal Split

Так выглядит разделение экрана

Управлять функцией разделением экрана в программе Brackets можно несколькими способами:

В главном меню переходим во вкладку «Вид» и выбираем вертикальное или горизонтальное разделение:

Второй способ находится всегда на виду в сайдбаре, хотя и для его включения нужно тоже сделать два клика мышью:

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

Если возникнет необходимость поменять местами открытые файлы просто перетяните их в нужное окно что сайдбаре.

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

Для закрытия разделения экрана проделайте аналогичные действия что и при открытии, но выбирайте «No Split».

Как ускорить работу по созданию кода в Brackets?

Аббревиатуры в Emmet

Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.

Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.

Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.

div превратится в <div></div>

Для того чтобы создать заголовок первого уровня с текстом внутри, нужно набрать h1{Текст заголовка} и нажать Tab.

<h1>Текст заголовка</h1>

Чтобы создать заголовок с текстом-"рыбой", которым обычно является lorem ipsum... - псевдолатинский текст, которым замещают текст в тех блоках, для которых реальный текст ещё не написан, необходимо набрать

h2>lorem3

Цифра после слова lorem указывает на количество слов из этого текста. В нашем примере это 3 слова.

Чтобы создать div с классом block, нужно набрать просто

.block

А для абзаца с классом block обязательно указать тег p:

p.block

А код ниже превратится в абзац, заполненный шаблонным текстом lorem ipsum.

p.block>lorem

Если вам необходимо добавить элемент div с id="wrap", причем с вложенными в него двумя абзацами с текстом lorem ipsum, используйте такую аббревиатуру:

#wrap>p*2>lorem

Оборачивание текста в теги

Для этого необходимо выделить нужный текст и нажать (внимание!) сочетание клавиш Ctrl+Shift+A.

В нижней части редактора будет выведено поле для ввода аббревиатуры. И здесь действуют те же правила. Правда, вряд ли в этом случае вам понадобится текст-рыба 

Полный список аббревиатур Emmet:

https://docs.emmet.io/cheat-sheet/