Введение

Вы собираетесь узнать, как создать сниппет в Visual Studio Code и зачем он вам нужен?

Фрагмент кода - один из самых мощных инструментов, предоставляемых Visual Studio Code. Фрагменты кода - это шаблоны, которые упрощают ввод повторяющихся шаблонов кода, таких как циклы или условные операторы, которые экономят наше время и делают наше кодирование более эффективным и быстрым. Чтобы показать, как это работает, давайте создадим сниппет для typeScript.

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

Вы можете определить свои собственные сниппеты, глобальные сниппеты или сниппеты для определенного языка. Чтобы создать сниппет, мы должны отредактировать файл сниппета, для этого выберите Пользовательский сниппет в разделе Файл ›Настройки (Код› Настройки в macOS) и выберите язык, для которого должны отображаться сниппеты, или создайте новый глобальный сниппет (Новый глобальный файл сниппетов). В нашем случае мы собираемся выбрать typescript.json.

Фрагменты определены в формате JSON. В приведенном ниже примере показан фрагмент кода для создания службы в angular. скопируйте и вставьте приведенный ниже код внутри объекта в файл typescript.json.

В этом примере

  • Angular Service - это имя фрагмента.
  • asrv - это префикс, который определяет, как этот фрагмент выбирается из IntelliSense и автозавершения табуляции.
  • body - это содержимое и либо одна строка, либо массив строк, каждый элемент которых будет вставлен как отдельная строка.
  • описание используется в раскрывающемся списке IntelliSense.
"Angular Service": {
"prefix": "asrv",
"body": [
"import { Injectable } from '@angular/core';",
"@Injectable({",
"  providedIn: 'root'",
"})",
"export class ${1}{",
"",
"  constructor(${2}) { }",
"}"
],
"description": "For Creating Angular Service"
}

В приведенном выше примере есть два заполнителя: ${1} и ${2}. Вы можете быстро пройти их в порядке их количества. Как только вы закончите создание собственного фрагмента, сохраните файл JSON, и вы готовы к работе.

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

Https://code.visualstudio.com/docs/editor/userdefinedsnippets

Если вам понравился этот пост, возможно, вам понравятся и другие мои посты: