Brackets и Emmet
Популярный кроссплатформенный текстовый редактор Brackets (бесплатный, для работы с HTML, CSS, JavaScript) от Adobe позволяет подключать плагин быстрой верстки Emmet в несколько нажатий. Достаточно открыть окно плагинов, ввести в поисковую строку ключевую фразу «emmet» и нажать ссылку «Установить». Важно помнить, что Emmet начинает работать только на HTML-странице или в CSS-файле, если вы создаёте CSS-свойства — во вновь созданном пустом документе без расширения ничего сделать не получится.
Brackets и emmet
Видео об установке плагина быстрой верстки и создании каркаса страницы (5 мин)
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Плагины для Brackets
Первым делом предлагаем ученику выбрать, как же будет выглядеть наш редактор, для этого выберем тему для Brackets.
Просим ученика пройти по этой ссылке https://brackets-themes.github.io/ и выбрать тему, которая ему нравится. Мне нравится тема Lion и я покажу пример ее установки (все темы устанавливаются по такому же принципу). Это можно сделать пока устанавливается и качается редактор.
Для того, чтобы поставить выбранную тему надо запомнить или скопировать ее название. Переходим в редактор Brackets и надо попасть в менеджер расширений. Есть два способа в него попасть.
-
Файл > Менеджер расширений
Когда нажали на Менеджер расширений появляется новое окно, ждем когда оно прогрузится. После этого выбираем вкладку Themes, вбиваем в поиске название нашей темы и жмем установить.
Происходит установка темы, после этого закрываем менеджер расширений.
Если по какой-то причине дает сбой, говорит нет подключения к серверу, то это антивирус блокирует нашу программу. Тогда отключаем антивирус и перезапускаем редактор.
Дальше в меню редактора выбираем: Вид > Themes. Появляется новое окно
-
Это темы которые установлены (имеются две по умолчанию темная и светлая)
Переходим к установке расширений. Для этого опять запускаем Менеджер расширений и уже остаемся в первой вкладке (Доступные).
Вот перечень расширений, которые я считаю полезными и которые ускорят разработку сайтов и понимание учеником учебного материала.
Brackets Tree Icons Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.До и после
Autosave Files on Window Blur Плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).
На мой взгляд, очень полезное расширение и нужное, так как у учеников часто вылетают компьютеры или выключается свет, а он не успел сохранить последние изменение, либо вообще не сохранялся весь урок и т.д..
Beautify Простой комбинацией клавиш (Ctrl+Alt+B), нажатием на специальный значок или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.Для того, чтобы плагин работал при сохранении идем в меню: Правка > Использовать Beautify во время сохраненияПосле установки этого плагина на правой панеле появится волшебная палочка.
Special Html Characters Таблица спецсимволов на горячие клавиши (Alt+C), без поиска их в интернете. Вставляет код спец символа на место курсора.
CSS Color Preview Быстрый просмотр цветов. Позволяет сразу увидеть какие цвета были использованы.Чтобы активировать расширение переходим в менюВид > Enable Css Color PreviewПосле активации расширения в css файле слева от цифр показываются цвета, которые используются в строчке напротив которой он стоит.
ColorHints Быстрый выбор цветаКогда добавляем цвет для тега и пишем #, появляется подсказка из цветов, которые мы раньше использовали в этом css файле (от черного к белому).
Color Palette Выбор цвета с картинки.Если открыть картинку через редактор, то это расширение позволяет выбрать нужный цвет с картинки (очень полезно при верстке с макета).После установки плагина появится такая палитра в правом верхнем углу.Для работы выбираем картинку, а потом жмем эту палитру. После того, как выбрали нужный цвет, показывается его код. Можно выбрать в каком формате показывать цвета.
Как установить emmet?
Не получается установить emmet на brackets. Вчера дома на свой ноутбук установился, сегодня на работе для рабочего не устанавливается. Через кнопку install не устанавливается не один плагин, через install from url установились все, кроме emmet-а. Вот ссылка, которую использую https://github.com/emmetio/brackets-emmet . Попробуйте плиз у себя установить.
- Вопрос задан более трёх лет назад
- 7172 просмотра
1 комментарий
Оценить 1 комментарий
Форматирование текста с помощью плагина Emmet
Для того чтобы отформатировать текст в виде html, обычно используются теги. Причём чаще всего сначала формируют разметку документа в виде тегов, а потом внутрь них вставляют текст. Но бывает ситуации, когда текст уже есть, он хорошо отформатирован, разбит на абзацы, заголовки и другие логические части: списки, блоки с кодом и т.п.
Тогда текст проще «оборачивать» в теги.
Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.
Установка плагина Emmet в Brackets
Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку Drag zip here или Установить с URL.
Или еще проще — в поле поиска справа вверху ввести «Emmet» и установить плагин, кликнув на нем.
Аббревиатуры в Emmet
Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.