Generate a snippet extensions for vscode.
- Install Dynamic Custom Snippets extension.
- Add snippet files into
.vscode/snippets/
folder. (Please refer to the template content Snippet tempalte) - The first time create the
.vscode/snippets/
folder, need to restart vscode; otherwise you only need to trigger thevscode-snippet-generator: Cache all dynamic snippets
command again.
Happy coding!!!
You can configure
"vscode-snippet-generator.prefix": ""
insettings.json
to change the prefix.You can configuae
"vscode-snippet-generator.languages": ["html", "typescript"]
insettings.json
to support language list.
$ git clone --depth 1 https://github.com/cipchk/vscode-snippet-generator-tpl.git
$ cd vscode-snippet-generator-tpl
$ # build
$ npm run build
$ # package vscode extension
$ npm run release
vscode-snippet-generator --help
Markdown file symbol of a specify snippet, like this:
---
prefix: button
description: 按钮
scope: typescript,html
---
```html
<button${1: type="${2|text,tel|}"}>
$0
<button>```
prefix
defines how this snippet is selected from IntelliSense and tab completion. In this casebutton
.description
is the description used in the IntelliSense drop down.scope
Restrict template scope, if not specified, it means no restriction. In this casetypescript
andhtml
document.- markdown body is defines snippet code, muse be hava a code tag.
How to writing snippet code, pls refre to vscode-Creating your own snippets
The description
support i18n, like this:
---
prefix: button
description:
zh-CN: 按钮
en-US: Button
---
Specify language version to generate with i18n
parameter.
vscode-snippet-generator --i18n=zh-CN --outFile=snippets-zh-CN.json
vscode-snippet-generator --i18n=en-US --outFile=snippets-en-US.json
If you want to display multiple languages in a snippet extension, you can use i18nTpl
.
# window
vscode-snippet-generator --i18nTpl=\"{zh-CN}({en-US})\"
The MIT License (see the LICENSE file for the full text)