Как удалить сниппет в vs code

Создание сниппета в VSCode

Как настроить автозамену любого текста в Visual Studio Code? Например, чтобы при вводе «hello» + Enter этот текст заменялся на «hello world».

Отслеживать
7,797 13 13 золотых знаков 25 25 серебряных знаков 55 55 бронзовых знаков
задан 3 апр 2022 в 2:34
313 1 1 серебряный знак 7 7 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

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

Как создать собственный сниппет?

1. Определить где он вам нужен. Либо создать глобально (этот вариант опишу), либо для конкретного проекта
2. Откройте Command palett ( ⇧ + ⌘ + P (macOS), Ctrl + Shift + P (windows), либо F1 ) и в строку введите следующее: snippets
3. Выберите Preferences: Configure User Snippets
4. Выберите New Global Snippets file.
5. Придумайте имя для файла и вбейте его
6. У вас откроется json — файл и в него добавьте примерно такое

• Snippet number One -> имя сниппета
• prefix -> шаблоны для ввода (может быть в виде одного строкового значения или списка строковых значений)
• body -> чем заполнится по итогу
• description -> описание

Сохраните файл и можете использовать.

Как это выглядит

И при нажатии на Enter получаем

Как в vs code отключить отображение пользовательских фрагментов кода (сниппетов) в момент указания пути к картинкам в html, css?

Пример в css: background: url(../img/);
Пример в html:

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

• Вопрос задан более года назад
• 164 просмотра

1 комментарий

Средний 1 комментарий

Сниппеты в Visual Studio

Одно из преимуществ интегрированной среды разработки (Integrated Development Environment — IDE) над обычным текстовым редактором заключается в том, что она позволяет повысить производительность и эффективность работы, ускоряя процесс работы над программой. Двумя наиболее мощными возможностями повышения производительности работы разработчика в системе Visual Studio 2013 являются поддержка сниппетов и инструменты для рефакторинга кода.

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

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

Аналоги сниппетов

Прежде чем исследовать сниппеты, рассмотрим простейшие средства, с помощью которых система Visual Studio позволяет вставлять в файл заранее заготовленные блоки текста. Наряду с элементами управления, которые вставляются в форму, панель компонентов Toolbox может содержать блоки текстов (например, кода), которые тоже можно вставлять в файл. Для того чтобы добавить блок кода (или другого текста) на панель Toolbox, достаточно выбрать текст в окне редактора и перетащить его на панель Toolbox. В результате будет создан элемент панели Toolbox, именем которого является первая строка кода. Эти фрагменты можно переименовывать, переставлять и группировать так, как и любые другие компоненты инструментальной панели Toolbox. Для того чтобы вставить блок кода в файл, его следует перетащить с панели Toolbox в намеченное место файла, как показано на рисунке ниже, или дважды щелкнуть на элементе панели Toolbox, чтобы вставить Фрагмент текста в текущую позицию курсора в активном файле.

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

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

Сниппеты

Теперь рассмотрим намного более полезный способ вставки блоков кода в файл: сниппеты. Они записываются в отдельных XML-файлах вместе с переменными параметрами, облегчающими настройку сниппета для конкретной задачи. Сниппеты являются частью технологии IntelliSense и значительно упрощают поиск и вставку блоков кода в текст программы. Сниппеты на языке VB также позволяют добавлять ссылки на сборки и и вставлять инструкции импорта.

Система Visual Studio 2013 изначально содержит много заранее подготовленных сниппетов для двух основных языков, VB и C#, а также для языков JavaScript, HTML и XML. Эти сниппеты организованы в логические иерархии, поэтому их можно легко найти. Вместо инструментальной панели Toolbox для поиска сниппета можно также использовать команды или комбинации клавиш, открывающие списки основных групп сниппетов.

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

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

Использование сниппетов в языке C#

Команда Insert Snippet является одной из функциональных возможностей технологии IntelliSense. Она встроена в редактор кода и вначале выводит строку «Insert Snippet» вместе с раскрывающимся списком групп сниппетов, в которых можно выбрать подходящий фрагмент. Когда пользователь выбирает группу, содержащую требуемый сниппет (используя навигационные клавиши со стрелками, направленными вверх и вниз, и клавишу ), система показывает ему список сниппетов. Для выбора нужного сниппета достаточно дважды щелкнуть на его имени (или нажать клавиш) или ).

Для того чтобы вставить сниппет в код на языке C#, пользователю достаточно показать место, куда он хочет вставить генерируемый код, а затем открыть список Insert Snippet с помощью комбинации клавиш , . Существуют еще два способа запустить процесс вставки сниппетов. Во-первых, можно щелкнуть правой кнопкой мыши в окне редактора кода и выбрать команду Insert Snippet из открывшегося контекстного меню. Во-вторых, можно выбрать команду Edit —> IntelliSense —> Insert Snippet.

В результате система Visual Studio откроет список Insert Snippet, как показано на рисунке ниже. Когда пользователь прокручивает этот список и устанавливает курсор мыши на его элементы, на экране появляется подсказка, в которой содержится краткое описание сниппета и указывается его сокращенное имя для вставки в программу.

Для того чтобы воспользоваться этим именем, достаточно набрать его в редакторе кода (обратите внимание на то, что сниппет указан в списке IntelliSense) и дважды нажать клавишу . В результате сниппет будет вставлен в требуемую позицию.

На рисунке ниже показан результат выбора сниппета Automatically Implemented Property (сокращенно prop). Довольно часто получившийся код требуется модифицировать. Фрагменты текста, которые обычно можно изменять (переменные для замены), выделяются подсветкой.

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

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

Использование сниппетов в языке VB

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

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

• Комбинация клавиш , .
• Щелчок правой кнопкой мыши и выбор команды Insert Snippet из контекстного меню.
• Выбор команды Edit —> IntelliSense —> Insert Snippet.

В системе VB есть еще один способ, с помощью которого можно открыть список Insert Snippet List: просто ввести знак вопроса (?) и нажать клавишу .

Например, пройдем по иерархии и вставим сниппет Draw a Pie Chart:

На рисунке видно, что в тексте подсказки имеется строка «Shortcut: drawPie». Этот текст означает, что выбранный сниппет имеет сокращенное название, которое можно использовать для его автоматического вызова без перебора элементов иерархии сниппетов. Как и при работе с программами на языке C#, достаточно ввести это сокращенное название в окне редактора кода и нажать клавишу . В системе VB эти названия не чувствительны к регистру, поэтому данный пример можно сгенерировать, набрав слово «drawpie» и нажав клавишу . Обратите внимание на то, что это имя не появляется в списке IntelliSense для языка VB, как это происходило для языка C#.

Если после вставки сниппет содержит переменные для замены, пользователь может вставить их значения, а затем перемещаться между ними, нажимая клавишу , как было описано выше при обзоре сниппетов для языка C#. Для того чтобы скрыть подсветку этих переменных сниппета, можно просто продолжить кодирование или щелкнуть правой кнопкой мыши и выбрать команду Hide Snippet Highlighting. Если необходимо подсветить все переменные для замены, входящие в сниппет, вставленные после открытия файла, достаточно щелкнуть правой кнопкой мыши и выбрать команду Show Snippet Highlighting.

Окружение кода с помощью сниппета

Последнее действие по рефакторингу, доступное в языке C# (и в языке VB с помощью надстройки CodeRush Xpress) — возможность окружить сниппетом существующий блок кода. Например, для того чтобы погрузить существующий блок кода в условный блок «try-catch», достаточно щелкнуть правой кнопкой мыши и выбрать команду Surround With или выбрать блок кода и нажать клавиши , .

В ответ откроется список Surround With, содержащий сниппеты, доступные для окружения выбранной строки кода:

Библиотека Code Snippets Manager

Code Snippets Manager — это главная библиотека сниппетов в системе Visual Studio. Для доступа к ней необходимо выбрать команду Tools —> Code Snippet Manager или нажать комбинацию клавиш , .

Когда библиотека Code Snippets Manager открывается в первый раз, в ней отобразятся доступные сниппеты на языке HTML, хотя с помощью списка Language пользователь может сам задать требуемый язык программирования. На рисунке ниже показан экран дисплея при редактировании проекта на языке C#. Иерархическая структура по умолчанию копирует множество папок на персональном компьютере, но по мере того как пользователь будет добавлять файлы со сниппетами из разных местах, новые сниппеты будут распределяться по соответствующим папкам.

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

Удалить папку очень просто, даже небезопасно просто. Достаточно выбрать узел дерева, который нужно удалить, и щелкнуть на кнопке Remove. В результате этот узел, все его дочерние узлы и сниппеты будут удалены из библиотеки Code Snippets Manager, причем окно подтверждения при этом не открывается. Если пользователь сделал это случайно, то лучше всего щелкнуть на кнопке Cancel и открыть диалоговое окно снова. Если пользователь внес изменения, которые он хочет сохранить, то достаточно выполнить все действия, описанные выше. Однако искать место для папки, случайно удаленной из списка сниппетов, заданных по умолчанию, может оказаться утомительным занятием.

Сниппеты, инсталлированные вместе с системой Visual Studio, расположены глубоко в иерархии папок инсталляции. По умолчанию библиотека сниппетов при запуске под управлением 32-битовой системы Windows инсталлируется для языка VB в папке:

%program files%\Microsoft Visual Studio \VB\Snippets\1033

и для языка C# в папке:

%program files%\Microsoft Visual Studio \VC#\Snippets\1033

(если используется 64-битовая система Windows, то строку %program files% следует заменить строкой %program files (x86)%). Отдельные файлы сниппетов можно импортировать в библиотеку с помощью кнопки Import. Преимущество этого метода над использованием кнопки Add заключается в том, что в этом случае пользователь получает возможность указать место каждого сниппета в структуре библиотеки.

Создание сниппетов

Система Visual Studio 2013 не содержит средств для создания или редактирования сниппетов. Тем не менее программа Bill McCarthy’s Snippet Editor позволяет создавать свои собственные сниппеты, модифицировать их и управлять ими (включая поддержку для языков VB, C#, HTML, JavaScript и XML). Сначала программа Snippet Editor была внутренним проектом компании Microsoft, но теперь она представляет собой открытое программное обеспечение, расположенное на веб-сайте CodePlex, на котором компания Bill исправляет существенные ошибки и вносит дополнительные функциональные возможности. Благодаря помощи других профессионалов программа Snippet Editor поддерживает теперь много разных языков программирования.

Создание сниппетов с помощью редактирования соответствующих XML-файлов может оказаться утомительным и сложным процессом, а программа Snippet Editor делает это много проще. Начиная работать с редактором Snippet Editor, пользователь видит в правом левом углу раскрывающийся список, в котором следует выбрать версию Visual Studio. Ниже приведено дерево/содержащее все сниппеты, известные в системе Visual Studio. Раскрыв узел, можно увидеть совокупность папок, аналогичных иерархии папок в библиотеке сниппетов. Раскрыв узел, можно увидеть совокупность папок, аналогичных иерархии папок в библиотеке сниппетов:

Просмотр существующих сниппетов

Одним из преимуществ программы Snippet Editor является удобное представление структуры любого файла сниппетов, существующего в системе. Благодаря этому пользователь может просматривать сниппеты, установленные в системе Visual Studio по умолчанию, чтобы понять, как лучше создать свои собственные сниппеты.

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

Для того чтобы продемонстрировать, насколько просто программа Snippet Editor создает собственные сниппеты пользователя, перейдем к следующему упражнению, в котором создадим сниппет, для библиотеки ASP.NET AJAX.

1. Запускаем программу Snippet Editor и создаем новый сниппет. Для этого выбираем в дереве предназначенную папку, щелкаем на ней дважды и выбираем команду Add New Snippet из появившегося контекстного меню.
2. В ответ на приглашение вводим имя сниппета и щелкаем на кнопке ОК. Дважды щелкаем на новом элементе, чтобы открыть окно Editor. Обратите внимание на то, что сниппет не открывается автоматически в окне Editor — не замените свойства другого сниппета по ошибке!
3. Теперь в первую очередь редактируем поля Title, Description и Shortcut:

Наш сниппет закончен и готов к использованию. Теперь его можно вставить в окно редактора кода системы Visual Studio.

Delete Snippets File in VS Code

I have a snippets file called tutorials.code-snippets that I would like to delete from VS Code. I can’t see anything in the docs that tells you how to delete a custom snippets file. How can I delete it?

6,900 20 20 gold badges 39 39 silver badges 51 51 bronze badges
asked Apr 26, 2020 at 2:32
678 8 8 gold badges 36 36 silver badges 94 94 bronze badges
Is it in your .vscode folder?
Apr 26, 2020 at 3:11

2 Answers 2

1. Open the custom snippet
2. Right click on the tab
3. Click on Copy Path
4. Open the copied path (Make sure to delete the filename at the end of the path before opening it, or you will open the actual file)
5. Delete the file

answered Apr 26, 2020 at 3:42
MarvinJWendt MarvinJWendt
2,456 1 1 gold badge 11 11 silver badges 36 36 bronze badges

I did it a bit differently from the anwser above. I directly removed the snippet from the .json file, and I find it a better way to delete the snippet, because you can also look at your other snippets and edit them in the json file, which is more comfortable than just deleting the file. I use the snippet creator by Nikita Kunevich, so maybe if you use a different tool to create snippets they might look differently. Here’s how to do it: Click: File > Preferences > User Snippets then such a window will appear:

then select the language, for example javascript, and then you will have a window appear: (these are my custom snippets)

and here you can basically edit everything to suit your needs, just remeber to hit ctrl+save once you’re done!