Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jwdeane/11ty-vscode-snippet-generator
Simple 11ty tool to generate vscode snippets from nunjucks template files
https://github.com/jwdeane/11ty-vscode-snippet-generator
11ty njk nunjucks snippet-generator snippets vscode vscode-extension vscode-snippet-generator vscode-snippets
Last synced: 21 days ago
JSON representation
Simple 11ty tool to generate vscode snippets from nunjucks template files
- Host: GitHub
- URL: https://github.com/jwdeane/11ty-vscode-snippet-generator
- Owner: jwdeane
- Created: 2022-01-16T09:46:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-26T02:34:43.000Z (almost 3 years ago)
- Last Synced: 2024-11-01T05:06:39.289Z (2 months ago)
- Topics: 11ty, njk, nunjucks, snippet-generator, snippets, vscode, vscode-extension, vscode-snippet-generator, vscode-snippets
- Language: Nunjucks
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 11ty Visual Studio Code Snippet Generator
Zero configuration tool built with [11ty](https://11ty.dev) to generate [vscode snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) from raw code blocks.
## Requirements
11ty requires [Node](https://nodejs.org/) >= 10
## Getting Started
```
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 🔥
### Folder Structure
First create a subdirectory under `./src/snippets/` named after one of the [supported vscode language _identifiers_](https://code.visualstudio.com/docs/languages/identifiers#_known-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
```
### Helpers
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.
## Frontmatter
All snippets require a `frontmatter` block with the following keys (unless listed as optional):
```
---
name:
prefix:
description: (optional)
spaceIndent: 4 (optional)
---
```
| Key | Role |
| ------------------------ | ---------------------------------------------------------------------------------------- |
| `name` | The name of the snippet. |
| `prefix` | The snippet's prefix. **Note**: `prefix` can be an array of options or a single string. |
| `description` (optional) | The snippet's description. |
| `spaceIndent` (optional) | The number of spaces to indent the snippet body. If not specified defaults to `2` spaces |
### Prefix Examples
Single `string` prefix:
```
prefix:
```
An `array` of prefixes:
```
prefix:
-
-
- etc
```
### Example Snippet
```
---
name: for-loop
prefix:
- for
- for-const
description: A for loop.
---
for (const ${2:element} of ${1:array}) {
$0
}
```
## Usage
> Default state requires zero configuration and assumes (and has only been tested with) [Nunjucks templates](https://www.11ty.dev/docs/languages/nunjucks/).
1. Run `npm run dev` to watch for changes in `./src/snippets/*`.
2. Create each code snippet(s) in `./src/snippets//.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}) {", "\t$0", "}"],
"description": "A for loop."
}
}
```
4. (optional) run `npm run build` or `npm run prettier` to prettify the generated snippets.
## Add Your Snippets to VSCode
### MacOS
Copy your language specific snippet files from `./dist/snippets/.json` to `~/Library/Application Support/Code/User/snippets/.json`
e.g.
```
cp ./dist/snippets/javascript/javascript.json ~/Library/Application\ Support/Code/User/snippets/javascript.json
```
---
## Credits
Inspired by https://snippet-generator.app/
---
> ⚠️ Note: this project hasn't been tested on Windows ⚠️