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)
This json based design is excellent! Nothing but goodness on this one! Any plans for Angular?
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.
I'll take a look.
We added Angular snippets yesterday, please try and let us know what do you think!
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.
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.
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. 😁
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!
This looks very interesting and I'd like to try it. I am using VSCodium (a FOSS release of VSCode), which uses open-vsx.org as an extension gallery. Would you mind publishing your extension there, too? VSCodium is gaining popularity, so you'd reach some more people, too.
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 :)
Check, check! This is exactly why I rarely adopt snippets. Downloading now :)
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.
Only if this could be integrated with Stackoverflow! :D
Hopefully one day 😁 I wonder about the same.
This looks great! I'm going to give it a try for sure
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.
You actually don't need to do that, as that's exactly what the language server does and it can offer snippets too. microsoft.github.io/language-serve...
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?
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
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 (aurelia.io/) community to prototype their aurelia apps by running their KendoUI (telerik.com/kendo-ui) elements similarly to your snip-snap (and no, I do not like this name, it seems too cheap for such great idea:
Example: aurelia-ui-toolkits.github.io/demo... results with:
Can this work offline or behind a firewall?
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.
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!
Nice extension. Very handy.