Онлайн инструмент за преобразуване на код към фрагмент, поддържа 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"
  }
}
В този пример:

„For Loop“: Името на фрагмента (за справка).
"forl": Префиксът. Въвеждането на „forl“ и натискането на Tab ще вмъкне фрагмента.
"body": Кодът за вмъкване. $1, $2 и т.н. са разделители (заместители). $0 е крайната позиция на курсора.
„description“: незадължително описание, показано в предложенията на IntelliSense.
Използване на фрагменти:

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

Изберете фрагмента: IntelliSense на VS Code ще предложи фрагмента. Изберете го с клавишите със стрелки или като щракнете.

Използвайте Tabstops: Натиснете Tab, за да навигирате между tabstops ($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}"
    ]
  }
}
Чрез овладяване на фрагменти можете значително да намалите повтарящото се въвеждане и да осигурите последователност във вашия код. Експериментирайте със създаването на свои собствени фрагменти за често използвани шаблони на код и гледайте как ефективността на кодирането ви нараства.