A- A A+
Brackets

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

Шаг 7. Быстрый просмотр при наведении

Продолжаем удивляться возможностями редактора. В меню Вид имеется строка Быстрый просмотр при наведении. Если она не активирована, кликнете по ней.

Brackets

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

Brackets

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

Brackets

Очень удобная штука!

Шаг 8. Просмотр редактирования вживую

Вот и мы добрались до офигенной возможности "кавычек".

Предварительно нужно установить браузер Chrome, т.к. с другими браузерами такой фокус не пройдет.

Открываем файл c расширением index.html  и нажимаем кнопку в правом верхнем углу редактора.

Brackets

Также можно открыть браузер клавишами CTRL + ALT + P.

После запуска Хрома, лучше всего его разместить на дополнительном мониторе или свернуть на половину экрана. На второй части экрана разместите редактор.

Теперь любые изменения в файле "index.html" одновременно будут отражаться в браузере, при этом нет необходимости сохранять редактируемый файл и перезагружать страницу браузера. Серьезная экономия времени, однако!

Такое же "живое" редактирование будет при работе с файлами стилей.

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

Шаг 9. Быстрое редактирование HTML

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

Brackets

Более того, можно в код стилей внести изменения, которые автоматически сохранятся в файле стилей. Также, нажав на кнопку "Новое правило", тегу возможно добавить новые свойства и значения, которые также сохранятся в файле CSS (в конце страницы).

Brackets

Подведем итог. Находясь в файле HTML имеется возможность изменить стили, не открывая при этом файл CSS. Фантастика!

Шаг 10. Быстрое редактирование CSS

В CSS быстрое редактирование наиболее практично в отношении подбора цветов. Ставим курс на код цвета и нажимаем CTRL + E. Появляется знакомый инструмент для подбора цвета.

Brackets

Подбираем цвет и закрываем данное окно.

Шаг 11. Подсказки

Подсказки при наборе кода обычное явление для таких программ. Но и здесь Brackets выделяется.

Начинаем вводить свойство стилей и редактор сразу предлагает всевозможные варианты. Достаточно стрелкой выбрать свойство и нажать клавишу ввода (Enter).

Brackets

Теперь пример вставки изображения. Пишем "background-image" и выбираем значение "url". Редактор сразу "спрашивает", где искать картинку.

Brackets

Выбираем папку и сразу выбор из списка всех изображений выбранной папки.

Brackets

Вот такие быстрые подсказки.

Шаг 12. Полезные настройки редактора

Рассмотрим интересные функции меню:

  • Вид => Подсвечивать активную строку - Строка на которой находится курсор будет выделена в зависимости от выбранной темы.
  • Вид => Номера строк - Конечно нужны!
  • Вид => Заворачивать строки - Длинные строки будут переноситься, чтобы их было видно без использования прокрутки.
Brackets
  • Правка => Дублировать (CTRL + D) - Строка в которой находится курсор полностью продублируется в следующей строке.
  • Правка => Удалить строку (CTRL + SHIFT + D) - Быстрое удаление строки.
  • Правка => Переместить строку вверх (CTRL + SHIFT +↑) - Нижняя строка займет место верхней.
  • Правка => Переместить строку вниз (CTRL + SHIFT +↓ - Наоборот.
  • Правка => Показывать подсказки в коде (CTRL + SPACE) - Если при наборе кода не появляются подсказки, их можно вызвать вручную.
  • Правка => Автоматически закрывать скобки - После вставки любой открывающей скобки, закрывающая появится автоматически.
Brackets

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

 

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

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

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

МОЙ TELEGRAM-КАНАЛ

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


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

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

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

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

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

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

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

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