Giter Club home page Giter Club logo

snippets's Introduction

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating GitHub Repo stars GitHub Workflow Status (with event) The MIT License

Snippets — Supercharge Snippets in VS Code

Code snippets are valuable additions for anyone looking to save time during development. They simplify the process of entering repetitive code, such as loops, complex HTML structures or reusable methods.

Visual Studio Code already provides robust support for snippets, including their appearance in IntelliSense, tab-completion, and a dedicated snippet picker (Insert Snippet in the Command Palette). This extension takes snippets to another level by introducing new features that enhance code snippet management.

Getting Started

Install Snippets by one of the following options:

  • clicking Install on the banner above
  • searching for Snippets from the Extensions side bar in VS Code
  • typing ext install tahabasri.snippets from the Command Palette in VS Code

Features | FAQ | Known Issues | Release Notes | Feedback | Credits

Features

Boost your productivity with a set of powerful features that enhance snippet management:

  • Create — Create Snippets easily with few clicks.
  • Open — Open Snippets quickly from anywhere in VS Code.
  • Search — Find your Snippet in 2 seconds, or less...
  • Manage — Organize your snippets freely, with no forced order, beyond editing and deleting.
  • Customize — Personalize your Snippets to match your style.
  • Sync — Various options for synchronizing your snippets across multiple devices and users.
  • Boost — Supercharge your snippets to make them more developer-friendly.

Create

Create Snippet from open editor

Create Snippet

Create Snippet directly from the clipboard

Create Snippet from Clipboard

Create Snippet manually

Create Snippet Manually

Open

Open Snippet with a single click

Open Snippet

Drop Snippet directly into the editor

You may need to hold Shift key while dragging to correctly drop the item in the editor.

Open Snippet

Copy Snippet to Clipboard

Copy Snippet to Clipboard

Insert Snippet directly into Terminal

Open Snippet in Terminal

Search

Use IntelliSense to quickly access all your Snippets

You can set a special key to trigger IntelliSense from the extension settings. Default key is >. More about IntelliSense here.

Open Snippet using Suggestions

Search for Snippets using Command Palette

Open Snippets from Command Palette

You can also search directly into the Snippets view similarly to the File Explorer.

Native Search

Preview Snippets before insertion

Preview Snippets

Manage

Drag and drop Snippets from one folder to another

Drag and Drop Snippets

Reorder Snippets using Up and Down actions

Reorder Snippets

Sort alphabetically a Snippets folder or all your Snippets

Reorder Snippets

Customize

Set icons for your folders

Set Folder Icon

Add a description to your Snippet

Descriptions show when hovering on top of a Snippet and in IntelliSense.

Set Snippet Description

Add a prefix to your Snippet

When displaying Snippets using IntelliSense, custom prefix will be used instead of the original Snippet label. A prefix is a recommended shortcut for Snippets with long labels.

Set Snippet Prefix

Prefix all your Snippets

You can set a prefix for all your snippets to distinguish them from other VS Code snippets.

  • set a keyword for the setting Snippets: Global Prefix e.g snipp
  • suggestions coming from your custom Snippets will be prefixed in IntelliSense

An explicit prefix in a single Snippet will override Global Prefix settings.

For example, if the global prefix in your settings is set to foo, and a custom snippet is explicitly prefixed with boo, the latter will be displayed in IntelliSense as boo. All other snippets with no explicit prefix will be displayed as foo.

Global Prefix

Sync

Import and Export Snippets using JSON files

Import and Export Snippets

Sync Snippets between multiple devices

⚠ Experimental feature: feel free to file a bug as this is still an experimental change.

Starting with version 2.0 and up, Snippets supports backup using VS Code Settings Sync feature. Your snippets will be saved alongside your VS Code data no matter your operating system.

Check the docs to know more about Settings Sync feature and how to use it.

Sync your Snippets with a Version Control System

A large number of users utilize a VCS (e.g Git) and may need to associate a set of snippets with a specific project (e.g sharing project-specific snippets with team members). This can be achieved by enabling the snippets.useWorkspaceFolder setting. Once this option is enabled, the extension will read/write snippets to/from the .vscode/snippets.json file if it's available (the extension will prompt you to create the file the first time you enable this option).

Note: Workspace snippets are excluded from synchronization via Settings Sync. You will be responsible for backing up the .vscode/snippets.json file using your favorite VSC.

Boost

Bind Snippets to Programming Languages

Snippets created from a language specific editor/file will keep reference of the programming language used. The same Snippet will be suggested only in editors/files of same programming language.

A Snippet bound to a programming language will get an icon for that particular language natively.

Bind Snippets to Languages

You can explicitly set a programming language by appending the language file extension to the Snippet name at the creation prompt.

Manually Bind Snippets to Languages

Resolve Snippet Syntax

Learn more about the Snippet syntax here.

Option to Resolve Snippet Syntax is disabled by default for new Snippets, you may need to edit the Snippet to enable it.

Open Snippet with Variables

Enjoy!

FAQ

Q: Is there a limit on the number of snippets/folders I can create?

A: There is no limit; your disk space is the only limitation.

Q: I'm feeling overwhelmed by multiple snippets. How can I better organize them?

A: Check this section for available organizational features

Q: Clicking "Request to Initialize File" does nothing. What should I do?

A: If you're attempting to initialize the snippets file for a new workspace and nothing happens, ensure that the path to your current folder open in VS Code has the correct file permissions.

Known Issues

Troubleshoot Snippets

  • The new "Troubleshoot Snippets" option helps fix common issues, including:
    • Old snippets not appearing.
    • Moving snippets not working.
    • New snippets disappearing.

These issues often arise when two conflicting features, moving snippets and syncing them simultaneously, are in use. Fortunately, no snippets should be permanently lost. They are all stored locally, but inconsistencies in the database can make the snippets temporarily invisible.

Fix Snippets

Files Permissions on Windows

You may encounter some inconsistencies when dealing with snippets on Windows. The first thing to check is whether all related VS Code files are accessible and if any folder permissions are affecting accessibility.

Release Notes

Check the CHANGELOG for full release notes.

Feedback

Credits

snippets's People

Contributors

dependabot[bot] avatar lucagabi avatar olivierverwoerd avatar tahabasri avatar tianxiang24 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

snippets's Issues

‌‌Two prompts have been found

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

image

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

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.

allow setting one or more caret positions

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

snippets_missing_caret

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

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

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

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.

image

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.

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.

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

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

image

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.

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

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.

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.

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

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

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.

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.

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.

[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

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

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?

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.

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)

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.

image

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

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.

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.

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.

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

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

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.

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.

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!

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.