Всем привет!

Как-то по работе мне в очередной раз понадобилось делать новую фичу. В целом обычное дело для Frontend-разработчика. Однако уже сильно наболело кликать кнопочки в VSCode по 300 раз (а если не туда нажал, то это вообще отдельное). Поэтому я сделал расширение, которое очень сильно мне помогло и хочу поделиться с вами!

Ссылочка на гит *клик*

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

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

Синтаксис создания очень простой: * Находящиеся на одном уровне элементы перечисляются через : * Папки заключаются в <> , при этом внутри обязательно должна быть вертикальная черта | , перед ней пишется имя папки, справа всё содержимое, например вот так: <folderName|file1.ts:file2.js> , ну и, конечно, очевидно, что внутри одной папки могут быть и другие папки.

2. Перед тем как создать где-то структуру, надо понять что это за "где-то". Поэтому при запуске расширения вам выпадает список папок относительно той папки, где у вас открыт VSCode, и далее вам предлагается либо пробираться вглубь до какой-то конкретной, и, если там будет пустая, то создать новую, либо в любой момент остановиться и выбрать "Создать новую папку".

3. Итак, допустим, мы поняли, где хотим создать и какая структура папок. Но вот незадача: нужно ведь открывать файлы и, вероятно, заполнять содержимое. Не совсем! После выбора директории вам предстоит выбрать фреймворк, а также соответствующие параметры. К примеру, вы работаете на svelte и используете для скриптов обычный js , а для стилизации less - без проблем. Выбираете данные параметры и пишете структуру, например вот так: <ui|Card>:<api|getData.ts>:index.ts (вы спросите, а почему я не указал для компонента расширение? Всё очень просто: если вы не указали файлу расширение, то будет браться расширение в зависимости от того какой фреймворк вы выбрали, т.е. в данном случае расширение у файла Card будет .svelte). Таким образом, на выходе получаем вот такую структуру:

/FOLDER | |__ /api | | | |__getData.ts | |__ /ui | | | |__Card.svelte | |__ index.ts

4. Поздравляю, вы создали структуру с помощью простенького расширения для VSCode.

Вообще, если говорить о каких-то дальнейших разработках и развитии инструмента, то можно ознакомиться с milestones в репозитории. Но есть и discussions, чтобы пользователи могли писать свои идеи и предложения по развитию. Всем большое спасибо, кто прочитал мой небольшой пост-статью! Надеюсь, что моё творение будет помогать разработчикам, кто не совсем разобрался в cli-инструментах и тоже устал создавать папки, кликая 300 раз мышкой.