DEV Community

Cover image for Speed up your development with this new VS Code extension
Alex Barashkov
Alex Barashkov

Posted on • Updated on

Speed up your development with this new VS Code extension

My friend and I recently developed VS Code extension – Snipsnap that aims to solve the existing problem with code snippets collections.

Snipsnap is the ultimate snippets collection and VS Code extension that automatically exposes all available snippets for every library you are using in your project.


We already have snippets for React, Redux, Gatsby, Next.js, Vue. The full list of snippets you can find there.

🔥 What problem Snipsnap is trying to solve?

Problem #1

Almost every popular language has a lot of different libraries that people used to use. Some of them big, some are small. For each library, you should keep in mind a lot of different syntax constructions in order to use them. Code snippets help to fix it, but you don't want to create and you will not install extensions for each small library. Instead of it we want to have a single Snipsnap extension that will fetch relevant code snippets based on languages, packages you use in your current project.

Problem #2

Different snippets extensions follow different rules and use unpredictable shortcuts such as "rccp", "ecrp", 'impp' etc. Having those unreadable shortcuts don't allow you to actually search across all snippets you have for a specific case. We want to change it by standardizing snippets format and providing clean, predictable search syntax such as library-name keyword, so you can always type the name of your library and get a full list of snippets available for it.

Problem #3

Each IDE has individual snippets format that does not compatible with other IDEs. So having independent snippets format could allow us to create Snipsnap extensions for each popular IDEs and using converters transform snippets from one format to another.

🛠️ How it works

Snipsnap VS Code extension scans your package.json(or yarn.lock) and searches on the server available snippets for packages you have in the project. It means that you don't need anymore install different extensions with snippets for frameworks, libraries you use.

Snipsnap extension creates snipsnap.code-snippets inside .vscode folder with all snippets, so snippets will be available even for other developers who did not install extension.

Snipsnap scans for newly available snippets:

  • on folder opening
  • on pressing command "Snipsnap: Feth the snippets" via the command palette All snippets currently present in this repository and follow the guidelines described below.

🗓️ Our plans and vision

The current version could be called MVP and it's there just for the one purpose – test the idea and get first feedbacks. If you like extension - star the repository, tell us about your experience or help us to improve the project.

We don't want to stop just on having snippets for Javascript. We want to make it standard for all popular languages and their package managers. So cover Ruby, Go, Python, PHP libraries also in our plans.

We believe that snippets could become a perfect solution for providing simple documentation and examples. Code snippets should become the part of packages repositories like README files. You build your library, you put snippets together with it in .snipsnap.json file and then we fetch it.

Having standardized collection could allow us to write extensions and converters for all popular IDE's, that will finally make code snippets independent from IDE. Let's say in a couple of years the new awesome IDE will be released, instead of writing a whole batch of snippets for new IDE you will be able to just continue using Snipsnap and the collection you already created.

💡 Your feedback matters

We are very curious to know what do you think about Snipsnap. Let us know by leaving a comment or submitting an issue on Github.

Top comments (54)

jwp profile image
John Peters

This json based design is excellent! Nothing but goodness on this one! Any plans for Angular?

alex_barashkov profile image
Alex Barashkov

Hi John, we would like to add Angular and there are available snippets already in other extensions that we can take as a basis, however, we're looking for someone with Angular experience who will be able to review them and adjust if necessary.
If you can help us with that it would be great.

jwp profile image
John Peters

I'll take a look.

Thread Thread
alex_barashkov profile image
Alex Barashkov

We added Angular snippets yesterday, please try and let us know what do you think!

brpaz profile image
Bruno Paz

It looks a really nice project! Congrats.

I like the idea of introspecting the package.json and similar files to only provide suggestions for installed packages.
It´s a very common problem for me to have too many snippet suggestions because they aren´t tailored to that particular project or file type.

Different snippets extensions follow different rules and use unpredictable shortcuts such as "rccp", "ecrp", 'impp' etc.

100 times this! I don´t understand how people can name snippets like that. ;)
This has stopped me from using many external snippets and always aim to build my own library, which is good as it will only contain what I need but also requires more maintenance.

My naming approach is very similar to yours, which is great. ;)

I also support the vision of a standard snippets format that can be reused between Editors.
I have the idea of building a small tool to convert snippets between Jetbrains and VSCode format which are the main Editors I use. It´s somewhere in my side projects backlog. ;)

Looking forward to have more snippets for more languages like Go.

alex_barashkov profile image
Alex Barashkov

Glad that you liked it. Having converters and extensions are in our plans so if you decide to start that backlog project, welcome to join our snipsnap team. 😁

fasani profile image
Michael Fasani

I’ll give it a try, 20 years of programming and I have never really had success in this topic. Finally I am using Alfred which is nice as it works across all windows, iTerm, Code etc. But this looks very interesting!

bkis profile image

This looks very interesting and I'd like to try it. I am using VSCodium (a FOSS release of VSCode), which uses as an extension gallery. Would you mind publishing your extension there, too? VSCodium is gaining popularity, so you'd reach some more people, too.

alex_barashkov profile image
Alex Barashkov • Edited

Thank you! I've never heard about this, so I will have to read how to publish extensions there. I did not find clear documentation about this from the first glance.
We definitely don't mind to publish it there too, just need to understand how :)

voiedev profile image
Charles Allen

Prob #1 - you will not install extensions for each small library
Prob #2 - different snippets extensions use unpredictable shortcuts

Check, check! This is exactly why I rarely adopt snippets. Downloading now :)

thenaman047 profile image

Looks really useful and am definitely gonna try it out.

Also, Can you suggest me a good source to develop such an extension myself. Vs code docs are very confusing to me as I am unable to understand how it works exactly and which extension type I should take to make my extension.

sandordargo profile image
Sandor Dargo

Only if this could be integrated with Stackoverflow! :D

alex_barashkov profile image
Alex Barashkov

Hopefully one day 😁 I wonder about the same.

mskog profile image
Magnus Skog

This looks great! I'm going to give it a try for sure

razzeee profile image

I'm quiet confused by this. While I think streamlining how you make snippets searchable is useful, I'm not convinced, that we need to write code for that. I think a smart documented practice would be a great way to get to a standard.
In general, each and every language server should include all the snippets you need for that language/framework that the language server is targeting.

Having standardized collection could allow us to write extensions and converters for all popular IDE's

You actually don't need to do that, as that's exactly what the language server does and it can offer snippets too.

tannerhallman profile image
Tanner Hallman • Edited

This is great, but it's fairly hard to see what shortcut you're about to apply due to the width of my command palette on vscode... I did some research but couldn't find an easy way to make the palette wider... anyone else find a solution for this?

My image

jeferson_sb profile image
Jeferson Brito

Man I loved it!
"Different snippets extensions follow different rules and use unpredictable shortcuts such as "rccp", "ecrp", 'impp' etc." - Totally true.
take for example some extentions like ES7 React/Redux/whatever.. what the hell is "imbrnl"?
Snipsnap looks great

adriatic profile image
Nikolaj Ivancic • Edited

I find this idea very appealing and if it gets done right, it would be a perfect tool for nearly all developers doing the prototyping work. Even more important (in my opinion) is its use in the technical documentation - see the (much less elegant) solution that I did with a couple of great guys, allowing the members of the Aurelia ( community to prototype their aurelia apps by running their KendoUI ( elements similarly to your snip-snap (and no, I do not like this name, it seems too cheap for such great idea:

Example: results with:

offendingcommit profile image
Jonathan Irvin

Can this work offline or behind a firewall?

alex_barashkov profile image
Alex Barashkov

You basically just need to fetch snippets once, after that you could even commit them to the repository. After first project opening it will load snippets to .vscode/snipsnap.code-snippets
You can read more in readme.

Since it also fully open source project you can run even your own snippets server under your private network.

ddaypunk profile image
Andy Delso

Loving this idea and plan to try it out with the React based UI Testing site I am putting together to use my Selenium Framework on!

srinivaassunil profile image

Nice extension. Very handy.