Как ускорить свою разработку в VS Code

Что значит ускорить разработку?

При программировании мы выполняем много рутинной работы, которая отнимает много времени. Чтобы упростить разработку того или иного продукта изначально были придуманы среды разработки такие, как VS Code. Это один из самых мощных инструментов, который сейчас представлен на рынке. На нем можно как писать сайты, так и скрипты на python, php или js. Можно встроить интерпретатор или подключить компилятор внутрь среды и «горячими клавишами» выполнять ту или иную задачу.

Сегодня в статье рассмотрим один из самых крутых инструментов – сниппет.

Что такое сниппет?

Сниппет, грубо говоря, это кусок заранее написанного кода, который можно вызывать внутри среды Vs Code. Представляет из себя json код, который содержит префикс, тело и описание сниппета. В данном случае мы рассмотрим такие сниппеты, которые можно вставить в любом месте нашего файла.

Сниппеты по умолчанию

В VS Code есть снипппеты по умолчанию, которые уже имеются в среде после установки. Самый популярный – это кусок html кода, который встраивается в вашу страницу. Так, например, если создать файл index.html и в первой строчке файла поставить “!” знак и нажать на “Tab”, то у вас встроится следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

Это пустой шаблон html страницы. После встраивания данного сниппета вы можете менять его так, как Вам это нужно

Как это работает?

Сниппеты работают по принципу Emmet. Если вы когда-либо писали сайты или создавали приложения в Visual Studio, то, наверное, знаете про Emmet. Это набор встроенных или установленных плагинов, которые ускоряют разработку путем написания меньшего объема кода. По сути, то же, что будем делать и мы. Так, например, в html с помощью emmet Вы можете писать длинные конструкции в одну строчку и преобразовывать их таким образом:

Пример использования Emmet: sect.first>.wrapper>ul>li*5>a[href='#']{Пункт — $}>img.img

Нажмем Tab и преобразуем в...

Результат отображаемый при нажатии на Tab

Собственные сниппеты

После того, как мы разобрались, что такое сниппеты и какие они бывают по умолчанию, время разобраться с тем, как создать свой собственный. Чтобы создать свой сниппет в Visual Studio Code, необходимо перейти во вкладку “File” → “Preferences” → “User Snippets”

После этого в верху окна откроется окно выбора / создания сниппета:

Отображение существующих сниппетов в VS Code и создание нового глобального / локального сниппета

Здесь до горизонтальной разделительной черты находятся ваши собственные сниппеты. Далее есть пункт, который создает Глобальный сниппет «New Global Snippets file…», он может быть вызван и применен в любом проекте и на любом языке. Также можно создать локальный сниппет для конкретного проекта: «New Snippets file for ‘Project_name’…». В данном случае Ваш сниппет также может быть вызван в любом ЯП (Языке программирования), но внутри вашего проекта или внутри директории, для которой Вы открыли VS Code. Ниже идет список ЯП, для которых можно написать персонализированные сниппеты. Для всех самых и не самых популярных ЯП имеется возможность создать свой сниппет.

Практика

Все сниппеты создаются одинаково. Рассмотрим пример создания глобального сниппета.

Перейдем во вкладку “File” → “Preferences” → “User Snippets”
Выберем «New Global Snippets file…»
Введем в появившемся окне наименование сниппета: «Test-snippet»
Перед нами откроется окно с закомментированным текстом.
Создаем и заполняем свой json фрагмент, сохраняем и все. Ваш сниппет готов

Как заполнить?

Раскомментируем все, что находится ниже слова «Example:».

«Print to console» — это наименование сниппета, он будет отображаться вам при вызове данного сниппета при условии, если отсутствует описание сниппета:

Раскомментированный стандартный глобальный сниппет Print to console с закомментированным 'description'

Пример вызова сниппета 'log' с закомментированным description

«scope» — это поле отображает языки и проекты, где можно использовать вызов данного сниппета. Т.к. по умолчанию стоит javascript и typescript, то, кроме данных файлов, нигде вызвать сниппет не получится.

«prefix» — это префикс вашего сниппета, т.е. короткое название, по которому будет вызываться ваш сниппет.

«body» — это тело сниппета, здесь хранится то, что напечатается после нажатия на кнопку “Tab”.

«description» — это поле «описание», которое поможет вам понять какой именно сниппет Вы вызываете.

Раскомментированный стандартный глобальный сниппет Print to console

Пример

{
    "picture": {
        "prefix": "picture",
        "body": [
"<picture>",
"\t<source type=\"image/webp\" srcset=\"${1:images/}.webp\">",
"\t<source type=\"image/jpeg\" srcset=\"${1:images/}.jpg\">",
"\t<img src=\"${1:images/}.jpg\" alt=\"${2:}\" title=\"${2:}\">",
"</picture>",
"",
        ],
        "description": "Picture progressive media for websites"
    }
}

Создаем сниппет с именем “picture”. Префикс даем аналогичный названию. В “description” пишем, о чем наш сниппет, чтобы всегда смогли понять «что он делает?». И самое интересное “body” – тело нашего сниппета, которое представляет из себя массив строк. Т.о. каждый элемент данного массива будет являться строкой. 0-ой элемент – открывает тег <picture>, на последнем даем отступ от сниппета, на предпоследнем закрываем тег . В 1, 2, 3 элементах массива определяем ресурсы, откуда брать изображения. Обратите внимание, что перед <source> и <img> стоят \t – экранированная “t” – означающая табуляцию. Дальше также экранируем все кавычки и в конце строки не забываем ставить запятую, т.к. это массив.

Что такое ${Num:default} ?

В сниппетах Visual Studio Code есть возможность писать плейсхолдеры. Что же это такое? Это автоматически выделенные области вашего кода, которые можно менять на лету посредством нажатия “Tab”:

Результат работы сниппета: вывод тега picture с source и img

На изображении выше представлен вышеупомянутый сниппет и то, что выделено белой рамкой – это и есть плейсхолдеры (placeholders). Если брать пример выше, то ${Num: default} – это конструкция плейсхолдера, где Num – порядковый номер. Т.к. в srcset и в src нам нужно указать один и тот же путь, но с разными расширениями, то мы просто указываем, что во всех этих полях будет ${1:images/}, где «images/» — значение по умолчанию, которое подставляется в код и при изменении одного из этих полей изменятся все 3. Аналогично для «alt=””» и «title=””», только порядковый номер placeholder-а увеличивается на один.

Как ускорить свою разработку в VS Code — Сниппеты

Реклама