Brackets как настроить emmet

Как пользоваться редактором Brackets

Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.

Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.

Установка Brackets

На официальном сайте http://brackets.io, вы сразу увидите зеленую кнопочку Download Brackets. Независимо от того, какая у вас стоит операционная система (например Windows 32/64 бит), вы скачиваете этот файл. Процесс установки обычный, без каких-либо особенностей.

Настройка Brackets

Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.

Плагины Brackets

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

Emmet

Плагин Emmet позволяет быстро писать HTML/CSS код, используя сокращенную запись. На сайте https://emmet.io, в разделе документация, есть масса примеров сокращений кода. Потраченное время на изучение документации, окупится очень быстро. Вам останется только сожалеть о том, почему вы не сделали это раньше.

Начало работы

В теле пустого index.html ставим ! восклицательный знак, нажимаем TAB и у нас появляется первоначальная структура документа.

Подключение CSS файла

Пишем название тега link, нажимаем TAB и у нас появляется готовый тег. Нам остается только прописать название CSS файла. Но даже это Emmet делает за нас, указываем первую букву и появляется подсказка.

Написав такую запись в HTML файле.

После нажатия клавиши TAB, развернется такой код.

Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.

Для генерации трех абзацев, нужно написать так:

Вам следует критично оценить свои навыки в верстке и использовать Emmet, если вы легко справляетесь с версткой (не паритесь), но хотели бы верстать ещё быстрее. В противном случае, стоит сначала поучиться верстке, на моём видеокурсе.

Whitespace Normalizer удаляет ненужные пробелы в конце тегов и селекторов.

SASS Hints показывает в подсказках все названия переменных и их значения, когда вы ставите знак доллар.

Indent Guides показывает вертикальные линии, чтобы вы не запутались в открывающих и закрывающих тегах.

Brackets Synapse – это расширение синхронизирующее редактируемые файлы с файлами на хостинге. Отпадает необходимость в загрузке файлов, через FTP программу.

Brackets Snippets позволяет сохранять собственные фрагменты кода в библиотеку, для повторного использования кода.

Как пользоваться Brackets

Горячие клавиши, так же помогут ускорить верстку.

• CTRL++ — увеличивает размер шрифта
• CTRL— — уменьшает размер шрифта
• CTRL+D — дублирует строку
• CTRL+X — удаляет строку
• CTRL+F — вызывает строку поиска, удобно для поиска селектора
• TAB — сдвигает выделенный код вправо
• SHIFT+TAB — сдвигает код влево

В Brackets можно вызвать палитру цветов. Работает это так, ставите курсор в коде цвета и при помощи комбинации клавиш CTRL+E, вызываете палитру и выбираете нужный цвет.

Заключение

Бессмысленно сравнивать Brackets c другими редакторами кода. Каждый работает в той программе, к которой он привык. Но, если вы все ещё верстаете на Notepad++ и не знаете, на какой современный редактор кода перейти. В таком случае Brackets – хороший выбор для верстальщика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

Ускоряем вёрстку, используя Emmet. Руководство по командам и возможностям

Оказывается, можно верстать много, а печатать мало!

Emmet — бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно по ссылке, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы Installation или How to install).

Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.

Чтобы использовать Emmet, его нужно сначала освоить — это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!

В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.

Содержание

Установка

Emmet — это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно — просто бери и пользуйся.

По умолчанию дополнение включено для разных типов файлов. В статье мы рассмотрим только HTML и CSS. О том, как быть с другими типами, можно узнать в документации по VS Code.

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

Emmet на практике: пишем HTML

Теперь разберём, как использовать Emmet в ваших рабочих проектах.

Первое, что мы обычно делаем при создании HTML-разметки, — пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.

Создаём шапку документа в два клика

Кажется удивительным, но с помощью Emmet это можно сделать, нажав всего три кнопки: набрать в редакторе « !» и нажать Tab или Enter. Emmet вставит скелет HTML-документа. Второй способ — набрать « html» и в выпадающем списке выбрать html:5.

Подключаем стили и скрипты

После создания шапки документа мы размещаем теги внутри — с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать « link», а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.

Добавляем ссылки

Благодаря Emmet добавлять ссылки стало легко и приятно.

Пишем « a» и выбираем нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, « a:tel».

Вводим теги

Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.

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

Задаём классы и идентификаторы

После нужного тега добавляем символы « .» или « #», пишем название класса или идентификатора и получаем оформленный тег.

Примечание. Если нужно задать класс или id для тега

Используем группировку и вложенность

До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.

Синтаксис Emmet позволяет создавать сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на математическое уравнение, потому что среди символов есть знаки сложения и умножения.

По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.

Пример 1. Соседние элементы

Знак « +» позволяет создать несколько соседних тегов — то есть расположенных на одном уровне.

Знак « *» повторяет элементы указанное количество раз.

Пример 2. Дочерние элементы

Символ « >» делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.

Пример 3. Сгруппированные элементы

Если при вводе сокращений использовать круглые скобки, то можно сгруппировать элементы с разными уровнями вложенности.

Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.

Всё это мы записали одной строкой, а на выходе получили девять!

Генерируем рыбу-текст

Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.

Оформление стилей страницы. Работа с CSS

После того как мы создали HTML-страницу, переходим к описанию её внешнего вида — то есть к оформлению стилей. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.

Способы ввода сокращений

Все сокращения в CSS — это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву — появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.

Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно « c».

Сочетание « fs» предложит нам font-style, а « fz» — font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.

Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии « d» этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.

Направления полей и отступов

Свойства margin и padding набираются, соответственно, « m» и « p», а чтобы указать направление отступов, достаточно добавить t, b, l и r — top, bottom, left и right соответственно.

Уточнения свойств через двоеточие

В некоторых случаях для ввода пары «свойство — значение» лучше использовать двоеточие. Это конкретизирует сокращение.

При попытке написать « cred» будут предложены варианты c olumn- r ul e -wi d th и даже -webkit- c olumn-b re ak-insi d e. А если использовать двоеточие, Emmet поймёт, что после него вы хотите указать значение red для свойства color.

Единицы измерения

Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов ( normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity — диапазон от 0 до 1, для line-height — множитель.

При написании сокращения для таких свойств достаточно добавить нужное число.

Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели ( px). Если вы хотите указать значение в процентах, то используйте символ « p». Для остальных единиц измерения полностью прописывается их название.

Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.

Несколько значений после двоеточия

Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.

И для такого случая у Emmet есть изящное решение: если единица измерения — пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения ( em, rem, wh, wv и так далее) пишем полностью без пробелов.

Частный случай — указание цвета с прозрачностью.

Использование декларации !important

Здесь всё просто: в конце сокращения ставится восклицательный знак.

Примечание: в курсе по веб-вёрстке мы рекомендуем применять !important в самых крайних случаях. А лучше — не применять совсем.

Подытожим

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

Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.

обложка: Катя Павловская для Skillbox Media

Источник