A library is used to compose your snippets.
See this article for details.
npm i snippet-composer -g
or
npm i snippet-composer -D
In vscode or any other editor, snippets are not related to snippets, they are relatively isolated, which makes it difficult to write more complex snippets that are closer to the real business. To solve this problem, I designed and implemented this library for composing snippets.
Before, we can't compose snippets.
When we use this library, we can compose any snippets if we want.😊
✨This library has the following features.
- Compose multiple code snippets
- Renumber tabstops
- Custom variable
-
Body recompose
The syntax of body recompose is
${SnippetName[BodyIndex]}
,support for slice syntax.
// snippet.json
{
foo: {
prefix: ['foo'],
body: [
'line0',
'line1',
'line2',
],
},
}
// body replace result
'${foo[0]}' -> 'line0'
'${foo[0,1]}' -> 'line0\tline1'
'${foo[1,]}' -> 'line1\tline2'
-
Renumber tabstops
The syntax of renumber tabstops is
${TheNewNumber:[SnippetName$BodyIndex]}
, it depends on the fieldextra.tabstops
.
// snippet.json
{
foo: {
prefix: ['foo'],
body: [
'foo code $1',
'foo code $2',
],
},
bar: {
prefix: ['bar'],
body: [
'bar code $1',
'bar code $2',
],
}
}
// tabstops demo
{
....
body:['${foo[0]}','${foo[1]}','${bar[0]}','${bar[1]}'],
extra: {
tabstops:{
2:['foo$2','bar$1'],
3:['bar$2'],
}
}
}
// Compose bodies, and then the new bodies are as follows after replacing tabstops.
body: [
'foo code $1',
'foo code $2',
- 'bar code $1',
+ 'bar code $2',
- 'bar code $2',
+ 'bar code $3'
]
-
Custom variable
The syntax of custom variable is
$CustomVarName
, it depends on the fieldextra.customVar
.
/************* snippet.json *************/
{
mysql: {
prefix: ['ms'],
body: [
'import mysql from mysql',
'mysql.connect($USER_NAME,$USER_PASSWORD,$1);',
],
},
}
// customVar demo
{
.....
extra: {
customVar: {
USER_NAME: 'admin',
USER_PASSWORD: () => '123',
},
}
}
'mysql.connect($USER_NAME,$USER_PASSWORD,$1);' -> 'mysql.connect(admin,123,$1);'
A simple demo
/************* snippet1.json *************/
{
mysql: {
prefix: ['ms'],
body: [
'import mysql from mysql',
'mysql.connect($USER_NAME,$USER_PASSWORD,$1);',
],
},
assert: {
prefix: ['as'],
body: [
'import assert from assert',
'assert(a,1);\rassert(b,$1);\rassert(c,$2);',
'$0',
],
},
}
/************* snippet2.json *************/
{
utils: {
prefix: ['utils'],
body: [
'function delay() {\r\tsleep($1);\r}',
'function getPort() {\r\treturn ${2};\r}',
],
},
}
/************* index.js *************/
import snippet1 from "./snippet1.json";
import snippet2 from "./snippet2.json";
const newSnippet = defineSnippet(
// Parameter 1 is the extended snippet, which is responsible for composing the snippet.
{
'Test Case': {
prefix: ['tc'],
description: 'Test Case',
scope: 'javascript',
// recompose snippet1 and snippet2
body: [
'${mysql[0]}',
'${assert[0]}',
'${mysql[1]}\r${assert[1,3]}',
'${utils[0,]}',
],
// extra field
extra: {
tabstops: {
1: ['mysql$1', 'utils$2'],
2: ['assert$1'],
3: ['assert$2'],
4: ['utils$1'],
},
customVar: {
USER_NAME: 'admin',
USER_PASSWORD: () => '123',
},
},
},
},
// Parameter 2, pass in an array of snippets to be composed.
[snippet1, snippet2],
);
// Expect result of new snippet
expect(newSnippet).toEqual({
'Test Case': {
prefix: ['tc'],
description: 'Test Case',
body: [
'import mysql from mysql',
'import assert from assert',
'mysql.connect(admin,123,$1);\rassert(a,1);\rassert(b,$2);\rassert(c,$3);\r$0',
'function delay() {\r\tsleep($4);\r}\rfunction getPort() {\r\treturn ${1};\r}',
],
},
});