CodeSnippets.dev

Code Snippets is a way to reuse code across many projects. Think of it like Github Gists on steroids.

With the Code Snippets VSCode extension, you can create and import snippets all without leaving the code editor.

Import Snippet

CodeSnippets Demo

No more messing with the difficult to use JSON strings to create custom VS Code Snippets. You can setup snippet placeholders to fill in values every time you use the snippet.

VS Code Snippets

Installation / Setup

Install the VS Code Extension
Go to https://codesnippets.dev/token and copy your access token
Open the command palette (CRTL+SHIFT+P) and choose CodeSnippets: Login w/ Access Token
Paste your access token (you copied in Step 2).

Using Snippets

When working in VSCode, you can quickly pull in your snippets from CodeSnippets.dev.

Place your cursor where you want the code inserted
Open the command palette (CRTL+SHIFT+P) and choose CodeSnippets: Insert/Import Snippet at cursor
You will see a list of all your snippets whose language matches the languge of your current file on VS Code.
Filter and select the desired snippet.

Import Snippet

Creating Snippets

You can highlight some code and save it as a new snippet.

You need to make sure you run the "CodeSnippets: Login w/ Access Token" command first.

Highlight some code
CTRL+SHIFT+P to open the Command Pallete
Select the command,"CodeSnippets New/Create snippet from selection"
Enter the Title, Collection (like a folder), and tags for your new snippet.

Create Snippet Demo

Placeholder Syntax

You can edit your snippets to use the built in VS Code snippet placeholder syntax. This way when you import your snippet you can fill in all of the placeholders.

In this example, there is a NAME placeholder.

import React from "react";

export default function ${1:NAME}() {
    return (
        <div>${1:NAME}</div>
    );
}