Как в vs code быстро создать html

Walkthrough: Create a code snippet

You can create a code snippet with only a few steps. All you need to do is create an XML file, fill in the appropriate elements, and add your code to it. You can optionally make use of replacement parameters and project references. Import the snippet to your Visual Studio installation by using the Import button in the Code Snippets Manager (Tools > Code Snippets Manager).

Snippet template

The following XML is the basic snippet template:

Create a code snippet

Create a new XML file in Visual Studio and add the template shown above.

Fill in the title of the snippet in the Title element. Use the title Square Root.

Fill in the language of the snippet in the Language attribute of the Code element. For C#, use CSharp, for Visual Basic, use VB, and for C++, use CPP.

To see all the available language values, browse the Code element attributes section on the Code snippets schema reference page.

Add the snippet code in the CDATA section inside the Code element.

Or for Visual Basic:

You can’t specify how lines of code in the CDATA section of a code snippet should be indented or formatted. Upon insertion, the language service formats the inserted code automatically.

Save the snippet as SquareRoot.snippet (you can save it anywhere).

Import a code snippet

You can import a snippet to your Visual Studio installation by using the Code Snippets Manager. Open it by choosing Tools > Code Snippets Manager.

Click the Import button.

Go to the location where you saved the code snippet in the previous procedure, select it, and click Open.

The Import Code Snippet dialog opens, asking you to choose where to add the snippet from the choices in the right pane. One of the choices should be My Code Snippets. Select it and click Finish, then OK.

The snippet is copied to one of the following locations, depending on the code language:

%USERPROFILE%\Documents\Visual Studio 2019\Code Snippets\Visual C#\My Code Snippets %USERPROFILE%\Documents\Visual Studio 2019\Code Snippets\Visual Basic\My Code Snippets

Test your snippet by opening a C# or Visual Basic project. With a code file open in the editor, choose Snippets > Insert Snippet from the right-click menu, then My Code Snippets. You should see a snippet named Square Root. Double-click it.

The snippet code is inserted in the code file.

Description and shortcut fields

Description fields give more information about your code snippet when viewed in the Code Snippets Manager. The shortcut is a tag that users can type in order to insert your snippet. Edit the snippet you have added by opening the file %USERPROFILE%\Documents\Visual Studio 2019\Code Snippets\[Visual C# or Visual Basic]\My Code Snippet\SquareRoot.snippet.

Since you’re editing the file in the directory where Visual Studio placed it, you don’t need to reimport it to Visual Studio.

Add Author and Description elements to the Header element, and fill them in.

The Header element should look something like this:

Open the Code Snippets Manager and select your code snippet. In the right pane, notice that the Description and Author fields are now populated.

To add a shortcut, add a Shortcut element within the Header element:

Save the snippet file again.

To test the shortcut, open the project you used previously, type sqrt in the editor and press Tab (once for Visual Basic, twice for C#).

The snippet code is inserted.

Replacement parameters

You may want parts of a code snippet to be replaced by the user. For example, you might want the user to replace a variable name with one in their current project. You can provide two types of replacements: literals and objects. Use the Literal element to identify a replacement for a piece of code that is entirely contained within the snippet but will likely be customized after it’s inserted into the code (for example, a string or numeric value). Use the Object element to identify an item that’s required by the code snippet but is likely to be defined outside of the snippet itself (for example, an object instance or a control).

To enable the user to easily replace the number to calculate the square root of, modify the Snippet element of the SquareRoot.snippet file as follows:

Save the snippet file.

Open a project and insert the snippet.

The code snippet is inserted and the editable literal is highlighted for replacement. Hover over the replacement parameter to see the tooltip for the value.

If there’s more than one replaceable parameter in a snippet, you can press Tab to navigate from one to the other to change the values.

Import a namespace

Как плагин Emmet помогает ускорить работу с программным кодом

Frontend-разработчик AFFINAGE Евгений Самойлов рассказывает, как сократить время написания рутинной разметки за счет преобразования простых аббревиатур в полноценные блоки кода.

Что такое Emmet

Emmet — ранее известный как Zen Coding — набор плагинов для текстовых редакторов, которые помогают ускорить написание кода HTML и CSS. Проект начал Вадим Макеев в 2008 году, а с 2009 года и по настоящее время его активно разрабатывает Сергей Чикуёнок и сообщество пользователей Zen Coding.

Писать HTML-код и вводить множество тегов, кавычек и скобок — долго и утомительно. С плагином Emmet эта работа становится гораздо проще — он преобразует простые аббревиатуры в полноценные блоки кода. То есть, вместо того, чтобы набирать руками HTML- и CSS-код полностью, прописываете сокращенные аббревиатуры, нажимаете TAB и код целиком разворачивается.

Работа Emmet похожа на функцию автозамены — того самого Т9 в смартфоне — только более функциональную, за счет использования специального синтаксиса для сокращений. Просто вводите сокращение, псевдоним или несколько первых символов названия тега или свойства, нажимаете TAB и Emmet самостоятельно дописывает остальное.

В статье покажем основные фишки и аббревиатуры этого плагина, которые чаще всего использую при написании программного кода. Материал будет полезен разработчикам, которые пишут много кода, но пока не используют в работе Emmet.

Как установить Emmet

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

Разработчики нашей компании постоянно пользуются этим плагином в работе, но пока готовили материал для статьи, углубились в документацию по Emmet и узнали много нового. На самом деле, чаще всего используют малую часть его возможностей — в основном только то, что постоянно требуется при работе над проектами. Есть очень много фишек, которые могут быть полезны под разные задачи, но в целом их редко применяют.

Создаем «скелет» HTML-документа в два клика

Начнем знакомить вас с возможностями Emmet — для затравочки создадим «скелет» HTML-документа. Вообще, это достаточно большой кусок кода, но чтобы его написать с помощью плагина, достаточно поставить знак «!», нажать кнопку TAB и он развернется в код для стартовой страницы. На скрине видно подсвеченные элементы — это название языка, размеры и другие значения, по которым можно двигаться с помощью TAB и менять на свои.

Набрали знак «!» и нажали TAB — получили «скелет» для стартовой страницы. Подсвеченные значения можно менять под задачи своего проекта.

Синтаксис сокращений

В этом и есть принцип работы Emmet — пишем простые сокращения, нажимаем TAB и они разворачиваются в сложные фрагменты кода. Покажем на примере тега div: чтобы его развернуть, пишем div, нажимаем TAB и разворачивается тег

Можно использовать имена элементов, такие как div для создания HTML-тегов.

У Emmet нет предопределенного набора имен тегов, можно написать любое слово и преобразовать его в тег, например test :

Простые сокращения разворачиваются в сложные фрагменты кода. Любое слово можно преобразовать в тег.

Операторы вложенности

Задать положение элементов внутри генерируемого дерева — должны ли они быть внутри или рядом с элементом контекста — помогают операторы вложенности. Их четыре: «дочерние элементы», «соседние элементы», «группировка» и «поместить выше».

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

Для вложения элементов друг в друга используют дочерние элементы, которые обозначают оператором «>» — знак «больше». Для примера, возьмем такое сокращение: div>ul>li, то есть — div, в который вложен список ul и элементы списка li. Нажимаем TAB и разворачиваем большой кусок кода.

Используется оператор > для вложения элементов друг в друга:

Оператор «>» используют для обозначения вложенности элементов друг в друга. Пишем в несколько раз меньше текста и получаем полноценный кусок кода.

Соседние элементы

Элементы, которые находятся друг под другом называют соседними и обозначают оператором «+» — знак «плюс». Допустим, требуется написать типовой макет страницы, где есть:

Пишем: header+main+sidebar+footer, нажимаем TAB и получаем каждый тег друг под другом.

Для размещения элементов рядом друг с другом, на одном уровне, используется оператор + :

header + main + aside + footer

Для обозначения соседних элементов используют оператор «+». Emmet разворачивает небольшой текст в несколько тегов друг под другом.

Группировка

С помощью круглых скобок «()» можем группировать элементы с разным уровнем вложенности. Допустим, хотим создать страницу с header и footer, а между ними поместить основной контент и боковую панель сайта с соседними операторами вложенности. Тогда прописываем: header+(div>main+aside)+footer — и разворачиваем полноценный кусок кода.

Для группировки элементов используются круглые скобки

header+ ( div>main+aside ) +footer

Круглые скобки помогают группировать элементы с разными уровнями вложенности.

Поместить выше

Этот оператор обозначается знаком «^» — «карет» и помещает тег не выше над элементом, а выше в дереве кода, выводит этот тег из вложенности. На примере: у нас есть тег div, в него вложен main и sidebar. По идее, footer будет на одном уровне с ними, но с помощью оператора «поместить выше» он не будет обернут в div, а выйдет за его пределы и встанет ниже.

Позволяет подняться на один уровень вверх по дереву.

Оператор «^» — поднимает элемент в дереве кода, выводит его из вложенности. Элемент footer выходит из «обертки» тега div и встает выше в дереве кода.

Другой пример: есть div, в него вложен ul и li, а «карет» поднимает p на один уровень — выше ul, но внутри div.

Оператор «^» поднял p на один уровень — выше ul, но внутри div.

Этот оператор можно комбинировать — ставить столько раз, сколько требуется. И каждый раз элемент кода будет подниматься выше по дереву. Допустим, если в том же примере поставить два «карета», то p встанет на одном уровне с div.

Два «^» поднимают p на один уровень с div.

По правде говоря, мы не используем в работе с кодом операторы «группировка» и «поднять вверх» и даже не видим для себя вариантов их применения — они слишком сложные в понимании и использовании. Будет проще и быстрее прописать несколько раз понемногу — ввести название тега, нажать TAB — и он развернётся, а внутри этого куска кода написать еще сколько нужно тегов. Но возможно кто-то найдет применение этим операторам в своих проектах.

Умножение

Более функциональный оператор — «умножение», который обозначается звездочкой «*». Он помогает задать, сколько раз должен выводиться элемент. Например, если нужно развернуть список ul и сделать в нем несколько элементов li — прописываем оператор «умножение», указываем сколько штук нам надо и Emmet автоматически прописывает нам этот код. Будет столько элементов li, сколько указали.

С помощью оператора * можно задать, сколько раз должен выводиться элемент:

Оператор «*» разворачивает код и прописывает три элемента li.

Комбинирование

Можно комбинировать разных операторов — использовать одновременно вложенные и соседние элементы. Допустим, нужно обернуть разметку страницы из предыдущего примера в какой-то wrapper, который будет ограничивать ширину экрана. Тогда добавляем div и вкладываем в него элементы из предыдущего примера: div>header+main+sidebar+footer. Жмем TAB и получаем разметку с разными операторами.

div > header + main + aside + footer

Emmet помогает комбинировать вложенные и соседние элементы.

Операторы атрибутов

Быстро добавить к сгенерированному элементу атрибут помогут специальные операторы:

ID и Class

В Emmet синтаксис для описания элементов похож на CSS-селекторы, в которых обращаемся к элементу по id или классу. Здесь тот же принцип: пишем тег, у него пишем class — через точку, или id — через решетку, и наш тег развернется с соответствующим классом.

Синтаксис Emmet для описания элементов похож на CSS-селекторы

Пишем тег div, через точку прописываем class wrapper, и Emmet разворачивает тег с соответствующим классом.

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

Пишем и id, и class — разворачиваем тег с обоими атрибутами.

Перед class и id не обязательно ставить тег. Если напишем операторы атрибутов без тега — он по-умолчанию развернет тег div.

Не обязательно указывать тэг

Пишем id и class без тега — Emmet по-умолчанию развернет тег div.

Emmet — умный плагин. Посмотрим, что будет, если вложить элемент из предыдущего примера в строчный элемент span. Поначалу кажется, что как и в предыдущем примере должен развернуться тег div, но Emmet понимает контекст и развернет его в span. Плагин понимает даже больше — если бы вместо span был, к примеру, ul, то «ребенок» был бы li.

Emmet понимает контекст и разворачивает кусок кода с тегом span.

Настраиваемые атрибуты

Если хотим добавить какие-то настраиваемые атрибуты к элементу, используем оператор [attr] — как в CSS. Например, чтобы указать тип кнопки disabled — «неактивна» — пишем в квадратных скобках эти атрибуты и Emmet развернет аббревиатуры в нужный код.

Можно использовать [attr] нотацию (как в CSS) для добавления настраиваемых атрибутов к элементу:

button [type=»button» disabled]

Пишем в квадратных скобках нужные атрибуты и плагин разворачивает их в код.

В примере про умножение показывали, как с помощью знака «*» развернуть несколько элементов. Теперь посмотрим, как каждый класс обозначить цифрой — к примеру, от одного до трех. Для этого пишем знак доллара «$» и умножаем на три. Так, к каждому классу добавилась цифра.

С помощью оператора умнжения * можно повторить элементы,

Пишем знак «$» и умножаем «*» на три — к каждому классу добавляем цифра от одного до трех.

Чтобы сделать нумерацию списка в обратную сторону, используем модификатор собаки — «@» с минусом «-».

С помощью модификатора @ можно изменить направление нумерации или изметить началное значение нумерации.

Модификатор «@» с минусом «-» изменил направление нумерации в обратную сторону — от трех до одного.

Также с помощью оператора собаки «@» можно указать, чтобы нумерация начиналась не с единицы, а с какой-то другой цифры. Тогда пишем «$», «@» и цифру, с которой хотим начать нумерацию — например, «тройку». Так, нумерация будет идти в последовательности: 3-4-5 и так далее. Поставим перед «тройкой» минус и нумерация пойдет в обратной последовательности с той цифры, которую мы указали: 3-2-1.

Добавляем текст

Фигурные скобки «<>» помогут добавить в код нужный нам текст. Для этого пишем тег, добавляем фигурные скобки и внутри скобок прописываем свой текст. Нажимаем TAB и получаем текст, который «обернут» в указанный перед фигурными скобками тег.

Для добавления текста к элементу можно использовать фигурные скобки <>

Текст внутри фигурных скобок Emmet разворачивает в текст, «обернутый» в указанный перед скобками тег.

«Рыба» текста — Lorem Ipsum

Разработчикам часто бывает нужно проверить верстку на переполнение или использовать рандомный текст для каких-то других задач. Часто для этого используют специальные сервисы, которые генерируют подобные тексты. Но Emmet помогает не отвлекаться на переключение между вкладками браузера и сделать «рыбу» текста с помощью ввода простой аббревиатуры: lorem. В переводе с греческого, Lorem Ipsum означает «все буквы».

Когда нужно заполнить какой-то элемент кода текстом — пишем сокращение lorem, нажимаем TAB и Emmet разворачивает его в текст из 30 слов.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ducimus expedita quia quo ratione sapiente sed. Ad aut consequatur dolorum ea eius esse ex laborum molestiae quaerat, reiciendis repudiandae vitae.

Пишем lorem, нажимаем TAB и получаем текст из 30 слов.

Если требуется сгенерировать текст определенной длины — после слова lorem пишем цифру, которая обозначает нужное количество слов. Аббревиатура развернется в текст заданного размера. Например, чтобы получить текст из десяти слов — пишем lorem10.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, modi?

Добавляем после аббревиатуры lorem цифру «10» и получаем текст из десяти слов.

Сокращения

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

У Emmet нет предопределенного набора имен тегов, можно написать любое слово и преобразовать его в тег, например test :

Любой текст Emmet может преобразовать в тег.

Правда, несколько элементов, для которых уже предопределенно, как они будут разворачиваться — например, изображение. Если напишем img и нажмём TAB — получим кусок кода с уже встроенными элементами, которые можем заполнить под свои задачи.

Аббревиатуру img Emmet разворачивает в код со встроенными элементами, которые можем заполнять.

Псевдонимы

Названия некоторых тегов очень длинные. Сократить их написание помогают псевдонимы названий тегов. Например, чтобы не писать длинное слово blockquote, используем псевдоним bq, который разворачивается в полноценный тег.

Псевдонимы названий тегов

Псевдонимы помогают сократить время на написание длинных имен тегов.

Пишем свои псевдонимы и сокращения

Такие сокращения можно задавать самостоятельно. Допустим, мы не хотим писать слово section полностью, а хотим, чтобы это было сокращение вида sc. Но в Emmet изначально этого не прописано, поэтому если без настроек просто напишем sc и нажмем TAB — развернется код, который нам не подходит.

Если без предварительных настроек написать сокращение — получим совсем не тот результат.

Разберем, как задать нужное сокращение на примере редакторов VC Code и WebStorm.

Настройки для VS Code

5. Зайдите в файл snippets.json и напишите соответствующий код: для HTML, и новый snippet. В качестве ключа укажите сокращение, которое хотите добавить в Emmet — например, sc. А в качестве значения — то, что должны получить — в нашем случае это section.

Пример кода, который нужно прописать в файле snippets.json, чтобы задать свое сокращение в VS Code для работы с Emmet.

Разворачиваем конструкции любой сложности

В такие сокращения можно вшивать не просто теги, но и конструкции любой сложности HTML-разметки. То есть, написать какой-то большой кусок кода с большой вложенностью, дать ей название, в JSON это все описать. И при вводе сокращения, которое настроили, Emmet развернет большой кусок кода, сгенерированного заранее. Это полезно, если есть какой-то элемент, который часто пишете, вам это надоедает и занимает слишком много времени — можно настроить Emmet так, чтобы он выдавал нужный вам большой кусок кода при вводе короткого сокращения.

Настройки для WebStorm

3. Теперь, когда в WebStorm напишете сокращение и нажмете TAB — развернется тег или кусок кода, который заложили в это сокращение.

После настроек в WebStorm, Emmet разворачивает сокращения в заданные теги или куски кода.

Работаем с BEM

Классическая конструкция: блок, в который вложен какой-то элемент с определенным модификатором.

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

На скрине ниже два варианта написания: первый — для WebStorm, а второй — для VS Code. Разработчики вносят в Emmet свои правила и немного модифицируют его, поэтому в разных визуальных редакторах плагин работает по-своему.

.block>.__el—mod — вариант записи для WebStorm

.block>.-el_mod — вариант записи для VS Code

Поддержка BEM помогает с помощью Emmet работать с кодом еще быстрее.

Настраиваем BEM в VS Code

4. Впишите в настройках JSON соответствующий код: укажите, что в HTML поддерживаем BEM, пропишите, как хотите, чтобы отображался элемент и как хотите, чтобы отображался модификатор. Например, если по BEM «Яндекса» модификатор отображается одним нижним подчеркиванием, а мы привыкли к двойному тире — это можно поменять как будет удобно.

Настраиваем BEM в WebStorm

1. Перейдите в настройки WebStorm: File > Settings (или просто нажмите Ctrl+Alt+S) > Editor > Emmet > HTML;

2. В окне настроек укажите, что будет разделителем для элемента и модификатора и сокращение для элемента. Например, можем задать такие настройки, чтобы при вводе знака тире «-» срабатывала замена на два нижних подчеркивания «__».

Работаем в CSS

Emmet поддерживается также в CSS, поэтому когда пишем сокращения в CSS и нажимаем TAB — плагин разворачивает аббревиатуру в кусок кода. Например, если пишем fz и нажимаем TAB, Emmet развернет его в front-size.

Где посмотреть все сокращения Emmet

Все сокращения можно посмотреть в Шпаргалке на сайте Emmet — их тут очень много. Аббревиатуры, которые часто используете, быстро запомните, потому что это постоянно нужно в работе и будете «на автомате» их применять. А то, что редко используете — скорее всего вам и не нужно запоминать, ведь проще набрать руками, без использования Emmet.

На официальном сайте плагина Emmet.io можно посмотреть все сокращения.

Где потренироваться использовать Emmet

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

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

Школа ленивого разработчика: ускоренный курс по созданию фрагментов кода в VS Code

Каждый разработчик сталкивался с утомительной необходимостью вводить один и тот же повторяющийся код бесконечное количество раз, начиная с цикла for и заканчивая логированием данных или иной раз выводом отформатированного объекта JSON в консоль.

Сокращение количества нажимаемых клавиш поможет любому ленивому разработчику (а это ваш покорный слуга) 😁 улучшить продуктивность работы и сохранить бесценную силу, таящуюся на кончиках пальцев.

Но что же следует предпринять разработчикам, чтобы повысить эффективность своего навыка программирования? 🙄 Или сформулируем по-другому: как улучшить продуктивность в своей среде разработки?

Фрагменты кода 🙀🙀🙀

Никто бы не отказался от способности писать больше кода, нажимая при этом меньше клавиш, и вот тут-то на горизонте появляются Code Snippets (фрагменты кода). Напомню, что “фрагменты кода — это шаблоны, упрощающие ввод повторяющихся паттернов кода, таких как циклы или условные операторы”. Люди годами использовали их для экономии времени, независимо от того, являлись ли они стандартными функциями, файловыми структурами или даже шаблонами для целых систем. В общем, идея стара как мир.

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

VS Code Snippets — это самый мощный инструмент, существенно повышающий производительность разработки.

VS Code Snippets

В редакторе VS Code фрагменты кода появляются в IntelliSense (Ctrl+Space) совместно с другими предложениями подстановки, а также в специальном средстве выбора фрагментов ( Insert Snippet в Command palette — добавить фрагмент в палитре команд).

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

Лучшее достоинство VS Code Snippets заключается в том, что вы можете легко определять свои фрагменты кода без какого-либо расширения. А теперь предлагаю рассмотреть на конкретном примере, как же это сделать.

Создание базового фрагмента кода

Процесс создания фрагментов кода в VS Code одинаков для всех языков программирования. Все пользовательские фрагменты хранятся в файлах JSON (по одному для каждого языка).

В VS Code можно получить к ним доступ через:

File > Preferences > User Snippets (Windows)

Code > Preferences > User Snippets (macOS)

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

Например, мы создадим фрагменты кода для JavaScript, и после выбора данного языка из списка у нас откроется файл javascript.json в новой вкладке окна редактора.

Для нашего фрагмента необходимо создать новый ключ в объекте. Он указывает на объект при помощи трех свойств: prefix (префикс), body (тело) и description (описание).

Выполнив все эти действия, вы получите следующий результат:

Сохранив файл фрагмента кода, вы начинаете вводить “ clog” и получаете новый вариант подстановки. При переходе на него отображается описание фрагмента, а также первая строка кода.

Для раскрытия всего фрагмента выберите его в списке и нажмите Enter или Tab.

Фрагменты кода: глубокое погружение🏊🏾‍♀️

Вывод статических блоков кода, несомненно, является очень эффективным решением, избавляющим нас от необходимости много и долго печатать, но VS Code Snippets позволяет нам пойти еще дальше и сделать их интерактивными.

Добавление позиций табуляции

В процессе вставки фрагментов кода обычно приходится добавлять кое-какую информацию. Будь то присвоение имени функции или выбор переменных, вы можете установить точки в тех частях кода, куда вам нужно ввести эти данные. В итоге при вставке фрагментов вы сможете перемещаться между заданными точками с помощью Tab.

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

Переменные-плейсхолдеры

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

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

Давайте посмотрим, как можно использовать переменные-плейсхолдеры:

Теперь, когда вы вставите фрагмент кода и обновите какой-либо из плейсхолдеров, он также автоматически обновится и в других местах, а это как раз то, что нам нужно!

Принимайте мои поздравления🎊🎉 — вы вышли на совершенно новый уровень лени🥱🥱

Данный подход к разработке фрагментов кода является очень эффективным и поможет вам “сделать в работе паузу и скушать твикс”. Теперь вам нужно запомнить всего одно действие для запуска фрагмента кода, выполняющего стандартную задачу.

Благодарю за внимание!

Да будет счастлив тот, кто пишет код… 👩‍💻 😎

Как сделать свой сниппет в Visual Studio Code

Пошаговая инструкция о том, как создавать свои собственные сниппеты для редактора VSCode: типы сниппетов, правила для названий, структура кода сниппета, примеры

Так что начнём с того, как создавать сниппеты в редакторе Visual Studio Code.

# Создание сниппета в Visual Studio Code

В меню редактора проходим по следующему пути:

Файл → Параметры → Фрагменты кода пользователя

После выбора типа сниппета, появится окно сохранения сниппета. Здесь необходимо задать название для файла со сниппетом(-ами).

Обратите внимание, что в VSCode есть правила для названий файлов со сниппетами.

# Типы сниппетов

В VSCode сниппеты бывают двух типов:

Такой подход снижает нагрузку на работу редактора.

# Код сниппета в VSCode

Как пример, вот файл глобальной видимости main.code-snippets с тремя сниппетами:

# Настройки сниппета

Весь код с настройками пишется внутри глобальный фигурных кавычек

Сначала идёт имя сниппета. В примере это: jQuery, Font_Awesome_5 и Image Placeholder. Как видно можно применять пробелы и нижние подчёркивания.

Каждый сниппет имеет ряд настроек:

Для сниппетов .json применяются такие же настройки кроме scope.

Сниппеты работают сразу после сохранения и не требуют перезагрузки редактора.

# Установка курсора и заполнитель

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

В указанном выше примере со сниппетами, в сниппете Image Placeholder настройка body имеет следующий фрагмент:

# Примеры

Мне вот не нравится, что по умолчанию он прописывает

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

Поэтому я запилил свой сниппет, чтобы развёртывал начальную разметку HTML так как мне нужно.

Удаляем всё что есть в этом файле (если правильно помню там закомментированая инструкция по созданию сниппетов) и вставляем такой код:

Не забудьте после вставки сохранить.

После сниппета с начальной загрузкой HTML на русском, вы можете задать разумный вопрос: «А где в сниппете Meta Keywords и Meta Description?»

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

В упомянутом в предыдущем комментарии файле html.json я отдельно прописываю сниппеты для Meta Keywords и Meta Description.

Вот такой код для этих двух сниппетов:

Теперь чтобы вывести

Запоминать префиксы этих сниппетов хоть и не сложно, но необязательно. Достаточно начать набирать meta и редактор сам предложит варианты в всплывающей подсказке:

можно выбирать вариант как курсором, так и стрелками на клавиатуре + Enter. Ну или до конца набрать префикс сниппета и нажать клавишу Tab.

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

И ещё один вот такой сниппет для вставки фавикона:

Для вывода набираем favicon и жмём Tab.