VSCode Snippets 使用指南

我们在写代码的过程中,常常会遇到一些固定的代码结构,形如输入一串console.log或者输入for的结构甚至是编写reduxreducers等等。反复写这些代码结构,不仅枯燥无聊,也会觉得效率不够高。那么有没有什么办法可以解决这个问题呢?让写代码的过程更畅快点呢?

VSCode中的自定义Snippets功能就是为了解决这类问题的。你可以预先编写好一系列代码结构,然后在使用的时候,仅仅需要输入一个关键字,VSCode的智能提示功能就会提醒让你完善代码结构的输入过程,如:

一、Snippets文件介绍

Snippets文件是一个JSON文件,但支持C语言风格的注释(即//),在Snippets中可以编写无限条规则,如下是一个示例的Snippets文件,它实现了for结构代码的快速填充:

{    "For Loop": {        "prefix": ["for", "for-const"],        "body": [            "for (const ${2:element} of ${1:array}) {",            "\t$0",            "}"        ],        "description": "A for loop"    }}

之后,在代码文件里输入for时,VSCode就会帮我们创建如下的结构代码:

for (const element of array) {    }

并且,光标最开始在array位置,按下Tab键之后跳到element位置,再按下Tab键之后跳到语句主体的位置

二、编写规则

规则的语法结构如果用TypeScript描述的话,大概是这样子的:

interface SnippetRule {    prefix: string[];    body: string[];    scope?: string;    description?: string;}interface SnippetRules {    [ruleName: string]: SnippetRule;}

解释如下:

  • 规则名称: ruleName 是规则的名称,当 SnippetRule 中没有提供 description 时,读取 ruleName 作为 description
  • 触发关键词: prefix 定义了触发智能提示的关键词,是可以支持多个触发关键词的。触发关键词支持部分截取匹配,比如prefix中定义了for-const这个关键词,但是当用户输入fc的时候,也能够触发Snippet智能提示
  • 填充代码内容: body 定义了生成的代码内容,数组的每一项代表生成的代码的每一行,在body中可以声明占位符来定义插值,如此当代码结构生成完毕后,用户可以通过Tab键切换来替换插值内容
  • 作用范围Snippet 的作用范围可以是 编程语言 级别,也可以是 项目 级别
    • 单语言范围: 当定义单一语言作为作用范围时,Snippet 只会作用于这一语言。这种一般是通过修改偏好设置(Code > Preference > User Snippets)选择特定语言实现的,VSCode 会生成 语言.json 文件来记录规则(如 javascript.json
    • 多语言范围: 当定义针对多个语言的作用范围时,需要启用规则中的 scope 字段指定。如果希望多语言范围是全局性的,则通过修改偏好设置(Code > Preference > User Snippets),选择 New Global Snippets file 创建,VSCode 会生成 .code-snippets 后缀的文件来记录规则,如果 .code-snippets 文件规则中的 scope 没有给定,那么就作用于全部的语言
    • 项目范围: 可以只为特定项目定义 Snippets,只要在项目结构下的 .vscode 目录中创建 .code-snippets 结尾的规则文件即可。可以借由偏好设置来帮助生成规则文件(Code > Preference > User Snippets > New Snippets file for …)

三、占位符

body中可以支持一系列的占位符,从而控制光标和被插入的文本,如下是占位符支持的全部语法:

1、Tab占位符

Tab占位符的语法格式是:

'$' int

使用 Tab占位符,就能够控制光标在一段 snippet 内部移动,可以使用 $1, $2 来指定光标位置。终止符中的数值,表示光标在 Tab键 按下后光标切换的顺序,从小到大。但是 $0 有着特殊的含义,它表示的是光标最后停留的位置。一个 Tab占位符 是可以多次使用的,那么在输入的时候,就会被关联在一起同步更新

2、命名占位符

命名占位符的语法格式是:

E: '${' int ':' string E* '}'

它和 Tab占位符 的功能总体上一样,不同的是,它默认情况下会带上一串指定的字符串作为占位符。并且它是支持嵌套的,如:

${1:a ${2:b}}

这样子光标能够实现在内部切换的效果

3、可选占位符

可选占位符的语法格式是:

Choice: string (',' string)* E: '${' int '|' Choice '|}'

它能够实现指定字符串之间选择插入作为占位符的功能,如:${1|a,b,c,d|}

4、变量占位符

变量占位符的语法格式是:

'$' variableName或'${' variableName ':' defaultValue '}'

当一个 variableName 对应的值取不到的时候,如果有设置默认值(defaultValue)的话,默认值会被插入,否则就会插入空字符串。以下的这些变量都是可用的:

  • TM_SELECTED_TEXT 当前选中的文本(未选中时是空字符串)
  • TM_CURRENT_LINE 当前行的内容
  • TM_CURRENT_WORD 光标选中的单词内容(未选中时是空字符串)
  • TM_LINE_INDEX 代码所插入的行号(以0为基准索引)
  • TM_LINE_NUMBER 代码所插入的行号(以1为基准索引)
  • TM_FILENAME 当前文档的文件名
  • TM_FILENAME_BASE 当前文档的文件名(不带后缀)
  • TM_DIRECTORY 当前文档所在的目录
  • TM_FILEPATH 当前文档所在的完整目录
  • CLIPBOARD 当前剪贴板的内容
  • WORKSPACE_NAME 打开的工作区或者目录的名称

如果要插入当前的日期和时间的话:

  • CURRENT_YEAR 当前年
  • CURRENT_YEAR_SHORT 当前年(两位数形式)
  • CURRENT_MONTH 两位数形式的当前月 (如:'02')
  • CURRENT_MONTH_NAME 完整的当前月份名称 (如:'July')
  • CURRENT_MONTH_NAME_SHORT 简写的当前月份名称 (如:'Jul')
  • CURRENT_DATE 当前日期
  • CURRENT_DAY_NAME 当前天的名称 (如:'Monday')
  • CURRENT_DAY_NAME_SHORT 当前天名称的简写形式 (如:'Mon')
  • CURRENT_HOUR 当前时的24小时形式
  • CURRENT_MINUTE 当前分钟
  • CURRENT_SECOND 当前秒
  • CURRENT_SECONDS_UNIX 自Unix元年的秒数值

还可以通过如下这些变量,插入时会跟随当前语言而变:

  • BLOCK_COMMENT_START 块级注释开头(如在PHP里会输出:/*,在HTML里会输出:<!--
  • BLOCK_COMMENT_END 块级注释结尾(如在PHP里会输出:*/,在HTML里会输出:-->
  • LINE_COMMENT 行级注释(如在PHP里会输出://

5、转换

变量转换

变量转化能够让你在变量的值被插入之前,得到一个修改插入值的机会,一次变量转换是由下面这三部分组成的:
1、用来匹配变量值的正则表达式
2、格式化的字符串,用来引用从正则表达式中捕获的分组,格式化字符串可以做条件插入和简单的修改,其语法格式描述如下:

format ::= '$' int | '${' int '}'    | '${' int ':' '/upcase' | '/downcase' | '/capitalize' '}'    | '${' int ':+' if '}'    | '${' int ':?' if ':' else '}'    | '${' int ':-' else '}' | '${' int ':' else '}'

3、传递给正则表达式的选项

下面这个例子,能够插入一个值,这个值是去掉了后缀的文件名:

因此,假如当前文件名是foo.txt,则插入后的值就是foo

占位符转化

占位符转化和变量转化类似,不同的是,它读取的不是变量解析后的值,而是用户输入后的值,并且会在按下 Tab键 切换到下一个占位符之前,完成这个转化工作。如:

${1/(.*)\\..+$/$1/}

一些例子

在转化中,运用的正则表达式是字符串化的,而不是正则字面量,因此也需要像在 JS 里用字符串形式的正则表达式那样,对双斜杠进行转义。下面以 TM_FILENAME 解析为 example-123.456-TEST.js 为例子:

  • "${TM_FILENAME/[\\.]/_/}":输出:example-123_456-TEST.js
  • "${TM_FILENAME/[\\.-]/_/g}":输出:example_123_456_TEST_js
  • "${TM_FILENAME/(.*)/${1:/upcase}/}":输出:EXAMPLE-123.456-TEST.JS
  • "${TM_FILENAME/[^0-9^a-z]//gi}":输出:example123456TESTjs

四、绑定快捷键的Snippets

可以创建自定义的快捷键来插入特定的 Snippets,方法是打开 keybindings.json 文件(Preference > Keyboard Shortcuts > 左上角 Open Keyboard Shortcuts 图标),然后可以加入 snippet 作为额外的参数,如:

{  "key": "cmd+l cmd+g",  "command": "editor.action.insertSnippet",  "when": "editorTextFocus",  "args": {    "snippet": "console.log($1)$0"  }}

那么,当按下组合键时,相应的内容就会被插入进来了。而其实我们也可以不使用内联的 snippet,通过制定 语言名称snippet名称,我们就可以使用已存在的 snippet,如下:

{  "key": "cmd+l cmd+g",  "command": "editor.action.insertSnippet",  "when": "editorTextFocus",  "args": {    "langId": "javascript",    "name": "log"  }}

参考资料

(0)

相关推荐

  • 那些好用的 VS Code 插件,究竟是如何提高编码效率的?

    今天 以下文章来源于HelloGitHub ,作者点击关注→ HelloGitHub分享 GitHub 上有趣.入门级的开源项目. 作者:HelloGitHub-小夏 一.从「整体」到「局部」 在开始 ...

  • VsCode配置R(上)

    先下载 60MB https://az764295.vo.msecnd.net/stable/d2e414d9e4239a252d1ab117bd7067f125afd80a/VSCodeUserSe ...

  • 单片机学习归纳总结(三):代码编写的前期准备

    注:该文章中所讲述内容均是在VSCode编辑器中操作! 在正式编写业务代码之前,需要先搭建好整体框架,包括忽略文件.代码片段自动生成文件.安装各种插件.防止VSCode编译器报错的文件.各种今后可能会 ...

  • Go语言开发环境搭建

    一.Windows下安装 安装Go开发包 官网下载Go语言开发包,安装方法就是next,除了安装位置选择 安装目录选定一个好记的.尽量不要放在C盘中,除非你盘空间很大,完全够用.此路径需要自己记住,需 ...

  • Vscode中自动生成Verilog/VHDL模板以及代码自动联想

    为了高效开发VHDL/Verilog,使用的编辑器一般会有很多的插件便于用户的开发,比如自动生成测试文件的插件(我当初也发过相关的脚本),语法的检测,模块的联想自动补充,这些插件提供的都属于通用的功能 ...

  • 用 Python 撸一个 Web 服务器-第4章:动态渲染数据

    上一章中为了尽快让 Todo List 程序跑起来,并没有完全按照 MVC 模式编写程序.这一章就让我们一起实现一个完整的 MVC 模式 Todo List 程序首页. 使用模型操作数据 我们来分析下 ...

  • 《Python编程:从入门到实践》语法知识点总结 这一篇就够了

    <Python编程:从入门到实践>语法知识点总结 友情提醒:本文中函数方法表格初学者不必全部记下来,只需要保存图片或者收藏本文,使用时自己方便查询即可. 本文同样有关于Python语法的细 ...

  • Python 编程的最好搭档—VSCode 详细指南

    学Python的同学可能会觉得每次写Python的时候都得打开Cmd有点烦躁,直接上手Pycharm的同学可能会觉得这软件太笨重了,晦涩难用.那么有没有省去打开CMD的步骤,又能弥补Pycharm笨重 ...

  • Python编程的最好搭档:VSCode 详细指南

    刚学Python的同学可能会觉得每次写Python的时候都得打开Cmd有点烦躁,直接上手Pycharm的同学可能会觉得这软件太笨重了,晦涩难用.那么有没有省去打开CMD的步骤,又能弥补Pycharm笨 ...

  • Ⅳ期原发性肺癌中国治疗指南(2021年版)

    引用格式  中国医师协会肿瘤医师分会, 中国医疗保健国际交流促进会肿瘤内科分会. Ⅳ期原发性肺癌中国治疗指南(2021年版)[J]. 中华肿瘤杂志, 2021, 43(1):39-59. DOI:10 ...

  • 史上最全多肉植物浇水指南(赶快收藏)!

    "纯干货,多肉植物浇水的常见问题都在这里了.篇幅很长,值得看完收藏哦." 1. 如何判断多肉植物是否缺水? 多肉植物在缺水的时候会发出自己的信号,如叶片发黄.发皱,如果不及时浇水就 ...

  • 成年人也需要接种乙肝疫苗吗?这份接种指南请收好

    新生儿出生后24小时内就会接种乙肝疫苗,并分别在1个月.6个月后注射第二针和第三针.但是面对乙肝病毒,很多人会担心,注射乙肝疫苗后是否终身免疫?体检时发现没有了乙肝抗体,是否需要补充注射乙肝疫苗? 小 ...

  • 半夏厚朴汤的最全使用指南,请查收!

    江湖名,中医道,中医的江湖愿你我砥砺前行. 写在前面的话:上世纪90年代,南京中医药大学黄煌教授对卫生部和人事部认定的500名全国名老中医做了一个问卷调查,得出结论:绝大部分名老中医临床常用方不超过3 ...

  • 乡村振兴·农业特色小镇建设指南!

    农业是国民经济的基础,是稳民心.安天下的战略产业.但农业是弱势产业,具有自然风险.市场风险.政策风险等多重风险.由于农民人均占有耕地少,农产品加工流通跟不上,使得农民的收入远低于城镇居民.如何使农业强 ...

  • 收藏!审美提升超强指南:摄影网站良心推荐,28个宝藏资源全公开

    收藏!审美提升超强指南:摄影网站良心推荐,28个宝藏资源全公开

  • 指南 | 如何发布建设项目环评、验收报告信息公开公示

    以下为正文 指南--如何发布建设项目环评.验收报告信息公开公示 环评爱好者网提供环保信息公示平台,可进行环评公示.自主验收公示.全本公示.调试公示.环保措施落实情况公示,以及建设单位信息公开等信息公示 ...