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');"
变量占位描述,格式${num:desc},例如：

"${1:label}, ${2:another};"
缩进，\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，是上面变量和变量转换的综合应用，实现了下面功能

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

源码获取步骤：

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

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

核心的变量如下：

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

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

王若风的技术博客

VSCode Snippets 使用手册

VSCode Snippets 使用手册

前言

如何添加

方法一：通过控制台

方法二：通过首选项

使用测试

常用语法

变量

变量转换

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

引用

VSCode Snippets 使用手册

前言

如何添加

方法一：通过控制台

方法二：通过首选项

使用测试

常用语法

变量

变量转换

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

引用

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