VSCode Snippets 使用手册

前言

当我们为了减少模板代码，我们第一个很可能想到使用Code Snippets,很多IDE和文件编辑器已经给我们提供了一个预装的代码片段，当预装的代码片段不能瞒着我们的需求，我们可能会自己定制一些自己的专有代码代码片段，下面就为大家介绍如何在VSCode定制自己的代码片段以及一些小技巧。

如何添加

方法一：通过控制台

1. 打开VSCode,按下快捷键组合shift+command+p呼出控制台

2. 在控制台输入：
   configure_user_snippets.jpg

3. 输入new，找到新建代码片段命令，这里可以选择创建全局的或者为某个项目专属的代码片段,这里我们选择
   new_snippets.jpg

4. 给片段起一个易于理解的命名，回车
   new_snippet_with_name.png

5. 编辑代码片段的内容
   snippets_sample.png

例如我们创建一个自己名字的TODO, 类似这样的风格：// TODO(ruofeng): some comment

最终版本如下：

todo_snippets.png

方法二：通过首选项

1. Code -> Preferences->User Snippets

屏幕快照 2020-06-13 下午2.48.09.png

2. 后面的步骤和第一种的4，5一样，这里不再赘述

使用测试

新建一个.dart结尾的文件,这里就叫test.dart ,输入todo，出现了我们刚才定义的代码片段

todo_snippets_auto_tip.png

选择todo,出现我们刚才定义的代码片段

todo_snippets_auto_tip2.png

常用语法

1. 变量， 格式 $+num, 例如：

   "console.log('$1');"

2. 变量占位描述,格式${num:desc},例如：

   "${1:label}, ${2:another};"

3. 缩进，\t,注意缩进的对称性

demo_snippets.png

变量

为了跟进环境动态定制一些片段，我们可以使用系统提供的一些环境变量，官方介绍

snippets_variables.png

示例：

我们来定义一个Xcode版本的OC默认风格代码片段

snippets_copywright.png

新建一个test.dart文件，在里面输入copywright，选择刚才我们的添加的代码片段，效果如下

snippets_copywright_dart.png

变量转换

语法说明：

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        ::= .*

下面将实现读取文件名称截取掉文件的后缀效果： foo.text ==> foo

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

Transform Example：

Example	Output	Explanation
"${TM_FILENAME/[\\.]/_/}"	example-123_456-TEST.js	Replace the first . with _
"${TM_FILENAME/[\\.-]/_/g}"	example_123_456_TEST_js	Replace each . or - with _
"${TM_FILENAME/(.*)/${1:/upcase}/}"	EXAMPLE-123.456-TEST.JS	Change to all uppercase
"${TM_FILENAME/[^0-9^a-z]//gi}"	example123456TESTjs	Remove non-alphanumeric characters

Build value 代码片段插件bvtf 的实现

bvtf，是上面变量和变量转换的综合应用，实现了下面功能

1. 自动识别文件名称
2. 将文件名称去掉后缀，转换为大写驼峰法（pascalcase）

源码获取步骤：

1. 去github官网下载它的源码，built-value-snippets

2. 在vscode->snippets->snippets.json 找到对应的源码，如下

   {
   "Built Value Type File": {
           "prefix": "bvtf",
           "body": [
               "import 'package:built_collection/built_collection.dart';",
               "import 'package:built_value/built_value.dart';",
               "",
               "part '$TM_FILENAME_BASE.g.dart';",
               "",
               "abstract class ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/} implements Built<${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}, ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Builder> {",
               "  ${2}",
               "",
               "  ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}._();",
               "  factory ${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}([void Function(${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Builder) updates]) = _$${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/};",
               "}"
           ],
           "description": "Built Value Type File whose name corresponds to the file name"
       }
   }
   

核心的变量如下：

// file name: home_page.dart => HomePage
"${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}"

通过上面的学习我们几乎可能编写我们的日常需要各种代码片段

引用

• built-value-snippets

• Built Value Snippets VSCode 插件

• Snippets in Visual Studio Code