tahabasri/snippets

Supercharge your Snippets in VS Code — Manage your code snippets without quitting your editor.

Hi there, I'm Taha BASRI 👋

Hey there! 👋 I'm a tech enthusiast with a passion for turning complex problems into elegant solutions. With a background as diverse as my Spotify playlist, I've journeyed from crafting Java applications to sculpting SaaS masterpieces with Salesforce.

At CGI, I was like a wizard in the world of Java, bringing up enhancements and features for enterprise applications. Then, I joined team Oracle (like team Red Bull Racing did), where I helped automate processes faster than you can say "GraalVM".

Now, as a Technical Consultant at Salesforce, I'm like a digital architect, designing and delivering tailored solutions using Salesforce's finest tools. Whether it's Experience Cloud, Commerce Cloud, or Lightning Web Components, I'm your go-to guru for all things Salesforce.

Whether it's a chat about your next big idea or a request for some coding magic, I'm here to turn your tech dreams into reality, one line of code at a time. ✨

I write blogs about digital life @medium and build useful projects here at @Github.

---

Latest Blog Posts / Talks

• Building LWR sites with Experience Cloud
• Can’t Find the Perfect Email Signature? Code Your Own!
• Manage Process as Code

---

Contact & Support

• 📫 How to reach me ? You can always reach me on my X account or via LinkedIn.
• 💬 Feel free to contact me for any technical consulting, event partnership or any other question.

snippets's Issues

Support prefix

Just like when defining User Snippets in VSCode, it would be helpful if this extension supported prefix.

{
    "Insert heading level 1": {
       "prefix": "heading1",
       "body": ["# ${1:${TM_SELECTED_TEXT}}$0"],
       "description" : "Insert heading level 1"
    }
}

The prefix property defines the trigger phrase for the snippet. It can be a string or an array of strings (if you want multiple trigger phrases). Substring matching is performed on prefixes, so in this case, typing "h1" would match our example snippet.

Drag and drop within a folder

Hello how have you been.
As always, thanks for your collaboration.
In this case, I'm telling you that I can drag and drop the snippets from one folder to another, but I can't drag and drop within the same folder.
This is a mistake?
Or is it planned to incorporate it in the future?
Thank you.

Snippets are not syncing.

I use two computers, one at home and one at the office, when modifying the snippets on one of the computers on the other computer they are not updated.
This is a mistake or I am doing something wrong.
Thanks.

Escaping $-sign not working when resolving syntax

With snippets defined in VSCode settings it is possible to escape $-sings which shall not work as snippet parameters by double backslash (\).
This should also work with this extension when resolving syntax is activated for a snippet.

folder bug

Hello!
Not sure if this is still maintained, but if so, I'd like to report a bug in the folder structure of the snippet plugin. I'm using Snippets v3.0.0, and I'm using it in VSC for Windows (see VSC details below). When making a snippet, either from the copybuffer or by selecting some code, the snippet is created and shows up in the list, but only if it is created in an already existing folder. If I make a new folder, I can creat a snippet inside that folder but it will not show in the overview list. If I move a snippet to that folder, it is not shown nin the list. By expoerting all snippets and checking that file, I can see the snippet I made exists inside that new folder, it just doen't show up in the overview in VSC. Hope you can fix this soon!

Hans.

VSC:
Version: 1.77.3 (user setup)
Commit: 704ed70d4fd1c6bd6342c436f1ede30d1cff4710
Date: 2023-04-12T09:16:02.548Z
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Windows_NT x64 10.0.19045
Sandboxed: No

Feature Request: Drag & Drop

I love the snippets extension. It's very useful for me. Please allow us to drag and drop snippets in the side bar so that I can easily move them around and drop them in folders.

Snippet organization.

Hi, how are you.
You could add organization methods for the Snippets.
Sort snippets alphabetically by folder or all.
Move between folders.
Move Snippets manually with the pointer.
Collapse all and expand all.

Thanks.

Feature to drag snippets to reorder them

I have just started using Snippets and loving it,

I think it will be nice to drag snippets to reorder them.

create file : id>999 or used ,children error

create file : id>999 or used ,children error

Duplicate the current line where the curser is active

Duplicate the current line where the curser is active. How to do it.

allow setting one or more caret positions

I'd like to be able to set the cursor position after inserting a snippet, for ex.

I'd like the cursor to be put between the curly brackets:

ServerEvents.recipes(event =>{
  <here>
})

Support drag and drop snippet into vscode editor?

How to change the storage path?

I really like this extension because it's so simple to work with. The only thing that I wish for is to change the folder where the snippets are stored so I may sync them via dropbox or one drive.
Is it allready possible?

Can I publish a set of snippets to VS Code

I'd like to create a set of snippets of code for .astro files but publishing them would be a pain. Can you please allow me to publish them to vs code. Thanks.

Information lost

I lost all my snippets today when the plugin was updated.
It is possible to recover my old version plugin snippets? and When?
Thanks in advance.

Snippet cannot be deleted

I try to delete a snippet by right-clicking and "Delete Snippet" -> nothing happens.

Potential bug while moving items using drag and drop

Hi, thanks for this extension, the drag and drop feature is a win.

I have 10 folders containing aprox 100 snippets. I can keep adding snippets to existing folders but I can't add new snippets to folder 11. Every time I try, the folder remains empty.

[Feature request] Scope snippets per file extension

Or is this a thing already? The docs doesn't seem to mention it

escape $

I have not found any way to escape the following line of code
this.$portal.$on('documentTouchClick', this.outsideClickFn)

the vscode escape codes don't work
https://code.visualstudio.com/docs/editor/userdefinedsnippets#_how-do-i-have-a-snippet-place-a-variable-in-the-pasted-script

Same snippet different content

Problem

Making different snippet names for different languages instead of it automatically checking the file type. If I want the same snippet name but with different content according to the file type it would just give me the same content

Example

If I use 3 languages I would have to setup something like this for me to log the items: >log-js >log-php >log-ts

Solution

While making the snippet user should be prompted with an input that lets him choose a language for the snippet. and while you are trying to use the snippet it should automatically check the file type and suggest snippets that match with the language.

Lost all snippets when upgraded to 2.0 version

With upgrade to 2.0 version I lost all my previous snippets...

Add support for cut/paste items in treeView.

As the TreeView API does not provide built-in implementation for reordering items. Snippets can add some custom implementation in order to move item from one folder to another (e.g right click on item, click cut, right click on another folder, click paste).

When using a snipped with $ in it, it will be omitted

For example create a snippet of this:
watch: {
$route(to) {
this.trackPage(to.fullPath);
}
},
When using this snipped the $ will be omitted.

Snippets not saved permanently and not synchronized when using vsc in multiple windows!

To reproduce this bug:

1. Close all vsc windows.
2. Open vsc in a new window.
3. Open a second vsc window. Now you should have two vsc windows open.
4. Create a snippet in one of the windows.
5. Switch to the other vsc window and click the refresh snippets button.
6. No snippets show up. It is impossible to see or access the snippet created in the other vsc window.
7. Create a snippet in the current vsc window. You should have one snippet in each of the vsc windows now.
8. Close all vsc windows.
9. Open a new vsc window.
10. Only one of the two snippets has been saved and can be accessed. The other snippet is lost.

Provide snippets as completionItems

Provide snippets as completionItems (to be shown next to the built-in snippets using ctrl+space).

• When initializing the application, we can successfully populate VSCode with snippets prefixed with snp:snippet-label
• Problem starts to show up when we update existing snippets as the code bellow do not override existing ones but duplicate them:

// see https://code.visualstudio.com/api/references/vscode-api#DocumentSelector
this.context.subscriptions.push(vscode.languages.registerCompletionItemProvider(
    '*', {
    provideCompletionItems() {
        return [
            {
                // see https://code.visualstudio.com/api/references/vscode-api#DocumentFilter
                label: `snp:${element.label.replace('\n', '').replace(' ', '-')}`,
                insertText: new vscode.SnippetString(element.value),
                detail: element.label,
                kind: vscode.CompletionItemKind.Snippet,
            },
        ];
    },
},
    // '' trigger character
));

// list completionItems
const list: any = await vscode.commands.executeCommand('vscode.executeCompletionItemProvider',
    vscode.window.activeTextEditor?.document.uri,
    new vscode.Position(0, 0));
console.log(list.items);

Edit Snippet should provide a VS Code Editor (or at least allow Usage of "tab")

Hey! Great work on this extensions! I really like that the extension recognizes the VS Code snippet syntax!

I was editing some snippet over the GUI you provided (right-click + "Edit Snippet") and wanted to create an indentation in a for loop. Unfortunately, pressing of "tab" selects the "Save" Button.

From the viewpoint of my use case, it would be great if the Snippet Content Text Box would be a potent editor with language recognition or at least allow the usage of "tab".

‌‌Two prompts have been found

When I set up the snippet, I found that there were two same options in the prompt.

In the figure above, I set btn, txt, ui, vc, and they all have become two options.

Snippets appear twice on suggestions

Hello.

When I toggle my snippet suggestions Ctrl + Space, all the snippets appear twice. In this example, the first two are manage by this extension.

Enhancements 🎨

I really love the plugin, But here are some suggestions for you.
I think these are necessary for this plugin and surely improve the overall experience.

• ✅ Please add ICON support for folders 📂.
• ✅ Add Icon support for files, Ability to add extensions for files.
• ✅ Syntax Highlighting for code snippets.

"Are you sure?" alert on "Delete Snippet"

It looks like we are currently not prompting user if they really want to delete a snippet.

It will be nice to ask user again instead of deleting it immediately.

Search for snippet

Is there (or planned) a feature that allows you to search for snippets across all folders, or within a specific folder? Maybe, and that'd be just perfect, via description text but also via tags (which would be another sweet feature)

Feature request: Snippets' compatibility with native VS snippets

Does this extension's json format support the "description" field?
VSCode's native snippet json format supports a "description" field - "an optional description of the snippet displayed by IntelliSense".
It manifests as grey descriptive text beside each snippet name in the dropdown box for suggested snippets. Example image below.

Is this "Snippets" extension able to make use of the same IntelliSense capability?

Alternatively/Additionally, a way to import/export between the native VSCode snippet format and this extension's format would make it smoother for people with existing snippets to use this extension and continue developing them. I suppose #42 comes from a similar line of thinking.

$符号插入到代码中 无法显示 被吃掉了 必须写 $$才能在前端输出一个$

如题 ↑ 我自定义函数 比如 $var = xxx 在snippets中保存后 点击 编辑器中只显示 var 前面那个 $ 符号缺失 不知 $ 是否是snippet的关键字还是怎么 ， 目前我只能在snippets中定义成 $$var=xxx 才能输出想要的结果；另， 如果定义中 有关键字 $! 则显示正常

Folders: more than 3?

Hi,

First thing first, thank you for your extension : it is very convenient!!

Would like to know if there is a limitation with folders. I mean it is like we can create only 3 folders in a folder.
Is there a way to increase the amount of folders in a folder?

Max

Backup or export snippets

How can I back up or export snippets (what folder are they located in)...by the way fantastic extensions, I love it!

Import and export snippets

Please give an option that allows you to import and export the created snippets.
Thanks.

Organize snippets

Hello how are you.
You could improve the way you organize snippets and folders.
How to move snippets between folders.
Move folders on any branch.
If you can drag folders and snippets with the pointer, so much the better.
Thanks.

Manual backup

Hi how are you.
I have the latest version of snippets installed, but now I can't get the backup file. Currently I work on two computers, but I do not have internet, I would like to be able to back up my snippets manually so that I can use it on both computers. How finger to do it.
Thanks.

[Feature request] Scope snippets based on file extension

Make snippets categorize to only be exposed on a per file extension basis to prevent snippets created for lets say Python to show up in the ctrl+space menu when working in a .cpp file.

Or is this a thing already? The docs doesn't seem to mention it

Language scope for snippets

First, thanks for the great extension! Just one feature that I really miss: Language scope for snippets.

Right now, all snippets work "globally" (with any coding language / file extension). But I don't want Javascript snippets to be suggested when I'm writing CSS... Or Python snippets to be suggested when I'm writing C#... Etc...

So it would be great to be able to define language scope for each snippet. Default scope could be the same file extension that is currently opened in VS Code.

(This is likely not a problem for those who prefer to pick snippets with mouse (there can be separate snippet folders for different programming languages), but I prefer to select snippet by using keyboard (by writing ">" + snippet name).)

command 'snippetsCmd.addSnippet' not found

snippets path is not a valid JSON file, will revert back to...
command 'snippetsCmd.addSnippet' not found

Request for sorting of snippet

I liked the extension. Thank you very much.
I also would like to request a sorting of snippet function. this would make it easier to locate the snippet.

[Feature Request] Add possibility to preview the snippet with syntax highlighting

Great extension so far! Wonder why VS Code doesn't have this built in. As I was using the extension I observed the need to view the snippet before I paste it inside the editor. It would be cool if we had like an eye icon next to the snippet name in the sidebar which would allow us to preview the snippet on the fly.

This could come handy in cases where we sometimes don't want to copy the snippet, but just want to check it out as a form of example code.

Clicking "Request to Initialize File" does nothing

Setting up the plugin for the first time and I want to write/sync from a Githut gist, so I can share with my team.

I added snippets.useWorkspaceFolder: true to my settings.json, which caused the Workspace Snippets setting to show up. However, clicking "Request to Initialize File" does not do anything in VS Code.

Add organization ability

I'd like to see the ability to drag-n-drop snippets into pre-existing folders I've created to clean that area up. (I have a LOT of snippets.)
If I create a snippet and then create a folder, I can't drag that snippet into that folder to organize the panel better. When I highlight a snippet in the panel, the only option is to move them up and down using the arrows one position at a time. You can't just drag it into the folder. (See image.)

Edit Snippet - Move to Folder

It'd be great to be able to move existing snippets to newly created or existing folders

Unable to view, add, or import snippets or folders

In the side bar I just see the add and import buttons, no snippets or folders.

Upon doing virtually anything related to the extension, I get the following error in the Extension Host output:

2023-04-26 11:55:12.048 [error] TypeError: Cannot read properties of undefined (reading 'length') at Function.flatten (c:\Users\jreed\.vscode\extensions\tahabasri.snippets-3.0.0\dist\extension.js:2:28444) at s.getAllSnippets (c:\Users\jreed\.vscode\extensions\tahabasri.snippets-3.0.0\dist\extension.js:2:28913) at Object.provideCompletionItems (c:\Users\jreed\.vscode\extensions\tahabasri.snippets-3.0.0\dist\extension.js:2:18399) at _.provideCompletionItems (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:51686) at c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:71536 at ce.s (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:63614) at ce.$provideCompletionItems (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:100:71523) at c.N (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:108:11655) at c.M (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:108:11373) at c.H (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:108:10415) at c.G (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:108:9432) at c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:108:8220 at E.invoke (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145) at h.deliver (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2121) at n.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1729) at p.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14916) at c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:124:16654 at E.invoke (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:145) at h.deliver (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2121) at n.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1729) at p.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:72:14916) at MessagePortMain.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:124:14780) at MessagePortMain.emit (node:events:526:28) at MessagePortMain.emit (node:domain:475:12) at Object.MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:5:364)

The following is the output I get from an export and the *_pre-import-bak.json from attempting an import:

{"id":1,"parentId":-1,"label":"snippets"}

Additionally, I get the following message when I try to import:

Snippets weren't imported. Please check the file content or redo a proper export/import (A copy of your old snippets was saved next to the recently imported file)

As far as I can recall, I don't think the extension has ever worked for me.

I have settings sync turned enabled.

VSCode About:

Version: 1.77.3 (system setup)
Commit: 704ed70d4fd1c6bd6342c436f1ede30d1cff4710
Date: 2023-04-12T09:16:02.548Z (2 wks ago)
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Windows_NT x64 10.0.19045
Sandboxed: No

Please let me know if you need any more info, I'd really like to use this extension, thanks.

"snippets.snippetsLocation" URI warning

I'm on linux and I have set "snippets.snippetsLocation" value as:

"~/.config/Code/User/globalStorage/tahabasri.snippets/data.json"

I recive this warning in settings.json:

"String is not a URI: URI with a scheme is expected."

Drag to organize import

Hi,
Your Snippets extension is one of my new favorites! Thank you for creating it. It will help my productivity by a mile.
I did, however, need help organizing my snippets after creating them. I had a bunch of snippets I copied over from my user snippets, and they needed to be more organized initially. I thought I could port them over, then sort them later. Unfortunately, that was not the case. I had to spend a lot of time recopying those snippets and pasting them from the clipboard into a folder. Please take a look at the video below. This was very time-consuming. I would love to see a drag-to-organize feature in an upcoming update.

Screen.Recording.2023-01-14.at.9.22.07.AM.mov

Separate setting for disabling magic key and intellisense

Consider the following common action when editing HTML

• Type <p>
• Press Enter to put content of the <p> element on its own line

Currently if I do this, typing the > key gives a list of suggested snippets, and the Enter key will insert the contents of the first snippet in the list.

I can fix this by changing the setting to disable the magic key, but that is also tied to whether or not snippets are suggested by Intellisense. I would love to be able to enable/disable these two things separately. Another option would be to add a setting that allows me to change the magic key from > to something else. I don't think there is such a setting.