Основные фрагменты кода VS Code для эффективной разработки – techsyncer

При написании последнего кода в Visual Studio Code (VS Code) вы когда-нибудь замечали, что печатаете одно и то же снова и снова? Возможно, вы уже десять раз сегодня написали объявление функции или определили один и тот же набор параметров в команде в двадцатый раз. Знали ли вы, что вы можете вернуть себе время и здравомыслие, используя фрагменты кода Visual Studio?

Фрагменты кода Visual Studio – это небольшие фрагменты текста, сохраненные в VS Code. Вы можете вызывать эти фрагменты через меню или последовательность клавиш и сэкономить массу времени, когда вам приходится повторять блоки текста с небольшими отличиями между каждым вхождением.

Например, ниже вы можете видеть, что просто набрав wvb в VS Code, у вас есть возможность развернуть гораздо больше текста, как указано в текстовом блоке Write-Verbose. В этом и заключается сила фрагментов кода!

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

Предварительные требования

Эта статья будет пошаговым руководством, чтобы вы могли сразу попрактиковаться. Если вы собираетесь следовать инструкциям по работе с фрагментами кода VS Code, вам потребуется версия VS Code 1.17 или выше. Я буду использовать VS Code 1.38.1 на Windows.

Вы можете скачать последнюю версию VS Code для вашей платформы здесь.

Поиск фрагментов кода VS Code

Прежде чем вы начнете создавать свои сниппеты (что вы и сделаете), важно научиться находить встроенные сниппеты, доступные вам.

Вы можете найти все сниппеты в интерфейсе меню. Интерфейс меню позволяет вам просматривать и использовать сниппеты. Чтобы получить доступ к меню, вы можете либо нажать F1 или Ctrl-Shift-P, ввести “сниппет” и нажать Enter. Вы увидите всплывающее меню, подобное тому, что показано ниже.

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

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

Расширения языка

Вы можете использовать VS Code для работы с различными языками. Каждый язык имеет свои особенности. Для поддержки этих различий VS Code поддерживает расширения языка.

Расширения языка предоставляют VS Code интеллектуальные функции редактирования для разных языков программирования. Расширения языка предоставляют дополнительную поддержку программированию, такую как:

Подсветка синтаксиса
Интеллектуальный анализ
Форматирование
Проверка ошибок
Завершение сниппетов

Расширения устанавливаются через меню расширений VS Code.

Вы можете ознакомиться с определением этих фрагментов кода, предоставленных расширениями языка, открыв JSON-файл в Windows по адресу C:\Users<ИмяПользователя>.vscode\extensions\ms-code.-\snippets.

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

Раскрытие сниппетов

При выборе сниппета через интерфейс меню вы увидите содержимое сниппета в файле. Этот процесс преобразования определений сниппетов в полезный код называется раскрытием.

При вызове префикса, VS Code читает этот конкретный префикс и выполняет инструкции, определенные в сниппете. Эти инструкции могут варьироваться от сниппета к сниппету. Весь этот процесс вызова, преобразования и вставки сниппета называется раскрытием.

Использование сниппетов расширений VS Code

Некоторые сниппеты по умолчанию поставляются вместе с VS Code, но когда вы устанавливаете расширение, они иногда поставляются со своими собственными сниппетами. Примеры расширений с включенными сниппетами – расширение Python от Microsoft, расширение PowerShell от Microsoft и расширение C# от Microsoft.

Расположение сниппетов расширений

Эти расширения обычно устанавливаются в операционной системе Windows в каталоге C:\Users<UserName>.vscode\extensions, как показано ниже.

Папки для расширений следуют соглашению о наименовании ms-vscode.-. Каждая из этих папок содержит папку snippet, в которой находятся сниппеты, включенные в расширение.

Contents of *C:\Users<UserName>.vscode\extensions*

Пример кодового сниппета расширения

Чтобы продемонстрировать использование сниппета расширения, давайте возьмем, например, расширение PowerShell. В этом расширении есть несколько полезных сниппетов, называемых region и for, которые упрощают создание блоков region PowerShell и циклов for.

Предположим, вам нужно создать цикл for в сценарии PowerShell, заключенном в блок region. Код для этого показан ниже. Код на скриншоте ниже состоит из 50 символов и создает цикл for внутри блока region, перебирающий числа от 1 до 10.

Вместо того, чтобы вводить каждый отдельный символ в этом примере, вы можете использовать два сниппета, установленных с расширением PowerShell от Microsoft, называемые region и for.

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

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

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

Чтобы создать пользовательский фрагмент, откройте свои пользовательские фрагменты в VS Code, нажав Файл → Параметры → Пользовательские фрагменты. Это откроет область выбора языка фрагментов для вас. Здесь вы можете указать язык, на котором хотите создать фрагмент. Пример того, как это выглядит, вы можете увидеть на скриншоте ниже.

Выбрав язык, VS Code создаст файл language.json в папке C:\Users<ИмяПользователя>\AppData\Roaming\Code\User\snippets на Windows. Все пользовательские фрагменты, созданные для разных языков, будут иметь файл в этом каталоге.

Возможные языки, которые вы видите, могут отличаться от того, что показано выше. В данной установке VS Code уже установлено множество языковых расширений.

Найдите язык, для которого вы хотите создать фрагмент, и нажмите Enter, чтобы открыть файл языка JSON. В этом файле будут храниться ваши пользовательские фрагменты, и именно здесь вы можете создать их.

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

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

Создание пользовательского фрагмента на Python

Давайте посмотрим, что нужно сделать, чтобы создать пользовательский фрагмент для языка программирования Python. В этом примере префикс dt вызовет пользовательский фрагмент Python. Этот фрагмент будет выводить сообщение с предварительно заполненным текущим временем.

Создание файла JSON

Сначала откройте селектор языка фрагментов, введите Python и нажмите Enter, чтобы создать файл python.json. Это приведет к появлению файла python.json в папке Windows C:\Users<UserName>\AppData\Roaming\Code\User\snippets.

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

Назначение имени и префикса

Теперь пришло время начать редактирование файла JSON. Сначала определите имя и префикс (dt). Префиксы фрагментов должны быть короткими и понятными, так как это значение, вводимое для вызова фрагмента. Чем короче префикс фрагмента, тем меньше символов нужно вводить при его вызове.

Вы можете увидеть пример того, как это выглядит, ниже.

Определение тела

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

Каждая строка должна быть в двойных кавычках
Каждая строка должна заканчиваться запятой
Все строки должны быть в квадратных скобках (“[” и “]”)

Вы можете увидеть пример того, как выглядит тело фрагмента, ниже.

Определение описания

Описание – это сообщение, описывающее префикс, определенный ниже тела.

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

Ниже приведен пример скриншота фрагментов, идентифицирующих префиксы и описания.

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

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Сохраните этот JSON-файл, и теперь пользовательский фрагмент доступен в любом файле Python в VS Code.

Теперь, когда вы открываете вкладку Python и вводите префикс dt, появляется пользовательский фрагмент ниже. Нажатие Enter развернет тело фрагмента во вкладке Python.

Создание пользовательского фрагмента JavaScript с использованием включенного текста

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

В VS Code есть внутренние переменные, которые можно использовать. Это заполнители, которые берут текущий выделенный текст и вставляют его во фрагмент. Например, поместив переменную $TM_SELECTED_TEXT во фрагмент, вы можете показать выбранный текст. Ознакомьтесь с страницей справки по переменным VS Code для полного разбора всех внутренних переменных VS Code.

Для демонстрации создадим фрагмент кода, который просто создает строку для вывода выбранного текста в консоль, называемую log-it.

Откройте селектор языка фрагментов кода, введите JavaScript и нажмите Enter, чтобы создать файл javascript.json. Этот файл будет похож на файл python.json, созданный в предыдущем разделе, но на этот раз содержащий образец кода на JavaScript. На скриншоте ниже вы можете увидеть его исходное состояние.

Теперь создайте фрагмент кода, используя следующий JSON:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Сохраните этот файл JSON, и теперь вы можете использовать этот фрагмент кода в своих файлах JavaScript.

При вызове этого фрагмента кода с выделенным текстом он заменит $TM_SELECTED_TEXT на выделенный текст. Если вызвать этот фрагмент кода без выделенного текста, $TM_SELECTED_TEXT будет пустым. Вы можете увидеть это на скриншоте ниже.

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

Создание пользовательского фрагмента кода PowerShell с позициями вставки

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

Что, если вы хотите ввести значение вместо выделенного текста в console.log()? Что, если вы хотите вводить значения в разных местах фрагмента кода?

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

Табуляторы, определенные с помощью переменных сниппета $0, $1, $2 и так далее, указывают сниппету, куда переместить курсор после вызова сниппета и нажатия табуляции.

Табуляторы следуют обычному порядку (1 следует за 2, за 3 и так далее), за одним исключением: табулятор 0 – это место, на котором окажется курсор после всех остальных табуляторов. Для демонстрации ниже приведен сниппет, который разворачивается в сообщение Write-Output с текущей датой и местом для дополнительного текста.

Этот body с двумя табуляторами

$1 в конце сообщения Write-Output
$0 на следующей строке, чтобы сниппет закончился на пустой строке

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Сохраните этот сниппет и вызовите его, введя префикс dtPS в файле PowerShell.

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

Вы можете увидеть это на скриншоте ниже.

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

Хотя табуляция отлично работает, что если вам нужны конкретные значения, обычно в тех местах, но вы хотите иметь возможность их изменить, если необходимо? Теперь пришло время добавить значения по умолчанию.

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

Если бы только был способ, чтобы значение было на месте табуляции – таким образом, фрагмент кода мог бы развернуться, и это значение также было бы развернуто. Когда табуляция достигает этого места, значение по умолчанию может быть перезаписано или пропущено.

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

Чтобы начать, откройте селектор языка сниппета, выберите PowerShell и измените табуляцию с $1 на ${1:this is my default message}. Значение после двоеточия становится значением по умолчанию. Это значение разворачивается с фрагментом кода.

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

Ниже вы можете увидеть изменение в теле кода.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

После обновления и сохранения эти значения по умолчанию разворачиваются и также отображаются в окне IntelliSense при вызове, как показано на скриншоте ниже.

Сообщения по умолчанию являются хорошими примерами использования табуляции. Табуляция также дает вам возможность выбора. В следующем разделе вы увидите пример добавления выбора в ваши табуляции.

Добавление выбора в табуляции

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

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

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

${N|Choice1,Choice2,Choice3[,Choice]|}

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

Write-Output
Write-Warning
Write-Error

Это было сделано путем размещения двух символов “палочка” ( | ) после табуляции. Варианты разделяются запятыми и помещаются внутри символов “палочка”. Вы можете увидеть это в блоке кода ниже.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Выбор 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Выбор 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Выбор 3
|}

Ниже вы можете увидеть пример фрагмента кода.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Когда пользовательский фрагмент кода разворачивается, выбор, какой вариант выбрать, появляется в окне IntelliSense, как показано на скриншоте ниже.

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

Резюме

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

Необязательно печатать каждый символ каждого блока кода. С помощью фрагментов вам не нужно запоминать точный синтаксис для цикла for, цикла foreach или оператора switch каждый раз. Фрагменты идеально подходят для этой области.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Дополнительная информация

Введение в функции PowerShell