loading...
Cover image for Speed up your development with this new VS Code extension

Speed up your development with this new VS Code extension

alex_barashkov profile image Alex Barashkov Updated on ・3 min read

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.

out

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.

Posted on Jun 19 by:

Discussion

markdown guide
 

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.

 

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.

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.

 

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. 😁

 

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 :)

 

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!

 

Only if this could be integrated with Stackoverflow! :D

 

Hopefully one day 😁 I wonder about the same.

 

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.

 

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 :)

 

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.

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. 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?

My image

 

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:

 

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

 

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!

 

Perfect timing Alex!! I'm learning to build a react responsive web app as a designer and I'm so thankful you've built this!! Saves so much time!! Thank you!!!

 

Let us know about your experience with the extension. Do you miss snippets for some libraries?

 

Very good idea! I will have a look…

 

Hi Alex! I really like this initiative.
Currently installing and going for a test run. :)

 

How did it go? :) Curious to know what do you think.

 

As I see from the description, it requires some config files to be downloaded.

Can you describe in few steps how to install this extension (For React, Redux) in offline/portable mode. I've to move them from an Internet machine to an Non-Internet machine

 

Basically to make it work offline you just need to install the extension first time somewhere with internet, it will fetch all snippets for your project and add them to .vscode/snipsnap.code-snippets file.You can then commit to your repository and use anywhere without internet connection.

 

Promising. Will definitely use it 🙏

 

This is amazing, always wanted to create such libraries without searching and installing snippet extension for each language. Thanks a lot.

 

Very nice. Good and thank you for developing the extension for vs code.

 
 

Just installed. Great work friends!

 

I'll install Snipsnap and give feedback here.

 

This looks awesome, any plans for PowerShell

 

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.

 

Nice extension. Very handy.

 
 

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 JS? Can integrate HTML & Bootstrap ? So I don't need multiple extensions.

 

Really cool, I wish there was a way to hide depriorities the lesser useful ones. For example constructor super(props).

 

Thank you for the feedback. Currently there is way only to disable certain linraries by adding them to .snipsnapignore.