Проект: Snipsnap Templates — Вастрик.Клуб 🤘✖️👩‍💻‍

Проект: Snipsnap Templates Публичный пост

28 мая 2021 1791

https://templates.snipsnap.dev/

Snipsnap Templates - это инструмент для разработчиков, который позволяет создавать сode templates и использовать их в VS Code Extension.

Homepage

Я очень не люблю тратить время на рутинные задачи, а также запоминать вещи, в которых мало смысла. Занимаясь бэкэндом, фронтендом или девопс задачами, я постоянно сталкиваюсь с кучей бойлерплейт кода. Например, работая с React - каждый новый компонент обычно находится в своей папке, внути которой будет ряд файлов вроде index.js, componentName.jsx, componentName.css. Все они должны иметь какой-то минимальный бойлеплейт код.

Типичные решения:

создать все руками
создать руками файлы / папки, но потом заполнить их с помощью сниппетов
скопировать другой компонент и убрать все ненужное

Все варианты для меня кажутся крайне не продуктивными, поэтому мы с командной сделали Snipsnap Templates.

С помощью Cloud UI вы можете создать шаблоны папок/файлов и прокачать их с помощью handlebars переменных и user prompts.

Подробнее в видео

User prompts - набор вопросов, которые extension спросит у пользователя при попытке создания шаблона, а значения запишет в переменные, которые можно использовать на уровне шаблонов следующим образом {{variableName}}.

На начальном этапе мы сделали поддежку text conversion хелперов:

toCamelCase
toSnakeCase
toKebabCase
toUpperCase
toLowerCase
toPascalCase

Сферы применения

Kubernetes, Docker, React, CI/CD, Webinars, Tailwind, PHP, Vue, Angular, Express, Koa, Graphql - посути любые технологии где приходится писать хоть какое-то количество бойлерплейт кода для созданя нового API ендпоинта, страницы, деплоймента и.т.д.

Для кого

Если вы разработчик или команда разработчиков, то с помощью этого инструмента вы не только сможете улучшить свою производительность, но и получить одназначно стандартизированную структуру/контент файлов для повседневных задач.

Фичи

Шаринг. Можно создать группу шаблонов и расшарить все со своей командой
Public marketplace. Можно сделать шабон публично доступным, чтобы любой мог склонировать его и использовать в качестве экзампла

Планы

Если получим позитивный фидбек от пользователй и увидим, что проект интересен массам, то у нас много планов касаемо того, как можно развивать продукт.

CLI
поддержка типов переменных
интеграция с github
поддержка intellij IDE

18 комментариев 👇

Programistich Mobile Developer ✖ Команда Клуба 28 мая 2021

поддержка intellij IDE

Становлюсь первый в очередь

Развернуть 1 комментарий

Юрий Покусаев 30 мая 2021

@Programistich, так в intellij IDE недавно добавились темплейты, я активно их юзаю

Развернуть 1 комментарий

Programistich 30 мая 2021 ✖ Команда Клуба

@frw23, Хм, подробнее можно?

Развернуть 1 комментарий

Юрий Покусаев 30 мая 2021

@Programistich,

ссылка на доку
Есть единственный минус в том, что папку нужно ручками создавать, но мне кажется я находил как это автоматизировать если не ошибаюсь. Если найду - допишу

Развернуть 1 комментарий

Alex Barashkov 31 мая 2021 автор

@frw23, спасибо , а я правильно понимаю что их отдельно под каждый проект создавать надо раз они в папке .idea хранятся, как я понял из доки.

Развернуть 1 комментарий

Юрий Покусаев 31 мая 2021

@nikel, Не обращал внимания на этот момент в доке, но у меня при переключении между проектами темплейты сохраняются

Развернуть 1 комментарий

Иван Русанов Старший инженер 28 мая 2021

Ого! Вы проделали большую работу! Круто! Также становлюсь в очередь за поддержкой Intellij)

Развернуть 1 комментарий

Andrei Vakulski Engineering Manager 28 мая 2021

Выглядит интересно. Рассматривая какой-нибудь TypeScript + React + Styled-components хочется чтобы можно было конфигурировать "динамические файлы" основываясь на бинарных ответах в prompts. Например, делаем template "React Component". Круто было бы иметь 3 последовательных promptа:

Component name? - уже реализовано и круто работает:)
Component with props? yes|no -> генерить ли базовый type/inteface props или это компонент вообще без props
Should add styled.jsx? yes|no -> добавлять ли рядом базовый файл для styled-components

Можно конечно разные темплейты под это, но некоторые варианты будут пересекаться.
Хз, возможно будет применимо и в других случаях.

Развернуть 1 комментарий

Alex Barashkov 28 мая 2021 автор

@AndreiVakulski, спасибо за фидбек, это у нас есть в планах как часть поддержки разных типо переменных для prompts, и как результат возможность использовать более мощно handlebars темплейты с if condition.

If condition не тестировали, но потенциально возможно уже будет работать:

{{#if hasProps}}
{{componentName}}.defaultProps = {

};
{{/if}}

и вместо yes при вопросе просто любой символ вставлять.

Когда добавим поддержку типов переменных, можно будет сделать hasProps как boolean и уже на основании этого, либо рендерить блок, либо нет.

Развернуть 1 комментарий

Andrei Vakulski 28 мая 2021

@nikel, да, про это не подумал, попробую на выходных с if'ами. Это позволит иметь динамический код внутри файлов. Не планируется ли добавить "динамические файлы", чтобы можно было добавлять определенный файл в зависимости от ответа в prompt? Как ещё один кейс: prompt с вопросом добавлять ли файл для тестов.

Развернуть 1 комментарий

Alex Barashkov 28 мая 2021 автор

@AndreiVakulski, хороший кейс, пока о таком не думали, но это явно может быть полезно. подумаем как лучше это сделать.
Спасибо!
Если с if не заработает, то как временное решение можно просто создать несколько разных шаблонов для разных случаев.

Развернуть 1 комментарий