Создание пользовательских фрагментов Emmet в VS Code
⭐
Создание пользовательских фрагментов Emmet в VS Code
В этой статье Мануэль объясняет, почему Emmet является одним из его любимых инструментов повышения производительности для написания HTML и CSS, и как вы можете создавать пользовательские фрагменты кода Emmet в Visual Studio Code, чтобы помочь вам еще больше улучшить свои интерфейсные рабочие процессы.
Ранее в этом году я поделился шаблоном HTML, который мне нравится использовать при запуске новых веб-проектов, с построчными пояснениями в своем блоге. Это коллекция в основном <head> теги и атрибуты, которые я обычно использую на каждом веб-сайте, который я создаю. До недавнего времени я просто копировал и вставлял шаблон всякий раз, когда он мне был нужен, но я решил улучшить свой рабочий процесс, добавив его в виде фрагмента в VS Code — редактор по моему выбору.
Фрагменты и сокращения в коде Visual Studio
VS Code поставляется со встроенными пользовательскими фрагментами, а также фрагментами HTML и CSS и сокращениями, предоставленными Emmet.
Например, если вы наберете p>a{Sign Up} в документе HTML и нажмите Входить или Вкладка, Emmet превратит его в следующую разметку:
<p><a href="">Sign Up</a></p>
Примечание: Посетите документацию Emmet, чтобы узнать, как использовать синтаксис аббревиатуры.
Если нам нужно это конкретное сокращение регулярно, мы можем сохранить его как фрагмент, чтобы еще больше улучшить наш рабочий процесс.
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Теперь мы можем ввести signup и нажмите Входить или Вкладка и мы получим тот же результат. Я объясню, как создавать фрагменты в следующем разделе.
Emmet по умолчанию поставляется с набором фрагментов HTML. Например, ! создает базовую структуру HTML-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Это здорово, но если мы хотим адаптировать этот фрагмент, удалив или добавив элементы и атрибуты, мы должны перезаписать его и создать собственный фрагмент.
Создание и перезапись фрагментов
Если мы хотим создать собственные фрагменты Emmet или перезаписать существующие в VS Code, необходимо выполнить следующие шаги:
- Создать фрагменты.json файл, добавьте эту базовую структуру JSON и сохраните ее где-нибудь на жестком диске.
{ "html": { "snippets": { } }, "css": { "snippets": { } } } - Откройте настройки кода VS (Код → Настройки → Настройки) и найдите «Путь к расширениям Emmet».
![]()
- Нажмите «Добавить элемент», введите путь к папке, в которой вы сохранили фрагменты.json файл, который вы создали ранее, и нажмите «ОК».
![]()
Вот и все. Теперь мы готовы создавать фрагменты, добавляя свойства в html и css объекты, где key это название фрагмента и value аббревиатура или строка.
Некоторые из моих пользовательских фрагментов HTML
Прежде чем мы углубимся в создание сниппетов, и я покажу вам, как я создал сниппет для моего шаблона HTML, давайте сначала разогреемся с некоторыми небольшими, но полезными сниппетами, которые я тоже создал.
Ленивая загрузка
Из коробки есть img аббревиатура, но для лениво загружаемых изображений ее нет. Мы можем использовать аббревиатуру по умолчанию и просто добавить дополнительные атрибуты и значения атрибутов, которые нам нужны, в квадратных скобках.
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
img:l + Входить/Вкладка теперь создает следующую разметку:
<img src="" alt="" width="" height="" loading="lazy">
Страница
Большинство страниц, которые я создаю, состоят из <header>, <main> и <footer> достопримечательности и <h1>. Обычай page аббревиатура позволяет мне быстро создать эту структуру.
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
page + Входить/Вкладка создает следующую разметку:
<header>
<h1></h1>
</header>
<main></main>
<footer>©</footer>
Эта аббревиатура довольно длинная, поэтому давайте разобьем ее на более мелкие части.
Авария
Создать <header> элемент и ребенок <h1>.
header>h1
Поднимитесь, вернитесь на уровень <header>и создайте <footer> что следует <main>.
^main+footer
Установите последнюю позицию табуляции в пределах <footer> и установите текст по умолчанию на ©.
{${0:©}}
Аббревиатура nav просто создает <nav> начальный и конечный теги по умолчанию, но мне обычно нужен <nav> с вложенным <ul>, <li> элементы и ссылки ( <a>). Если есть несколько <nav> элементы на странице, они также должны быть помечены, например, с помощью aria-label.
"nav": "nav[aria-label="${1:Main}"]>ul>(li>a[aria-current="page"]{${2:Current Page}})+(li*3>a{${0:Another Page}})"
Это выглядит дико, так что давайте снова разберемся.
Авария
Мы начинаем с <nav> элемент с aria-label атрибут и вложенный <ul>. ${1:Main} заполняет атрибут текстом «Основной» и создает позицию табуляции на значении атрибута, перемещая на него курсор и выделяя его при создании.
nav[aria-label="${1:Main}"]>ul
Затем мы создаем четыре элемента списка с вложенными ссылками. Первый элемент особенный, потому что он помечает активную страницу с помощью aria-current="page". Мы создаем еще одну позицию табуляции и заполняем ссылку текстом «Текущая страница».
(li>a[aria-current="page"]>{${2:Current Page}})
Наконец, мы добавляем еще три элемента списка со ссылками и текстом ссылки «Другая страница».
(li*3>a>{${0:Another Page}})
Перед нашей адаптацией мы получили это:
Теперь мы получаем это:
<-- After: nav + TAB/Enter -->
<nav aria-label="Main">
<ul>
<li><a href="" aria-current="page">Current Page</a></li>
<li><a href="">Another Page</a></li>
<li><a href="">Another Page</a></li>
<li><a href="">Another Page</a></li>
</ul>
</nav>
Стиль
По умолчанию style аббревиатура только создает <style> начальный и конечный теги, но обычно, когда я использую <style> element Я делаю это, потому что хочу быстро что-то протестировать или отладить.
Давайте добавим некоторые правила по умолчанию в <style> тег:
"style": "style>{\* { box-sizing: border-box; \}}+{n${1:*}:focus \{${2: outline: 2px solid red; }\} }+{n${0}}"
Авария
Некоторые символы (например, $, *, { или }) должны быть экранированы с помощью \.
style>{\* { box-sizing: border-box; \}}
n создает разрыв строки и ${1:*} помещает первую позицию табуляции в селектор *.
{n${1:*}:focus \{${2: outline: 2px solid red; }\}}
- До:
<style><style> - После:
<style> * { box-sizing: border-box; }
*:focus { outline: 2px solid red; } </style>
Ладно, хватит разминки. Давайте создадим сложные фрагменты. Сначала я хотел создать один сниппет для своего шаблона, но создал три аббревиатуры, которые служат разным потребностям.
- Маленький
- Середина
- Полный
Шаблон Малый
Это шаблон для быстрых демонстраций, он создает следующее:
- Базовая структура сайта,
viewportметатег,- Заголовок страницы,
<style>элемент,- А
<h1>.
{
"!": "{<!DOCTYPE html>}+html[lang=${1}${lang}]>(head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)+body>(h1>{${3: New Document}})+{${0}}"
}
Авария
Строка с типом документа:
{<!DOCTYPE html>}
То <html> элемент с lang атрибут. Значение lang атрибут — это переменная, которую вы можете изменить в настройках кода VS (Код → Настройки → Настройки).
html[lang=${1}${lang}]
Вы можете изменить естественный язык страницы по умолчанию, выполнив поиск «переменные emmet» в настройках VS Code и изменив lang Переменная. Здесь вы также можете добавить свои пользовательские переменные.
То <head> включает charset метатег, viewport метатег, <title>, и <style> тег. {} создает новую строку.
(head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)
Давайте сначала быстро посмотрим, что это нам дает.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New document</title>
</head>
</html>
Выглядит нормально, но meta:utf Аббревиатура создает старый способ в HTML для определения charset и meta:vp создает две позиции табуляции, которые мне не нужны, потому что я никогда не использую другой параметр для viewport.
Давайте перезапишем эти фрагменты, прежде чем двигаться дальше.
{
"meta:vp": "meta[name=viewport content="width=device-width, initial-scale=1"]",
"meta:utf": "meta[charset=${charset}]"
}
И последнее, но не менее важное: <body> элемент, <h1> с текстом по умолчанию, за которым следует последняя позиция табуляции.
body>(h1>{${3: New Document}})+{${0}}
Окончательный шаблон:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New document</title>
<style>
* { box-sizing: border-box; }
*:focus { outline: 2px solid red; }
</style>
</head>
<body>
<h1> New Document</h1>
</body>
</html>
Для меня это идеальная минимальная настройка отладки.
Стандартный средний
Хотя я использую первый шаблон только для быстрых демонстраций, второй шаблон можно использовать для сложных страниц. Фрагмент создает следующее:
- Базовая структура сайта,
viewportметатег,- Заголовок страницы,
.no-js/.jsклассы,- Внешний экран и таблицы стилей печати,
descriptionиtheme-colorметатег,- Структура страницы.
{
"!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1:🛑 Change me}}+{}+(script[type="module"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name="description"][content="${2:🛑 Change me (up to ~155 characters)}"]+{<!-- TODO: Change page description --> }+meta[name="theme-color"][content="${2:#FF00FF}"])+body>page"
}
Даааа, я знаю, это выглядит как тарабарщина. Давайте разберем его.
Авария
То doctype и корневой элемент такие же, как в первом примере, но с дополнительным no-js класс и комментарий, напоминающий мне об изменении lang атрибут, если это необходимо.
{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{ }
Расширение TODO Highlight делает комментарий действительно популярным.
То <head> включает charset метатег, viewport метатег, <title>. {} создает новую строку.
(head>meta:utf+meta:vp+{}+title{${1:🛑 Change me}}+{}
Скрипт со строкой JavaScript. Я режу горчицу в поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что этот браузер поддерживает современный JavaScript (например, модули, синтаксис ES 6, выборку и т. д.). Я отправляю большую часть JS только в эти браузеры и использую js класс в CSS, если стиль компонента отличается, когда JavaScript активен.
(script[type="module"]>{document.documentElement.classList.replace('no-js', 'js');})+{}
Два <link> элементы; первая ссылка на основную таблицу стилей, а вторая — на таблицу стилей печати.
link:css+link:print+{}
Описание страницы:
meta[name="description"][content="${2:🛑 Change me (up to ~155 characters)}"]+{ }
То theme-color метатег:
meta[name="theme-color"][content="${2:#FF00FF}"])
Элемент body и базовая структура страницы:
body>page
Окончательный шаблон выглядит так:
<!DOCTYPE html>
<html lang="en" class="no-js">
<!-- TODO: Check lang attribute -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🛑 Change me</title>
<script type="module">
document.documentElement.classList.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/style.css">
<link rel="stylesheet" href="print.css" media="print">
<meta name="description" content="🛑 Change me (up to ~155 characters)">
<!-- TODO: Change page description -->
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<header>
<h1></h1>
</header>
<main></main>
<footer>©</footer>
</body>
</html>
Полный шаблон
Полный шаблон подобен второму шаблону; различия являются дополнительными meta теги и script тег.
Фрагмент создает следующее:
- Базовая структура сайта,
viewportметатег,- Заголовок страницы,
js/no-jsклассы,- Внешний экран и таблицы стилей печати,
descriptionи открытые метатеги графа,theme-colorметатег,- канонический
<link>тег, - теги фавикон,
- Структура страницы,
- script> тег.
{
"!!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1:🛑 Change me}}+{}+(script[type="module"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property="og:title"][content="${1:🛑 Change me}"]+meta[name="description"][content="${2:🛑 Change me (up to ~155 characters)}"]+meta[property="og:description"][content="${2:🛑 Change me (up to ~155 characters)}"]+meta[property="og:image"][content="${1:https://}"]+meta[property="og:locale"][content="${1:en_GB}"]+meta[property="og:type"][content="${1:website}"]+meta[name=":card"][content="${1:summary_large_image}"]+meta[property="og:url"][content="${1:https://}"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel="canonical"][href="${1:https://}"]+{<!-- TODO: Change canonical link --> }+{}+link[rel="icon"][href="${1:/favicon.ico}"]+link[rel="icon"][href="${1:/favicon.svg}"][type="image/svg+xml"]+link[rel="apple-touch-icon"][href="${1:/apple-touch-icon.png}"]+link[rel="manifest"][href="${1:/my.webmanifest}"]+{}+meta[name="theme-color"][content="${2:#FF00FF}"])+body>page+{}+script:src[type="module"]"
}
Этот невероятно длинный фрагмент создает это:
<!DOCTYPE html>
<html lang="en" class="no-js">
<!-- TODO: Check lang attribute -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🛑 Change me</title>
<script type="module">
document.documentElement.classList.replace('no-js', 'js');
</script>
<link rel="stylesheet" href="https://www.smashingmagazine.com/2021/06/custom-emmet-snippets-vscode/style.css">
<link rel="stylesheet" href="print.css" media="print">
<meta property="og:title" content="🛑 Change me">
<meta name="description" content="🛑 Change me (up to ~155 characters)">
<meta property="og:description" content="🛑 Change me (up to ~155 characters)">
<meta property="og:image" content="https://">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name=":card" content="summary_large_image">
<meta property="og:url" content="https://">
<!-- TODO: Change social media stuff -->
<link rel="canonical" href="https://">
<!-- TODO: Change canonical link -->
<link rel="icon" href="http://www.smashingmagazine.com/favicon.ico">
<link rel="icon" href="http://www.smashingmagazine.com/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="http://www.smashingmagazine.com/apple-touch-icon.png">
<link rel="manifest" href="http://www.smashingmagazine.com/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<header>
<h1></h1>
</header>
<main></main>
<footer>©</footer>
<script src="" type="module"></script>
</body>
</html>
Пользовательские фрагменты CSS
Для полноты картины приведу несколько фрагментов CSS, которые я использую.
Отладка
Этот фрагмент создает красный контур толщиной 5 пикселей с произвольным смещением.
"debug": "outline: 5px solid red;noutline-offset: -5px;"
Центрирование
Фрагмент, который устанавливает display для flex и центрирует свои дочерние элементы.
"center": "display: flex;njustify-content: center;nalign-items: center;"
Липкий
Устанавливает position собственность на sticky, с двумя позициями табуляции в top и left имущество.
"sticky": "position: sticky;ntop: ${1:0};nleft: ${2:0};"
div элемент.Пользовательские фрагменты
В начале этой статьи я упомянул, что VS Code также предоставляет пользовательские фрагменты кода. Отличие от фрагментов Emmet заключается в том, что вы не можете использовать сокращения, но вы также можете определять позиции табуляции и использовать внутренние переменные.
Как получить максимальную отдачу от пользовательских фрагментов может быть темой для другой статьи, но вот пример пользовательского фрагмента CSS, который я определил:
"Visually hidden": {
"prefix": "vh",
"body": [
".u-vh {",
" position: absolute;n white-space: nowrap;n width: 1px;n height: 1px;n overflow: hidden;n border: 0;n padding: 0;n clip: rect(0 0 0 0);n clip-path: inset(50%);n margin: -1px;",
"}"
],
"description": "A utility class for screen reader accessible hiding."
}
Этот фрагмент не просто создает правила CSS, а целый блок объявлений, когда мы набираем vh и нажмите Входить или Вкладка.
.u-vh {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
Заключительные слова
Создание этих фрагментов занимает некоторое время, но оно того стоит, потому что вы можете настроить Emmet в соответствии со своими личными предпочтениями, автоматизировать повторяющиеся задачи и сэкономить время в долгосрочной перспективе.
Я хотел бы увидеть, какие фрагменты вы используете, поэтому, пожалуйста, поделитесь ими с нами в комментариях. Если вы хотите использовать мои настройки, вы можете найти мой окончательный файл snippets.json на GitHub.
Ресурсы
- Фрагменты CSS Emmet по умолчанию
- Фрагменты кода HTML Emmet по умолчанию
- Шпаргалка Эммета
- Эммет в документах VS Code
(вф, ил)
Source: https://smashingmagazine.com
Заключение
Вы ознакомились с статьей — Создание пользовательских фрагментов Emmet в VS Code
Пожалуйста оцените статью, и напишите комментарий.
