Турбо-настройка VSCode для React: Генерация сниппетов в 1 клик

#VSCode #Snippets #React #TypeScript #Productivity #DevTools

Как превращать любой код в переиспользуемые шаблоны за секунды с помощью Snippet Generator

Устали вручную экранировать кавычки и табы при создании сниппетов? Показываем, как с расширением Snippet Generator (fiore) мгновенно конвертировать выделенный код в готовые шаблоны для React, TypeScript и JavaScript. Экономия 90% времени на настройку IDE.

Почему это революционно?

Традиционный способ:

Выделить код
Вручную добавлять \", \n, \t
Копировать в JSON
Проверять синтаксис

Время: 3-5 минут на сниппет

С Snippet Generator:

Выделить код
Ctrl+Alt+S
Заполнить 3 поля

Время: 15 секунд

Установка и настройка

1. Установка через терминал VSCode:

code --install-extension fiorite.snippet-generator

или через Marketplace: поиск "Snippet Generator (fiore)"

2. Проверка настроек:

settings.json

{
  "generateSnippet.snippetFilePath": "default",
  "generateSnippet.autoIndent": true
}

Для WSL/Linux укажите полный путь к snippets/

Рабочий процесс: От кода к сниппету за 3 шага

Пример: Пример: Создаем шаблон React-компонента с TypeScript

1. Выделите код:

typescript

import React from 'react';

interface Props {
  title: string;
  count: number;
}

export const Counter = ({ title, count }: Props) => {
  return (
    <div className="counter">
      <h2>{title}</h2>
      <p>Current: {count}</p>
    </div>
  );
};

2. Вызовите генератор:

Ctrl+Alt+S (Win/Linux)
Cmd+Option+S (Mac)
Или: ПКМ → "Generate snippet"

3. Заполните форму:

Language: typescriptreact
Name: TS React Component
Trigger: trc
Description: TypeScript React component with props

Пример: Результат в snippets/typescriptreact.json:

typescriptreact.json

{
  "TS React Component": {
    "prefix": "trc",
    "body": [
      "import React from 'react';",
      "",
      "interface Props {",
      "  title: string;",
      "  count: number;",
      "}",
      "",
      "export const Counter = ({ title, count }: Props) => {",
      "  return (",
      "    <div className="counter">",
      "      <h2>{title}</h2>",
      "      <p>Current: {count}</p>",
      "    </div>",
      "  );",
      "};"
    ],
    "description": "TypeScript React component with props"
  }
}

Продвинутые фишки

1. Автоматическая параметризация:

Используйте $1, $2 для таб-стопов:

До генерации:

const [$state, set$State] = useState($0);

После настройки:

"body": "const [{1:state}, set{1/(.*)/{1:/capitalize}/}] = useState({2:null});"

2. Мультиязычные сниппеты:

Для CSS-in-JS: выберите javascriptreact
Для Redux Toolkit: typescript
Для Jest тестов: javascript

3. Перезапись существующих:

Просто укажите имя существующего сниппета — он обновится автоматически.

Интеграция с другими инструментами

1. ESLint + Prettier:

Генератор сохраняет исходное форматирование кода.

2. Git:

Добавьте *.code-snippets в репозиторий для командной работы:

# .gitignore
!/.vscode/*.code-snippets

3. Snippet Manager:

Комбинируйте с расширением Snippets Ranger для удобного просмотра.

Примеры для React-экосистемы

1. Redux Toolkit Query:

Исходный код:

typescript

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], void>({
      query: () => 'posts',
    }),
  }),
});

Результат:

snippet.json

{
  "RTK Query API": {
    "prefix": "rtkapi",
    "body": [
      "const api = createApi({",
      "  reducerPath: '${1:api}',",
      "  baseQuery: fetchBaseQuery({ baseUrl: '${2:/}' }),",
      "  endpoints: (builder) => ({",
      "    ${3:getData}: builder.query<${4:Type}, ${5:void}>({",
      "      query: () => '${6:endpoint}',",
      "    }),",
      "  }),",
      "});"
    ]
  }
}

2. Next.js Page:

typescript

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{JSON.stringify(data)}</div>;
}

Настройка горячих клавиш

keybindings.json

{
  "key": "ctrl+shift+s", // Более удобное сочетание
  "command": "extension.generateSnippet",
  "when": "editorHasSelection"
}

Результаты использования

Метрика	До	После	Эффект
Создание сниппета	3-5 мин	15 сек	⏱️ 92%
Частота использования	2-3/нед	10-15/день	📈 400%
Ошибки форматирования	35%	0%	🚀 100%

Итог:

Snippet Generator (fiore) — это must-have для:

🔥 Быстрого создания библиотеки шаблонов
💡 Стандартизации кода в команде
🛠️ Избавления от ручного экранирования
📚 Построения персональной базы знаний

Следующие шаги:

Установите расширение
Начните с 5 ключевых сниппетов (компонент, хук, API-вызов)
Настройте удобные горячие клавиши
Экспортируйте сниппеты в Git

Почему это лучше ручного метода:

Автоэкранирование кавычек и спецсимволов
Сохранение форматирования (отступы, переносы)
Интеграция с VSCode без редактирования JSON вручную
Поддержка WSL через настройку путей
Идеально для TypeScript с сложными типами

Для максимальной эффективности:

code --extensions-dir ./snippets-template