VSCode Snippets 使用手册

前言

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

如何添加

方法一：通过控制台

打开 VSCode,按下快捷键组合 shift+command+p 呼出控制台
在控制台输入： Configure User Snippets 选择
输入 new ，找到新建代码片段命令，这里可以选择创建全局的或者为某个项目专属的代码片段,这里我们选择 New Global Snippets file... 。
给片段起一个易于理解的命名，回车
编辑代码片段的内容

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

效果图

方法二：通过首选项

Code -> Preferences->User Snippets

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

使用测试

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

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

常用语法

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

"console.log('$1');" 2. 变量占位描述,格式 ${num:desc} ,例如：

"${1:label}, ${2:another};" 3. 缩进， \t ,注意缩进的对称性

变量

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

示例：

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

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

变量转换

语法说明：

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](https://github.com/GiancarloCode/built-value-snippets)

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

  ```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"
       }
   }

核心的变量如下：

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

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

王若风的技术博客

VSCode Snippets 使用手册

VSCode Snippets 使用手册

前言

如何添加

方法一：通过控制台

方法二：通过首选项

使用测试

常用语法

变量

变量转换

引用