Java, UX, HTML, CSS, WEB-design

Создание пользовательских фрагментов Emmet в VS Code


  • Мануэль Матузович

  • 0 Комментарии

Создание пользовательских фрагментов Emmet в VS Code

  • 11 минут чтения

  • Инструменты, Кодирование, Методы

Краткое резюме ↬

В этой статье Мануэль объясняет, почему 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, необходимо выполнить следующие шаги:

  1. Создать фрагменты.json файл, добавьте эту базовую структуру JSON и сохраните ее где-нибудь на жестком диске.
    {
      "html": {
        "snippets": {
        }
      },
      "css": {
        "snippets": {
        }
      }
    }
    
  2. Откройте настройки кода VS (Код → Настройки → Настройки) и найдите «Путь к расширениям Emmet».

  3. Нажмите «Добавить элемент», введите путь к папке, в которой вы сохранили фрагменты.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> и установите текст по умолчанию на &copy.

{${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>

Ладно, хватит разминки. Давайте создадим сложные фрагменты. Сначала я хотел создать один сниппет для своего шаблона, но создал три аббревиатуры, которые служат разным потребностям.

  1. Маленький
  2. Середина
  3. Полный

Шаблон Малый

Это шаблон для быстрых демонстраций, он создает следующее:

  • Базовая структура сайта,
  • 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 Переменная. Здесь вы также можете добавить свои пользовательские переменные.

В VS Code есть 2 переменные по умолчанию: для lang установлено значение en, ​​а для кодировки — UTF-8.

То <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 делает комментарий действительно популярным.

Расширение визуально выделяет определенные ключевые слова, такие как TODO.

То <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};"
Демонстрация всех трех фрагментов CSS, примененных к 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

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

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

Ваш адрес email не будет опубликован.

Краткое описание по статье Создание пользовательских фрагментов Emmet в VS Code

Название: Создание пользовательских фрагментов Emmet в VS Code . Краткое описание: ⭐ Мануэль Ма . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»