VS Code: сниппеты

Сниппеты VS Code — шаблоны кода с заполнителями, вставляемые по короткому триггеру для ускорения набора повторяющихся конструкций.

Зачем нужно

Написание boilerplate — useEffect, React-компонент, try/catch, тесты Jest — занимает время. Сниппет превращает аббревиатуру в полную конструкцию с Tab для перемещения между заполнителями. Это особенно ценно для часто используемых паттернов конкретного проекта.

Где используется

  • React/Vue компоненты — быстрое создание структуры
  • Тесты Jest: describe, it, beforeEach блоки
  • Express маршруты, middleware
  • TypeScript интерфейсы и типы
  • Любой повторяющийся boilerplate в проекте

Встроенные сниппеты

// Встроенные сниппеты для JavaScript/TypeScript:
// clg  → console.log
// if   → if (condition) {}
// for  → for (let i = 0; i < array.length; i++) {}
// try  → try {} catch (err) {}
// imp  → import module from 'module'
// fun  → function name(params) {}

Создание пользовательских сниппетов

Ctrl+Shift+P → "Snippets: Configure User Snippets"
→ выбрать язык (например, typescriptreact)

// .vscode/typescriptreact.code-snippets (командные сниппеты)
{
  "React Function Component": {
    "prefix": "rfc",          // триггер
    "description": "React функциональный компонент с TypeScript",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  ${2:// props}",
      "}",
      "",
      "export function ${1:ComponentName}({ ${3} }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      ${4:content}",
      "    </div>",
      "  );",
      "}",
      ""
    ]
  },

  "useEffect hook": {
    "prefix": "uef",
    "body": [
      "useEffect(() => {",
      "  ${1:// effect}",
      "  return  => {",
      "    ${2:// cleanup}",
      "  };",
      "}, [${3:deps}]);"
    ]
  },

  "Jest test block": {
    "prefix": "desc",
    "body": [
      "describe('${1:Suite name}', () => {",
      "  it('${2:should ...}', () => {",
      "    // Arrange",
      "    ${3}",
      "    // Act",
      "",
      "    // Assert",
      "    expect(${4:actual}).toBe(${5:expected});",
      "  });",
      "});"
    ]
  },

  "Async function": {
    "prefix": "afn",
    "body": [
      "async function ${1:name}(${2:params}): Promise<${3:ReturnType}> {",
      "  try {",
      "    ${4:// body}",
      "  } catch (err) {",
      "    console.error('${1:name}:', err);",
      "    throw err;",
      "  }",
      "}"
    ]
  }
}

Синтаксис тела сниппета

$1, $2, $3   — позиции для Tab-навигации (по порядку)
$0           — финальная позиция курсора
${1:default} — позиция с текстом по умолчанию
${1|opt1,opt2,opt3|} — выбор из вариантов

TM_FILENAME          — имя текущего файла
TM_FILENAME_BASE     — имя без расширения
TM_DIRECTORY         — папка файла
CURRENT_YEAR         — текущий год
CLIPBOARD            — содержимое буфера

Использование сниппетов

1. Начните вводить prefix (например, "rfc")
2. Появится подсказка с описанием сниппета
3. Tab или Enter — вставить сниппет
4. Tab — переход к следующему $1, $2...
5. Escape — выйти из режима заполнения

Частые ошибки

  • Создают личные сниппеты в User Snippets вместо .vscode/ — не доступны команде
  • Не используют ${1:default} — курсор не позиционируется на нужное место
  • Слишком сложные сниппеты — проще создать файл-шаблон и скопировать
  • Не знают о встроенных сниппетах расширений (Emmet, React Snippets)

Связанные темы

Ресурсы