Продолжаем разбираться с настройками и познакомимся с быстрым просмотром картинок, интерактивным просмотром, подсказками и другими полезными функциями "кавычек".
Шаг 7. Быстрый просмотр при наведении
Продолжаем удивляться возможностями редактора. В меню Вид имеется строка Быстрый просмотр при наведении. Если она не активирована, кликнете по ней.
Данная функция позволяет осуществлять быстрый просмотр цвета и изображения. Открываем файл стилей и наводим на любую строку с кодом цвета. При наведении появляется всплывающее сообщение с отображением цвета, прописанного в коде.
Теперь наводим на значение с указанным путем к картинке и получаем вид изображения с размерами в пикселях.
Очень удобная штука!
Шаг 8. Просмотр редактирования вживую
Вот и мы добрались до офигенной возможности "кавычек".
Предварительно нужно установить браузер Chrome, т.к. с другими браузерами такой фокус не пройдет.
Открываем файл c расширением index.html и нажимаем кнопку в правом верхнем углу редактора.
Также можно открыть браузер клавишами CTRL + ALT + P.
После запуска Хрома, лучше всего его разместить на дополнительном мониторе или свернуть на половину экрана. На второй части экрана разместите редактор.
Теперь любые изменения в файле "index.html" одновременно будут отражаться в браузере, при этом нет необходимости сохранять редактируемый файл и перезагружать страницу браузера. Серьезная экономия времени, однако!
Такое же "живое" редактирование будет при работе с файлами стилей.
При этом очень удобно находить в браузере блоки за которые отвечает HTML-разметка и CSS-стили. Достаточно поставить курсор мыши в любое место кода и в браузере появится рамка(и), показывающая к какому фрагменту контента имеет отношение отмеченный код.
Шаг 9. Быстрое редактирование HTML
В файле HTML ставим курсор на любом теге и нажимаем CTRL + E. Под тегом появится информация о стилях, которые имеют отношение к выбранному тегу.
Более того, можно в код стилей внести изменения, которые автоматически сохранятся в файле стилей. Также, нажав на кнопку "Новое правило", тегу возможно добавить новые свойства и значения, которые также сохранятся в файле CSS (в конце страницы).
Подведем итог. Находясь в файле HTML имеется возможность изменить стили, не открывая при этом файл CSS. Фантастика!
Шаг 10. Быстрое редактирование CSS
В CSS быстрое редактирование наиболее практично в отношении подбора цветов. Ставим курс на код цвета и нажимаем CTRL + E. Появляется знакомый инструмент для подбора цвета.
Подбираем цвет и закрываем данное окно.
Шаг 11. Подсказки
Подсказки при наборе кода обычное явление для таких программ. Но и здесь Brackets выделяется.
Начинаем вводить свойство стилей и редактор сразу предлагает всевозможные варианты. Достаточно стрелкой выбрать свойство и нажать клавишу ввода (Enter).
Теперь пример вставки изображения. Пишем "background-image" и выбираем значение "url". Редактор сразу "спрашивает", где искать картинку.
Выбираем папку и сразу выбор из списка всех изображений выбранной папки.
Вот такие быстрые подсказки.
Шаг 12. Полезные настройки редактора
Рассмотрим интересные функции меню:
- Вид => Подсвечивать активную строку - Строка на которой находится курсор будет выделена в зависимости от выбранной темы.
- Вид => Номера строк - Конечно нужны!
- Вид => Заворачивать строки - Длинные строки будут переноситься, чтобы их было видно без использования прокрутки.
- Правка => Дублировать (CTRL + D) - Строка в которой находится курсор полностью продублируется в следующей строке.
- Правка => Удалить строку (CTRL + SHIFT + D) - Быстрое удаление строки.
- Правка => Переместить строку вверх (CTRL + SHIFT +↑) - Нижняя строка займет место верхней.
- Правка => Переместить строку вниз (CTRL + SHIFT +↓ - Наоборот.
- Правка => Показывать подсказки в коде (CTRL + SPACE) - Если при наборе кода не появляются подсказки, их можно вызвать вручную.
- Правка => Автоматически закрывать скобки - После вставки любой открывающей скобки, закрывающая появится автоматически.
На этом заканчиваем рассмотрение настроек редактора и переходим к установке расширений. Уникальные возможности Brackets на этом не заканчиваются. Дополнительные плагины сделают редактор еще функциональнее!