robole/vscode-snippets-ranger

View and edit all of your snippets in one purty place! Yee-haw!!

Snippets Ranger

View and edit all your snippets in one purty place. Yee-haw!

Snippets are shown in an easy to browse webview.

Snippets are formed into posses:

• Project: These are the snippets contained in the .vscode folder of the current workspace,
• User: These are the global snippet files (.code-snippets files) and language snippet files (.json files) that you created as an user on your system,
• Extension: These are the snippets files that are included in extensions you have installed,
• App: These are the snippets files that are packaged with VS Code.

The extension uses the exact same source files as VS Code does. No double-crossing rattlesnakes! 🐍

Easy navigation

There are sticky headings to ensure you can browse through long snippet lists without losing context. 🦎🔝

The table of contents facilitates quick navigation to a snippets set.

Pressing the Home key will return you to the table of contents.

Easy editing

You can open the snippets file with the View Source File button contained in the sticky header for every snippets file in the webview.

In the table, you can edit each individual snippet with the buttons in the Action column:

• The Edit action button (identified by the pen icon) will take you to the specific snippet in the source file to perform an edit.
• The Delete action button (identified by the trash icon) will delete the snippet straight away without opening the file.

If you are working in code and would like to quickly add a snippet to a snippets file, you can use the Snippets Ranger: Add new snippet to snippets file... command. It has 3 easy steps:

1. Select some code (no selection is fine too) and run the command,
2. Choose an existing snippets file or create a new file from the menu,
3. The file will be opened with a new snippet. Your selection will be in the body field as an array of values. You can tab through the properties to fill each one out.

Commands

The following commands are available:

1. Snippets Ranger: Show me that dur Range, Partner: Opens the webview that lists all your snippets.
2. Snippets Ranger: Add new snippet to snippets file...: Quickly add a new snippet to a snippet file of your choosing. If you have code selected, this selection will be added to the body of the snippet. Any dollar signs in the selection will be escaped (preceded by 2 backslashes) to prevent them being interpreted as tab stops.

Activation

The extension is only loaded when one of the commands are executed.

Performance

To gather and render approx 6000 snippets sourced from 18 different files, it takes 4.5 seconds on a modestly-specced laptop running Ubuntu 18. 🚀

Contribute

Contributions are welcome. If you have a suggestion or find a bug, please file an issue. Please do not offer a PR without raising an issue first, my time for reviews are limited.

To help other people find the extension, you can star the repo 🌟, and leave a positive review in the Visual Studio Marketplace or Open VSX Registry. A recommendation on social media or on your blog is welcome too!

You can make a donation to support me to make this project a higher priority and allow me to dedicate more time to open-source. I can only do bits and pieces in my spare time!

Learn more about snippets

You can read my comprehensive guide on Snippets on FreeCodeCamp: Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners. It's not just for beginners! 😉

vscode-snippets-ranger's Issues

Not loading snippets in view - "Cannot read properties of undefined (reading '0')'" error

Hello,
I love this extension. When I try to open it I now get:

Command 'Snippets Ranger: . . . resulted in an error. Cannot read properties of undefined (reading '0')'

It is stuck on the loading circle an says 'Rounding them up!'

Version 1.5, - 2023-11-10

Thanks

remnote vscode: Oucho Gaucho! 🌵 Nothing to round up! 🤠

but it works fine using local vscode

thx for create this plugin!

Stuck @ 'Rounding them up!' 😢

New PC, well specced. Restarted, reinstalled.

Win10 Pro, existing project, no custom snippets.

Support workspace snippets

Wonderful extension! ❤️
Only thing I miss: since ~2 years one can define workspace snippets in VSCode:
https://stackoverflow.com/a/56978528/1633985

Would be awesome if this extension would support that 😎

dollar sign disappears when creating new snippet from selection

What happens:
When I select this code in a php file, containing variables that start with dollar,

$statement = $this->pdo->prepare($sql);

and then do "Code Ranger : Add new snippet", I get the following result in the snippets json file:

"enter a name" : {
    "prefix": "",
    "body": ["  = ->pdo->prepare( );"],
    "description": ""
},

Notice above how all variables that started with a dollar completely disappeared from the selection in the resulting snippet.

What I expect:

• The variables should not disappear.
• The dollar should be included from the original selection, AND escaped like this:

"enter a name" : {
    "prefix": "",
    "body": ["\\$statement = \\$this->pdo->prepare(\\$sql);"],
    "description": ""
},

I hope this clarifies the issue. Many thanks.

Button to copy snippet text / possibly already to user defined snippet file

Thanks for the extension, it makes life certainly easier!

Is your feature request related to a problem?

If I want to overwrite a builtin snippet (e.g. chaning or adding a trigger), it is hard to just get the snippet definition because the snippet definition files do contain line breaks.

Describe the solution you'd like

It would be nice if we have a button to simply copy the entire snippet in question.

Describe alternatives you've considered

Alternatively, or in addition, a button to automatically copy the snippet to a user defined file and open that file to edit it.

Additional context

Aren't changed / deleted builtin or extension snippets back to the default after an update?

Escaped backslashes (2 consecutive backslashes) not appearing correctly in HTML output

Hello. I noticed that when I create a new snippet, a dollar $ sign (or a variable starting with dollar) is removed, not preserved. Could you make so that a variable starting with dollar is preserved, and the dollar sign is escaped?

Example: right now, when I want to create a snippet out of this line:
$statement = ->pdo->prepare($sql);

I get this (notice that I loose the variables):
"= ->pdo->prepare();",

Instead, I would like it to automatically look like this:
"\\$statement = ->pdo->prepare(\\$sql);",

thank you.

Error loading webview

VS Code version	OS	Extension version
1.82.1	Win 10 x64 pro (french) 21H2	v0.22.1

Steps to reproduce

1. Run Show me that dur Range, Partner

Results

Error loading webview:
Error: Could not register service worker:
InvalidStateError: Failed to register a ServiceWorker:
The document is in an invalid state..

Delete action button does not delete snippet correctly

Describe the bug

When you click the delete button on the table row, the snippet is not deleted correctly in the source file.

Expected behavior

Snippet to be deleted correctly.

Actual behavior

Ability to search snippets

Please add feature to this extension to search/filter snippets using name or prefix or description