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.
Oldest 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!
This looks great! I'm going to give it a try for sure
Nice extension. Very handy.
I would so love to get this to use with Rider / C# Unity!
Any plans for a port?
Currently extension focused on languages with package managers where we can tell clearly what snippets will you need for development, however nothing is stopping us in the future to extend languages support for c# as well.
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.
Only if this could be integrated with Stackoverflow! :D
Hopefully one day 😁 I wonder about the same.
any plans for emberjs?
We currently focus on libraries which we know and use. However we’re looking forward for anyone who would like to adapt or create from scratch snippets for any libraries. The snippets format is very simple and well documented, since it uses default VS Code format just with some guidelines for standardization.
Woah! This looks awesome.
This looks awesome, any plans for PowerShell
I'll install Snipsnap and give feedback here.
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. 😁
It would be awesome if we could get preact snippets!
Promising. Will definitely use it 🙏
Any plan on overall python and python django ?
We have plans for supporting Go, Python, Ruby, PHP. Stay tuned.
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...