Проект: Snipsnap Templates  Публичный пост
28 мая 2021  647
Snipsnap Templates

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

Homepage

snipsnap-templates-demo
snipsnap-templates-demo

Я очень не люблю тратить время на рутинные задачи, а также запоминать вещи, в которых мало смысла. Занимаясь бэкэндом, фронтендом или девопс задачами, я постоянно сталкиваюсь с кучей бойлерплейт кода. Например, работая с 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
20 комментариев 👇

поддержка intellij IDE

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

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

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

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

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

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

@Programistich,

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

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

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

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

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

  Развернуть 1 комментарий
Иван Русанов , Java разработчик 28 мая 2021

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

  Развернуть 1 комментарий
Andrei Vakulski , Tech Lead / Engineering manager 28 мая 2021

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

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

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

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

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

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

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

};
{{/if}}

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

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

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

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

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

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

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

Я бы лучше взял для этого yeoman.

Отличается тем, что супер-гибкий и можно сделать вообще что угодно, ведь внутри простой джаваскрипт, но крут тем, что можно создавать опросник в cli чтобы создатель нового сервиса накидал свои хотелки

Ну и коммьюнити наделало уже кучу генераторов:

https://yeoman.io/generators/

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

@Kirk, под каждую мелочь кодить отдельно генератор, штука на любителя. Смотрел на это, когда думал как решить этот вопрос для нашей команды.

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

@nikel, ну генератор можно накодить один и его расширят постоянно, все же у команды вряд ли множество возможных вариантов ограничено

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

Очень круто! Давно уже в голове бродила мысль запилить такое самому, но руки как обычно так и не дошли. Буду пользоваться, отличная работа!

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

@SergeyZwezdin, Рад, что ни у одного меня такие мысли были 😁

  Развернуть 1 комментарий
Миша Гусаров , Инженегр-погромист 28 мая 2021

Copy-paste as a service :)

А если серьёзно: камон. Переиспользование между проектами ещё хоть как-то понятно, но внутри одного проекта? Это ж готовые грабли «тут поменяли, а тут забыли».

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

@dottedmag, я вижу что ты не понял смысла этой штуки :) потому что помоему юзкейс очевидный как раз внутри одного проекта.

Так как вижу у тебя в профиле Devops / Backend ориентацию, то дам пример из этой отрасли:

К примеру у тебя микросервисная архитектура. Проект еще достаточно новый. Cервисы периодически добавляются. На каждый такой сервис ты делаешь набор yaml файлов для какого-нибудь Kubernetes + CI/CD конфиги. Так как у тебя микросервисы, то у тебя уже полно подобных конфигов, соответственно вместо копи-паста, ты можешь забить это в шаблон и воспроизвести файлы в несколько кликов. А с помощью user prompts еще и напомнить себе о тех местах, которые тебе кастомизировать надо.

Пример Backend:
В питоне я не силен, но подозреваю что если писать на каком-нибудь джанго то у тебя например каждый контроллер для нового ендпоинта имеет однотипную стартовую конструкцию, вот зачем ее руками писать если можно ее шаблонизировать.

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

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

@nikel,

я вижу что ты не понял смысла этой штуки :)

Как раз наоборот - очень хорошо понял. Смотри ниже.

На каждый такой сервис ты делаешь набор yaml файлов для какого-нибудь Kubernetes + CI/CD конфиги. Так как у тебя микросервисы, то у тебя уже полно подобных конфигов, соответственно вместо копи-паста

Любой SRE, который будет за этим замечен, будет немедленно уволен.

Любая копипаста такого рода выжигается калёным железом: либо через генераторы подвязанные через сборочную систему, либо через автоматизацию через API, либо как угодно ещё.

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

Очень жду поддержку jetbrains продуктов

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

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб