Zero configuration tool built with 11ty to generate vscode snippets from raw code blocks.

11ty requires Node >= 10

git clone https://github.com/25thhour/11ty-vscode-snippet-generator
cd 11ty-vscode-snippet-generator
npm install

Run npm run dev to watch for changes and start creating your own snippet collections 🔥

First create a subdirectory under ./src/snippets/ named after one of the supported vscode language identifiers.

e.g. for javascript snippets:

./src/snippets/javascript/

Now add any number of individual snippet files ensuring they have a .njk file extension.

./src/snippets/
├── javascript
│  ├── snippet-1.njk
│  ├── snippet-2.njk
│  ├── snippet-3.njk
│  └── snippet-4.njk

This project also ships with it's own helper snippets (./src/helpers/) that are bundled to ./dist/helpers.code-snippets and copied to ./.vscode/helpers.code-snippets so that they're globally available within this project.

1. snip - expands to a standard snippet skeleton.
2. snip:spaces - expands to a standard snippet skeleton plus a frontmatter key of spaceIndent allowing you to set a custom space indent > 2.

As each snippet file must contain a few frontmatter keys to support the generation process, it's strongly advised that you start a new snippet file by typing snip and populating the snippet accordingly.

All snippets require a frontmatter block with the following keys (unless listed as optional):

---
name: <snippet-name>
prefix: <snippet-prefix>
description: <snippet-description> (optional)
spaceIndent: 4 (optional)
---

Single string prefix:

prefix: <snippet-prefix>

An array of prefixes:

prefix:
- <snippet-prefix-1>
- <snippet-prefix-2>
- etc

---
name: for-loop
prefix:
- for
- for-const
description: A for loop.
---
for (const ${2:element} of ${1:array}) {
 0ドル
}

Default state requires zero configuration and assumes (and has only been tested with) Nunjucks templates.

1. Run npm run dev to watch for changes in ./src/snippets/*.

2. Create each code snippet(s) in ./src/snippets/<language-identifier>/<snippet-name>.njk

   e.g. ./src/snippets/javascript/for-loop.njk

   ---
   name: for-loop
   prefix:
    - for
    - for-const
   description: A for loop.
   ---
   for (const ${2:element} of ${1:array}) {
    0ドル
   }
   

3. Every snippet in the ./src/snippets/javascript/* directory is bundled into a single snippet collection and output into ./dist/snippets/language-identifier>.json

   e.g. ./dist/snippets/javascript.json

   {
    "for-loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t0ドル", "}"],
    "description": "A for loop."
    }
   }
   

4. (optional) run npm run build or npm run prettier to prettify the generated snippets.

Copy your language specific snippet files from ./dist/snippets/<language>.json to ~/Library/Application Support/Code/User/snippets/<language>.json

e.g.

cp ./dist/snippets/javascript/javascript.json ~/Library/Application\ Support/Code/User/snippets/javascript.json

Inspired by https://snippet-generator.app/

⚠️ Note: this project hasn't been tested on Windows ⚠️