Snippets 效率神器，我们总会遇到一些重复性的代码，如果我可以像快捷键一样输入一个命令就可以调出这些代码，那么 Snippets 就是为此而生的。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

"template solt": {
  "prefix": "teso",
  "body": ["<template slot-scope=\"scoped\"","  $1","</template>"],
  "description": "template 插槽"
},
"ElementUI ErrorMessageBox": {
  "prefix": "errormessagebox",
  "body": ["this.\\$message.error($1)"],
  "description": "ElementUI 的 MessageBox 错误消息提示"
},
"flex": {
  "prefix": "disflex",
  "body": ["display: flex;"],
  "description": "flex 布局"
}

代码片语法定义

1
$: ||$

官网给出了 snippet 的 EBNF 范式的正则文法，注意，作普通字符使用时，$、}、\ 可使用 \（反斜杠）转义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*