DEV Community

Cover image for VS Code's secret snippets
Rob OLeary
Rob OLeary

Posted on • Updated on • Originally published at roboleary.net

VS Code's secret snippets

Did you know that VS Code has built-in snippets for lots of languages?

js snippets

They are not documented in the VS Code docs.

There is no way to browse them inside VS Code.

How can you find them?

It's awkward to track them down yourself!

This spurred me to write an extension called Snippets Ranger has a nice UI to explore and edit all snippets easily.


snippets ranger extension logo

snippets ranger demo

Snippets can be defined in a number of different places. They can be added by:

  • Creating a global snippets file, a workspace snippets file, or a language-specific file; user snippets
  • Installing extensions found in the "Snippets" category in the Visual Studio Marketplace;
  • Installing some of the Programming Language extensions, which often have hidden snippets cargo e.g. Python;
  • the VS Code team to the built-in language extensions.

Keeping track of them is not possible by yourself.

How do I find the built-in snippets myself?

If you want to track down the source files yourself, they live inside each individual language extension directory. The file for each language is located at «app root»\resources\app\extensions\«language»\snippets\«language».code-snippets on Windows. The location is similar for Mac and Linux.

Find this helpful?

I would appreciate if you add a favourable review in the marketplace or star the github repo.

If you encounter an issue or have a feature request, you are welcome to make an issue on github.


Banner Photo by Markus Spiske

Discussion (1)

Collapse
robole profile image
Rob OLeary Author • Edited on

rangers

What? Where are they?