Как создать сниппет в visual studio

Повышаем эффективность работы в Visual Studio. Создание Code Snippets для C# и HTML

Code Snippet — это шаблон (заготовка) кода, который можно многократно использовать в нужном контексте в нужное время.

Другими словами, можно заключить в контейнер код, который приходится часто писать вручную, и потом нажимая комбинацию горячих клавиш, вставлять данный код по требованию. Тем самым экономится очень много времени. Все сниппеты можно найти через специальный менеджер, который находится в меню по адресу Tools > Code Snippets Manager. :

Code Snippets Manager

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

Данный C#-сниппет позволяет добавить в код строчку Console.WriteLine();

Создаем свой Code Snippet

Процесс создания сниппета состоит из нескольких этапов. Во-первых, обратимся к официальной документации по адресу: Walkthrough: Create a code snippet. Там наиболее полная информация обо всех аспектах в данном вопросе. Далее создаем новый файл (можно прямо из Visual Studio) формата XML со следующей заготовкой:

Это простейшая заготовка, с которой можно начинать работу и расширить ее под свои нужды. Давайте это и сделаем. Например, я хочу создать сниппет, который будет служить следующей цели:
В ASP.NET MVC приложении в классе-контроллере довольно часто возникает задача через внедрение зависимостей (Dependency Injection) добавить в конструктор какой-нибудь функционал, чтобы он был доступен в пределах всего контроллера. Ну, например, контекст базы данных. Что-то типа такого:

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

DMSnippet.snippet

    
 Этот сниппет добавляет заготовку конструктора класса контроллера s.alekseev dms 
   WebApplication1.SecretNamespace    CName Название контроллера Home   ]]>   

Прокомментирую некоторые важные моменты: dms . В этом теге указываем комбинацию горячих клавиш, по которой будет вызывать сниппет. Важно, чтобы она не совпадала с уже существующими сниппетами. WebApplication1.SecretNamespace . Здесь я указал, что при вставке сниппета следует также добавить в *.cs файл нужное пространство имен. В моем примере класс DataManager располагается именно там. CNameНазвание контроллераHome . Здесь я указал т.н. литерал, или место для подстановки. Он добавляется ниже в коде сниппета. Суть в том, что в этом месте Visual Studio предложит нам изменить стандартное значение «Home» на нужное нам. Это очень удобно, ведь не все контроллеры в приложении называются HomeController. Конечно же можно добавлять и другие литералы, актуальные для вашего кода. . В значении для Language указываем тот язык, для которого создается сниппет. Важно! Что попало писать нельзя, весь список доступных языков представлен в официальной документации (ссылка выше). По указанному языку Visual Studio будет ориентироваться, где и в каком контексте в коде будет доступен данный сниппет. внутренних квадратных скобках располагается тот код, который будет вставлен по требованию. По поводу форматирования кода: здесь можно особо не заморачиваться и писать весь код хоть в одну строку. Visual Studio сама проведет форматирование при вставке по тем правилам, которые в ней установлены. Также здесь в коде я указал зарезервированный служебный литерал $end$ — в это место встанет курсор, когда сниппет будет добавлен в код и настроен. DMSnippet.snippet . Хотя файл размечен в формате XML, сохранять его следует со специальным расширением *.snippet. После создания сниппета нам необходимо добавить его в общий список через Code Snippet Manager (кнопка Import. ):

Вот так выглядит созданный сниппет. Название, описание, все на месте.

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

Если у вас установлен Resharper и в подсказке Intellisense не отображается новый сниппет (но при этом работает), это значит что вы используете схему Intellisense для Resharper. Но сниппет создавался вне зоны действия решарпера, и он об этом ничего не знает. Нужно либо в опциях поменять схему на Visual Studio, либо добавить правило для решарпера.

Snippets in Visual Studio Code

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

In Visual Studio Code, snippets appear in IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space ) ) mixed with other suggestions, as well as in a dedicated snippet picker (Insert Snippet in the Command Palette). There is also support for tab-completion: Enable it with «editor.tabCompletion»: «on» , type a snippet prefix (trigger text), and press Tab to insert a snippet.

The snippet syntax follows the TextMate snippet syntax with the exceptions of ‘interpolated shell code’ and the use of \u ; both are not supported.

Built-in snippets

VS Code has built-in snippets for a number of languages such as: JavaScript, TypeScript, Markdown, and PHP.

You can see the available snippets for a language by running the Insert Snippet command in the Command Palette to get a list of the snippets for the language of the current file. However, keep in mind that this list also includes user snippets that you have defined, and any snippets provided by extensions you have installed.

Install snippets from the Marketplace

Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contains snippets in the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) using the @category:»snippets» filter.

If you find an extension you want to use, install it, then restart VS Code and the new snippets will be available.

Create your own snippets

You can easily define your own snippets without any extension. To create or edit your own snippets, select Configure User Snippets under File > Preferences , and then select the language (by language identifier) for which the snippets should appear, or the New Global Snippets file option if they should appear for all languages. VS Code manages the creation and refreshing of the underlying snippets file(s) for you.

Snippets files are written in JSON, support C-style comments, and can define an unlimited number of snippets. Snippets support most TextMate syntax for dynamic behavior, intelligently format whitespace based on the insertion context, and allow easy multiline editing.

Below is an example of a for loop snippet for JavaScript:

// in file 'Code/User/snippets/javascript.json'  "For Loop":  "prefix": ["for", "for-const"], "body": ["for (const $ of $) , "\t$0", ">"], "description": "A for loop."  > > 

In the example above:

• «For Loop» is the snippet name. It is displayed via IntelliSense if no description is provided.
• prefix defines one or more trigger words that display the snippet in IntelliSense. Substring matching is performed on prefixes, so in this case, «fc» could match «for-const».
• body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.
• description is an optional description of the snippet displayed by IntelliSense.

Additionally, the body of the example above has three placeholders (listed in order of traversal): $ , $ , and $0 . You can quickly jump to the next placeholder with Tab , at which point you may edit the placeholder or jump to the next one. The string after the colon : (if any) is the default text, for example element in $ . Placeholder traversal order is ascending by number, starting from one; zero is an optional special case that always comes last, and exits snippet mode with the cursor at the specified position.

File template snippets

You can add the isFileTemplate attribute to your snippet’s definition if the snippet is intended to populate or replace a file’s contents. File template snippets are displayed in a dropdown when you run the Snippets: Populate File from Snippet command in a new or existing file.

Snippet scope

Snippets are scoped so that only relevant snippets are suggested. Snippets can be scoped by either:

1. the language(s) to which snippets are scoped (possibly all)
2. the project(s) to which snippets are scoped (probably all)

Language snippet scope

Every snippet is scoped to one, several, or all («global») languages based on whether it is defined in:

Single-language user-defined snippets are defined in a specific language’s snippet file (for example javascript.json ), which you can access by language identifier through Snippets: Configure User Snippets. A snippet is only accessible when editing the language for which it is defined.

Multi-language and global user-defined snippets are all defined in «global» snippet files (JSON with the file suffix .code-snippets ), which is also accessible through Snippets: Configure User Snippets. In a global snippets file, a snippet definition may have an additional scope property that takes one or more language identifiers, which makes the snippet available only for those specified languages. If no scope property is given, then the global snippet is available in all languages.

Most user-defined snippets are scoped to a single language, and so are defined in a language-specific snippet file.

Project snippet scope

You can also have a global snippets file (JSON with file suffix .code-snippets ) scoped to your project. Project-folder snippets are created with the New Snippets file for ‘ ‘. option in the Snippets: Configure User Snippets dropdown menu and are located at the root of the project in a .vscode folder. Project snippet files are useful for sharing snippets with all users working in that project. Project-folder snippets are similar to global snippets and can be scoped to specific languages through the scope property.

Snippet syntax

The body of a snippet can use special constructs to control cursors and the text being inserted. The following are supported features and their syntaxes:

Tabstops

With tabstops, you can make the editor cursor move inside a snippet. Use $1 , $2 to specify cursor locations. The number is the order in which tabstops will be visited, whereas $0 denotes the final cursor position. Multiple occurrences of the same tabstop are linked and updated in sync.

Placeholders

Placeholders are tabstops with values, like $ . The placeholder text will be inserted and selected such that it can be easily changed. Placeholders can be nested, like $> .

Choice

Placeholders can have choices as values. The syntax is a comma-separated enumeration of values, enclosed with the pipe-character, for example $ <1|one,two,three|>. When the snippet is inserted and the placeholder selected, choices will prompt the user to pick one of the values.

Variables

With $name or $ , you can insert the value of a variable. When a variable isn’t set, its default or the empty string is inserted. When a variable is unknown (that is, its name isn’t defined) the name of the variable is inserted and it is transformed into a placeholder.

The following variables can be used:

• TM_SELECTED_TEXT The currently selected text or the empty string
• TM_CURRENT_LINE The contents of the current line
• TM_CURRENT_WORD The contents of the word under cursor or the empty string
• TM_LINE_INDEX The zero-index based line number
• TM_LINE_NUMBER The one-index based line number
• TM_FILENAME The filename of the current document
• TM_FILENAME_BASE The filename of the current document without its extensions
• TM_DIRECTORY The directory of the current document
• TM_FILEPATH The full file path of the current document
• RELATIVE_FILEPATH The relative (to the opened workspace or folder) file path of the current document
• CLIPBOARD The contents of your clipboard
• WORKSPACE_NAME The name of the opened workspace or folder
• WORKSPACE_FOLDER The path of the opened workspace or folder
• CURSOR_INDEX The zero-index based cursor number
• CURSOR_NUMBER The one-index based cursor number

For inserting the current date and time:

• CURRENT_YEAR The current year
• CURRENT_YEAR_SHORT The current year’s last two digits
• CURRENT_MONTH The month as two digits (example ’02’)
• CURRENT_MONTH_NAME The full name of the month (example ‘July’)
• CURRENT_MONTH_NAME_SHORT The short name of the month (example ‘Jul’)
• CURRENT_DATE The day of the month as two digits (example ’08’)
• CURRENT_DAY_NAME The name of day (example ‘Monday’)
• CURRENT_DAY_NAME_SHORT The short name of the day (example ‘Mon’)
• CURRENT_HOUR The current hour in 24-hour clock format
• CURRENT_MINUTE The current minute as two digits
• CURRENT_SECOND The current second as two digits
• CURRENT_SECONDS_UNIX The number of seconds since the Unix epoch
• CURRENT_TIMEZONE_OFFSET The current UTC time zone offset as +HH:MM or -HH:MM (example -07:00 ).

For inserting random values:

• RANDOM 6 random Base-10 digits
• RANDOM_HEX 6 random Base-16 digits
• UUID A Version 4 UUID

For inserting line or block comments, honoring the current language:

• BLOCK_COMMENT_START Example output: in PHP /* or in HTML
• BLOCK_COMMENT_END Example output: in PHP */ or in HTML —>
• LINE_COMMENT Example output: in PHP //

The snippet below inserts /* Hello World */ in JavaScript files and in HTML files:

 "hello":  "scope": "javascript,html", "prefix": "hello", "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"  > > 

Variable transforms

Transformations allow you to modify the value of a variable before it is inserted. The definition of a transformation consists of three parts:

1. A regular expression that is matched against the value of a variable, or the empty string when the variable cannot be resolved.
2. A «format string» that allows to reference matching groups from the regular expression. The format string allows for conditional inserts and simple modifications.
3. Options that are passed to the regular expression.

The following example inserts the name of the current file without its ending, so from foo.txt it makes foo .

$ | | | | | | | |-> no options | | | | | |-> references the contents of the first | | capture group | | | |-> regex to capture everything before | the final `.suffix` | |-> resolves to the filename 

Placeholder-Transform

Like a Variable-Transform, a transformation of a placeholder allows changing the inserted text for the placeholder when moving to the next tab stop. The inserted text is matched with the regular expression and the match or matches — depending on the options — are replaced with the specified replacement format text. Every occurrence of a placeholder can define its own transformation independently using the value of the first placeholder. The format for Placeholder-Transforms is the same as for Variable-Transforms.

Transform examples

The examples are shown within double quotes, as they would appear inside a snippet body, to illustrate the need to double escape certain characters. Sample transformations and the resulting output for the filename example-123.456-TEST.js .

Example	Output	Explanation
«$»	example-123_456-TEST.js	Replace the first . with _
«$»	example_123_456_TEST_js	Replace each . or — with _
«$/>»	EXAMPLE-123.456-TEST.JS	Change to all uppercase
«$»	example123456TESTjs	Remove non-alphanumeric characters

Grammar

Below is the EBNF (extended Backus-Naur form) for snippets. With \ (backslash), you can escape $ , > , and \ . Within choice elements, the backslash also escapes comma and pipe characters.

any ::= tabstop | placeholder | choice | variable | text tabstop ::= '$' int | '$' | '$' placeholder ::= '$' choice ::= '$' variable ::= '$' var | '$' | '$' | '$' transform ::= '/' regex '/' (format | text)+ '/' options format ::= '$' int | '$' | '$' | '$' | '$' | '$' | '$' regex ::= JavaScript Regular Expression value (ctor-string) options ::= JavaScript Regular Expression option (ctor-options) var ::= [_a-zA-Z] [_a-zA-Z0-9]* int ::= [0-9]+ text ::= .* if ::= text else ::= text 

Using TextMate snippets

You can also use existing TextMate snippets (.tmSnippets) with VS Code. See the Using TextMate Snippets topic in our Extension API section to learn more.

Assign keybindings to snippets

You can create custom keybindings to insert specific snippets. Open keybindings.json (Preferences: Open Keyboard Shortcuts File), which defines all your keybindings, and add a keybinding passing «snippet» as an extra argument:

 "key": "cmd+k 1", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args":  "snippet": "console.log($1)$0"  > > 

The keybinding will invoke the Insert Snippet command but instead of prompting you to select a snippet, it will insert the provided snippet. You define the custom keybinding as usual with a keyboard shortcut, command ID, and optional when clause context for when the keyboard shortcut is enabled.

Also, instead of using the snippet argument value to define your snippet inline, you can reference an existing snippet by using the langId and name arguments. The langId argument selects the language for which the snippet denoted by name is inserted, e.g the sample below selects the myFavSnippet that’s available for csharp -files.

 "key": "cmd+k 1", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args":  "langId": "csharp", "name": "myFavSnippet"  > > 

Next steps

• Command Line — VS Code has a rich command-line interface to open or diff files and install extensions.
• Extension API — Learn about other ways to extend VS Code.
• Snippet Guide — You can package snippets for use in VS Code.

Common questions

What if I want to use existing TextMate snippets from a .tmSnippet file?

You can easily package TextMate snippets files for use in VS Code. See Using TextMate Snippets in our Extension API documentation.

How do I have a snippet place a variable in the pasted script?

To have a variable in the pasted script, you need to escape the ‘$’ of the $variable name so that it isn’t parsed by the snippet expansion phase.

"VariableSnippet": "prefix": "_Var", "body": "\\$MyVar = 2", "description": "A basic snippet that places a variable into script with the $ prefix"  > 

This results in the pasted snippet as:

$MyVar = 2 

Can I remove snippets from IntelliSense?

Yes, you can hide specific snippets from showing in IntelliSense (completion list) by selecting the Hide from IntelliSense button to the right of snippet items in the Insert Snippet command dropdown.

You can still select the snippet with the Insert Snippet command but the hidden snippet won’t be displayed in IntelliSense.

Сниппеты в VS Code

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

• «VS Code — Создание cниппета», вы здесь)
• «VS Code — публикуем свое расширение (сниппет)», в этой статье будет рассказано, как стать автором расширения и загрузить обернутый в пакет расширения сниппет в marketplace.

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

В статье мы расскажем:

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

Эта статья посвященна JavaScript и TypeScripts. Примеры кода будут написаны на указанных языках. Тем не менее, т.к статья описывает базовые принципы создания сниппетов вы сможете все понять, несмотря на то. что возможно не пишете на этих языках.

Ресурсы

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

• Официальная документация VS Code
• Создание собственных сниппетов

Что же такое эти причудливые сниппеты и для чего они нужны?

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

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

Так что же хорошо подходит в роле сниппета :

• Class, часто мы создаем много классов в нашем решении.
• If, мы склонны писать довольно много if , if else , if else if, else конструкций.
• Try-Catch, это также очень распространенная конструкция. Разве не было бы хорошо, если бы был сниппет, который поддерживал try, catch and finally ?
• Function, мы обычно создаем массу функций, поэтому имеет смысл использовать какую-то дефолтовую функцию в роле шаблона с подходящим количеством параметров.
• Вход на экран, мы склонны делать это довольно часто с целью отладки.
• Сниппет на ваш выбор, у вас могут быть такие вещи, которые вы делаете довольно часто и которые, возможно, уникальны для вас, к примеру, чтение из файла, доступ к базе данных. Какие сниппеты использовать зависит от вас.

Сниппеты в VS Code

Вы можете создать два типа сниппетов в VS Code:

• глобальный, подходящий для всех языков
• для конкретного языка, возможно использовать только для определенного языка

Создаем первый сниппет

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

Первое, что нам нужно сделать, это выбрать тип фрагмента, который мы собираемся создать. Сейчас оттадим предпочтение варианту global заместо language specific . Давайте создадим global snippet. Выберите в меню следующее: Code => Preference => User Snippets.

Рассмотрим этот скрин, т.к на нем есть много чего интересного:

• Существующие сниппеты: если вы создавали их заранее, то сможете выбрать и загрузить в VS
• Новый файл Global Snippets . выбор этой опции создает глобальный файл
• Файлы, зависящие от языка: при выборе любого из этих параметров будет создан специальный файл сниппета для этого языка. Выберите html и для примера создайте html.json файл.

Как мы уже говорили ранее, давайте создадим глобальный файл, поэтому выберите New Global Snippets file , второй вариант сверху. Давайте назовем его global и получим вот такой результат:

Стоит отметить, что глобальное имя само по себе называется global.code-snippets . Этот файл лежит в /Users//Library/Application Support/Code/User/snippets , если вы хотите потом на него посмотреть. Вы увидете, что все закомментировано, а все самое интересное, на самом деле, начинается с слова Example : поэтому давайте раскомментируем его и рассмотрим подробнее. Выглядит все так:

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

• scope, это поддерживаемые языки для этого сниппета. В примере поддерживаются javascript and typescript. Каждый поддерживаемый язык отделяется запятой. Это означает, что если мы находимся внутри .js или .ts файла, то можно будет использовать этот сниппет.
• prefix, это то, что вам нужно ввести в окне кода, чтобы появился сниппет. В нашем случае нам нужно набрать log .
• body, это непосредственно ваш фрагмент кода. Тип данных — это массив, и для поддержки фрагмента, содержащего несколько строк, нам нужно добавить новую запись в массив, позже мы обьясним, как это сделать.
• description, это поле, в котором нужно дать краткое описание того, какой компонент за что ответственен.
• $1 , $2 , это просто отметки, где заканчивается курсор, когда вы нажимаете кнопку табуляции

Попробуем сниппет на деле

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

Как только мы начинаем набирать команду log , раскрывается список вариантов. Первый пункт в списке это наш сниппет. Вы можете видеть, что Print to console — это то, что мы написали как имя фрагмента, а Log output to console.. это наше поле описания. В этот момент мы нажимаем кнопку return и в итоге получаем следующее:

Мы видим, что наш фрагмент помещается в окно кода, но мы также видим, как наш курсор оказался внутри метода log() . Почему так получилось? Этому есть очень простое объяснение, вот здесь мы как раз указали, что курсору нужно остановиться:

Таким образом, вы видите, что от того, как мы размещаем $ 1 или $2 зависит многое, в том числе и скорость процесса разработки.

Второй сниппет- класс

Итак, теперь мы знаем и понимаем всю внутреннюю анатомию сниппета. Настало время создать собственный сниппет с нуля:

Хорошо, теперь у нас есть второй сниппет и, к тому же, многострочный сниппет. Давайте разберемся с этим. Мы поддерживаем javascript и typescript, определяя их как значения scope. Кроме того, мы можем активировать сниппет, набрав команду cc . Затем мы подошли к текущему сниппету нашего свойства body . Теперь он будет уже многострочным. Это следует из того, что мы добавили x количество элементов в нашем свойстве массива. Значение тела — это то, что мы можем ожидать от определения класса с помощью конструктора. Здесь мы добавили несколько интересных битов, при помощи $1 и $2 . Они размещаются после свойства class и внутри конструктора. Это сделано специально, поэтому пользователь должен печатать как можно меньше. Первое, что вы будете делать как разработчик, — это, вероятно, msot, для того, чтобы дать имя классу и добавить некоторый код инициализации в ваш конструктор. Если вы делаете это в другом порядке, не стесняйтесь перемещать $1 и $2 туда, где они будут кстати.

Применим наш сниппет

Итак, мы ввели cc , чтобы активировать наш сниппет и получили его название и описание. После выбора фрагмента, нажатием кнопки return мы получим следующее:

На скриншоте вы можете увидеть, где заканчивается курсор вначале $ 1. Нажав снова на клавишу, мы должны перейти к точке второго шага табуляции, $ 2. Итак, давайте посмотрим, как это выглядит:

Мы видим, что мы дали классу название Test и можем нажать tab , в результате которого мы получим курсор внутри функции конструктора.

Сниппет для конкретного языка

На этот раз мы хотим создать фрагмент кода для конкретного языка. Итак, мы идем в меню и выбираем Code => Preferences => User Snippets. Оказавшись там, мы выбираем Typescript .

Мы видим, что в этот раз имя файла немного отличается. Вместо того, как бывает обычно .code-snippets он называется typescript.json .Поэтому, когда файл заканчивается на .json , мы имеем дело с файлом, относящимся к конкретному языку. Стоит подчеркнуть, что сниппет кода для конкретного языка будет работать только для этого фрагмента, поэтому, если мы находимся внутри файла, оканчивающегося на .js , ввод нашего prefix значения не активирует его. Вместо этого мы должны быть внутри .ts файла, чтобы наш сниппет мог быть выбран.

Итак, давайте на секунду отвлечемся и подумаем, мы выбрали Typescript в качестве конкретного языка, так что это пока единственный язык, что мы собираемся поддерживать. Это означает, что мы собираемся создавать сниппеты, используя специфические для языка конструкции, такие как типы и всякие другие вещи. Давайте воссоздадим наш сниппет кода, но для Typescript:

Выше мы создали сниппет, который использует некоторые специфические для языка функции из Typescript, такие как enum и private , используемые в конструкторе (который создает для нас вспомогательные поля), и, в завершение, мы создали довольно классную тему, фантастическую среду, так что если вы думали, что мы здесь в игрушки играем, то, заметьте — сниппет готов к использованию:)

Применим наш сниппет

Итак, мы задали prefix значение tc и т.к нам нужно ввести tc значение, чтобы активировать наш сниппет. Конечный результат выглядит следующим образом:

Выше мы видим, как создается наш enum CharacterTypes , а также наш сниппет класса. Теперь из этого легко можно создать объект, например, набрав:

const hero = new Hero('hero', 18, CharacterTypes.Healer);

Вот и все. Создание фрагмента для конкретного языка не так уж и отличается. Окончание имени файла выглядит по-другому, и оно ориентировано на определенный язык.

Резюмируя

Мы рассмотрели сниппеты в VS Code. Мы разобрали, каким образом можно:

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

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

Мысли на будущее

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

Что будет дальше?

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

Как в Visual Studio создать повторно используемый фрагмент кода (snippet)

Рассмотрим процесс создания повторно используемого фрагмента кода (сниппета) в Visual Studio 2017 на примере. Создадим сниппет на языке VB.NET, который объявляет объект типа BackgroundWorker() и создаёт для него методы DoWork(), ProcessChanged() и RunWorkerCompleted().

1 Создание файла и написание кода сниппета

Прежде всего, нужно открыть директорию, в которой хранятся сниппеты нашей версии Visual Studio для того языка программирования, который нас интересует. Допустим, у меня Visual Studio 2017, сниппет я буду писать для Visual Basic .NET, и сниппеты для него хранятся в директории по умолчанию c:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\VB\Snippets\1049\.

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

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

Выберем подходящий раздел и подраздел. Если такого нет, то создадим новый. Например, в моём случае нет фрагментов кода, которые связаны с потоками исполнения и фоновыми обработчиками (background worker). Поэтому я создам такой подраздел в разделе «Базовые понятия: коллекции, типы данных, файловая система, математика» и назову его «Потоки, фоновая обработка»:

 on true 1049 %InstallRoot%\Vb\Snippets\%LCID%\fundamentals\threads\ Потоки, фоновая обработка  

Для нового подраздела нужно создать новую директорию. Создадим в директории папку threads, как мы и указали в коде выше. Переходим в эту папку и создаём файл сниппета. Назовём его, например, backgroundworker.snippet. Название не имеет значения, оно нигде не прописывается: Visual Studio будет искать все фрагменты кода, которые найдёт в этой директории.

По сути, сниппет представляет собой обычный XML-файл. И код сниппета, который мы поместим в файл backgroundworker.snippet, будет такой:

    
 aave, Soltau.ru Создание BackgroundWorker bw 
   System  System.ComponentModel     

Думаю, структура файла сниппета настолько очевидна, что комментарии излишни.

2 Использование созданного фрагмента кода (сниппета)

Откроем диспетчер фрагментов кода. Это можно сделать через меню Visual Studio: Средства Диспетчер фрагментов кода…. А можно воспользоваться комбинацией клавиш, или «аккордом», как называют это в Microsoft, Ctrl+K, Ctrl+B .

Идём в раздел «Базовые понятия: коллекции, типы данных, файловая система, математика», видим там наш подраздел threads, а в нём фрагмент кода под названием BackgroundWorker.

Закроем диспетчер фрагментов кода и перейдём в редактор кода Visual Studio.

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

Окно сниппетов можно вызвать также по нажатию сочетаний клавиш Ctrl+K, Ctrl+X .