Онлайн-інструмент конвертації коду у фрагменти, підтримка JavaScript / TypeScript / React / JSX / TSX      

Введіть назву фрагмента (name)
Будь ласка, введіть префікс фрагмента (prefix)
Будь ласка, введіть опис фрагмента (description)
Будь ласка, введіть текст коду (code body)
Тип генерації
Згенерований результат фрагмента

VSCode Як використовувати фрагменти коду


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

Створення фрагментів:

Доступ до налаштувань фрагмента: перейдіть до «Файл» > «Параметри» > «Фрагменти користувача» (Код > «Параметри» > «Фрагменти користувача» на 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"
  }
}
У цьому прикладі:

«Цикл для»: назва фрагмента (для довідки).
"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}"
    ]
  }
}
Опанувавши фрагменти, ви можете значно зменшити кількість повторюваного введення та забезпечити послідовність у своєму коді. Експериментуйте зі створенням власних фрагментів для часто використовуваних шаблонів коду та спостерігайте за підвищенням ефективності кодування.