VSCode Snippet 小试牛刀
这几天因为一个需求,要不断重复一个用特定代码段去包围不同代码的需求。
这个要不断移动鼠标以及重复敲打相同代码的体力活,实在让我老眼昏花,体内的懒人之力迫使我想一个快捷的方法来代替之。
之前就知道Snippet能够自定义代码段,借此机会正好研究了下,接下来我会简单介绍一个自定义Snippet的例子。
1. 打开VSCode, 按ctrl+shift+p 打开command palette, 输入Snippet,如下
2.选择Configure User Snippets,接着会让你选择创建的Snippet应用于哪种语言,在这里我选择的是JavaScript
3. 选择完语言类型之后,就会生出一个相对应的Json文件
字段名以及含义:
1. ‘Print to console': 是这个Snippet的名字,随便你取张三李四
2. ’prefix': 是呼出这个Snippet的简称
3. ‘body': 是自定义的代码段主体
4. ’description': 顾名思义,在选择Snippet的时候,对Snippet的解释也会浮现于下方
这里重点要看body,body部分便是你所定义的代码段的输出,下图是自己写的一个例子
可以看到body部分定义了两行内容,这里的一行内容就是定义了实际的一行代码。
body部分可以定义光标位置,可以添加占位符,以及加入变量,上图中的TM_SELECTED_TEXT的意思就是选中的内容,当我们选中一段文字后,在添加这个定义好的代码段,
选中的内容就会替代这个变量从而达到我一开始的目的,相同的代码去包含不同的内容。(这里不再详细解释body相关的语法,有兴趣的可以查阅相关文档)
有一个注意的点就是,如果我们是通过选中文字的方式来添加Snippet,那么常规操作就是通过ctrl+shift+p 选择insert snippet,再接着选择Snippet,发现这样也并不方便。
之后想了下,是否可以通过把Snippet绑定到自定义快捷键上,这样就又能提高效率,查阅相关文档之后发现,确实可行。
ctrl+shift+p 呼出command palette,输入preference open keyboard shortcuts file,这样就打开了快捷键定义文件。
key 表示自定义的相关快捷键组合,如何定义可以查阅相关文档,还是很简单的
command 表示快捷键按下后的命令语句
when 表示什么时候下快捷键组合会调用该命令语句
args 这边填入的是Snippet参数,langId 代表语言类型,即我在一个html文件中嵌套的js也能出发该快捷键功能,name是你之前自定义的Snippet名称。
好,一切就绪,我们尝试一下,选中内容,ctrl+2
Yeah, 确实可行
这次就演示了一个简单的demo,有兴趣的可以看一下下方文档,研究一下。
嗯~ 微软大法好
相关文档:https://code.visualstudio.com/docs/editor/userdefinedsnippets
VSCode Snippet 小试牛刀的更多相关文章
- 【VsCode】常用的快捷键
查找和替换: 查找:Ctrl +F 查找和替换:Ctrl +H编辑器和窗口管理相关快捷键: 文件之间切换:Ctrl+Tab 关闭当前窗口:Ctrl+W /Ctrl +F4 切出一个新的编辑器窗口(最多 ...
- Ng-Matero:基于 Angular Material 搭建的中后台管理框架
前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- VScode之JavaScript Snippet Pack
一个片段包 使用例如: cl 回车或者tab键,就可以完整的打出console.log("") 还有很多快捷功能: 参考: https://marketplace.visualst ...
- Visual Studio Code 添加设置代码段(snippet)
从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...
- VSCode好用的Python插件及配置
MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a) Linting (Prospector, Pylint, ...
- vscode restclient 插件
使用步骤: 1.vscode 安装restclient 扩展 2.创建 .http 或 .rest 文件 ,编写相应内容 同一个文件内 可以通过 ### 分割多个请求 可以通过 @hostname ...
- 团队协作统一vue代码风格,vscode做vue项目时的一些配置
1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...
- vscode 插件推荐 - 献给所有前端工程师(更新与2018.8.1)
VScode现在已经越来越完善.性能远超Atom和webstorm,你有什么理由不用它?在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用. 走马观 ...
随机推荐
- 【转】Asp.NetMve移除HTTP Header中服務器信息Server、X-AspNet-Version、X-AspNetMvc-Version、X-Powered-By:ASP.NET
默認情況下Chrome中截獲的HTTP Header信息: Cache-Control: Content-Encoding:gzip Content-Length: Content-Type:text ...
- Android JNI 学习(三):JNI 数据类型和数据结构
本文我们来讨论一下JNI如何将Java类型映射到本机C类型. 一.基本数据类型 如下图表整理了Java基本类型和native对应的关系: Java类型 Native类型 描述 boolean jboo ...
- 使用Java类加载SpringBoot、SpringCloud配置文件
我们都知道平常在使用SpringBoot和SpringCloud的时候,如果需要加载一两个配置文件的话我们通常使用@Value("${属性名称}")注解去加载.但是如果配置文件属性 ...
- Kali学习笔记38:文件上传漏洞
早些年,提到Web渗透,或者搜索一些黑客教程 基本都会看到文件上传漏洞. 它是一个很经典的漏洞 但它本质其实不是一个漏洞,而是网站本身的上传文件功能 不过如果我们上传了Webshell,那么就成为了文 ...
- 单元测试mock当前时间
在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的.如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类 namespace Common.Helper { ...
- Python编程Day4——if判断、while循环、for循环
一.if判断 语法一: if条件: 代码块1 代码块2 代码块3 示例: sex='female' age=18 is_beautiful=True if sex =='female'and age& ...
- mysql 开发进阶篇系列 51 权限与安全(权限表user,db详细介绍 )
一.概述 mysql 的权限系统主要用来对连接到数据库的用户进行权限验证,以此来判断此用户是否属于合法用户,以及合法用户给予的相应数据库权限.下面将介绍权限系统的工作原理,以及将要熟练掌握账号的管理和 ...
- mysql 开发进阶篇系列 21 磁盘I/O问题(RAID)
一.概述 作为应用系统的持久化层,不管数据库采取了什么样的Cache机制,数据库最终总是要将数据储存到可以长久保存的I/O设备磁盘上.但磁盘的存取速度显然要比cpu,ram的速度慢很多.因此,对于比较 ...
- 聊聊JVM(二)说说GC的一些常见概念
转自CSDN 上一篇总结GC的基础算法,各种GC收集器的基本原理,还是比较粗粒度的概念.这篇会整理一些GC的常见概念,理解了这些概念,相信对GC有更加深入的理解 1. 什么时候会触发Minor GC? ...
- Python快速学习02:基本数据类型 & 序列
前言 系列文章:[传送门] 也就每点一点点的开始咯,“还有两年时间,两年可以学很多东西的” Python ['paɪθən] n. 巨蛇,大蟒 基本数据类型 变量不需要声明 a=10 # int 整 ...