Онлайн-инструмент для конвертации кода в сниппеты, поддержка JavaScript / TypeScript / React / JSX / TSX      

Введите имя фрагмента (name)
Введите префикс фрагмента (prefix)
Введите описание фрагмента (description)
Пожалуйста, введите текст кода (code body)
Тип поколения
Сгенерированный результат фрагмента

VSCode Как использовать фрагменты кода


Snippets in Visual Studio Code
Фрагменты VS Code — это мощный способ повысить производительность кодирования за счет автоматизации вставки часто используемых блоков кода. Это могут быть простые текстовые расширения или более сложные шаблоны с заполнителями и переменными. Вот как их использовать:

Создание фрагментов:

Доступ к настройкам фрагмента: перейдите в Файл > Настройки > Пользовательские фрагменты (Код > Настройки > Пользовательские фрагменты на macOS). В качестве альтернативы используйте палитру команд (Ctrl+Shift+P или Cmd+Shift+P) и введите «Настройки: Настроить пользовательские фрагменты».

Выберите язык: вам будет предложено выбрать язык для вашего фрагмента (например, javascript.json, python.json и т. д.). Это гарантирует, что фрагмент будет доступен только для этого конкретного языка. Вы также можете создать файл «Глобальные фрагменты», если хотите, чтобы фрагмент был доступен на всех языках.

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

Пример (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
В этом примере:

"For Loop": Имя фрагмента (для справки).

"forl": Префикс. Ввод "forl" и нажатие Tab вставит фрагмент.

"body": Код для вставки. $1, $2 и т. д. — это табуляции (заполнители). $0 — это конечная позиция курсора.

"description": Необязательное описание, отображаемое в предложениях IntelliSense.

Использование фрагментов:

Введите префикс: в файле с правильным типом языка начните вводить определенный вами префикс (например, forl).

Выберите фрагмент: IntelliSense VS Code предложит фрагмент. Выберите его с помощью клавиш со стрелками или щелчком.

Используйте табуляции: нажимайте Tab для перемещения между табуляциями ($1, $2 и т. д.) и заполните значения.

Переменные:

Фрагменты также могут использовать переменные, такие как $TM_FILENAME, $CURRENT_YEAR и т. д. Полный список см. в документации VS Code.

Пример с переменными (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Освоив фрагменты, вы можете значительно сократить повторяющийся набор текста и обеспечить единообразие в вашем коде. Экспериментируйте с созданием собственных фрагментов для часто используемых шаблонов кода и наблюдайте, как растет эффективность вашего кодирования.