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 snippetscommand again.
Happy coding!!!
You can configure
"vscode-snippet-generator.prefix": ""insettings.jsonto change the prefix.You can configuae
"vscode-snippet-generator.languages": ["html", "typescript"]insettings.jsonto 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 releasevscode-snippet-generator --helpMarkdown file symbol of a specify snippet, like this:
---
prefix: button
description: 按钮
scope: typescript,html
---
```html
<button${1: type="${2|text,tel|}"}>
$0
<button>```prefixdefines how this snippet is selected from IntelliSense and tab completion. In this casebutton.descriptionis the description used in the IntelliSense drop down.scopeRestrict template scope, if not specified, it means no restriction. In this casetypescriptandhtmldocument.- 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.jsonIf 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)