目录
snippets 的功能
snippets 的范围
总结
首页 开发工具 VSCode 了解VSCode中的snippets,看看怎么提高开发效率!

了解VSCode中的snippets,看看怎么提高开发效率!

Sep 22, 2021 am 11:14 AM
vscode 提高效率

如何把vscode snippets用在项目中提高开发效率?下面本篇文章带大家了解一下vscode中的snippets,介绍一下使用它提高项目开发效率的方法,希望对大家有所帮助!

了解VSCode中的snippets,看看怎么提高开发效率!

code snippets 是代码片段的意思,是 vscode 提供的根据某字符串快速补全一段代码的功能,可以提高写代码的效率。【推荐学习:《vscode教程》】

1.gif

vscode 的 snippets 是可以随项目共享的,多人开发一个项目的时候,可以维护项目级别的 snippets 并且通过 git 共享,来提高项目开发效率。

下面我们来详细了解下 snippets。

snippets 的功能

snippets 配置的格式如下:

{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}
登录后复制
  • prefix 是触发 snippets 的前缀,可以通过数组指定多个
  • body 是填入到编辑器的内容
  • description 是 snippets 的描述

其中 body 部分可以通过 ${} 的方式指定光标位置、顺序、占位字符串、可用的值等,有 5 种语法,我们分别来看一下:

光标跳转:1 1 1 2

可以通过 11、2 指定光标位置,当填入 snippets 的内容之后,光标会设置到 1的位置来编辑,当编辑完,可以通过tab来跳到1 的位置来编辑,当编辑完,可以通过 tab 来跳到2。

比如这段配置:

{
 "测试": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "$1  xxxx",
   "yyyy $2",
  ],
  "description": "光标跳转"
 }
}
登录后复制

效果为:

2.gif

还有当有多个 11、2 等,编辑一处其他内容也会同步修改,也就是 vscode 的多光标编辑。

比如:

{
 "测试": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "$1  xxxx $1",
  ],
  "description": "多光标"
 }
}
登录后复制

效果为:

3.gif

通过这种功能可以快速编辑 snippets 中的可编辑内容。

占位符:${1: placeholder}

只是光标跳转虽然可以快速编辑内容,但是不知道编辑的部分是什么,所以 snippets 支持了设置 placeholder 的值,默认会选中该段文本,输入内容即可覆盖。

比如:

{
 "测试": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
   "${1:aaa}  xxxx",
   "yyyy ${2:bbb}",
  ],
  "description": "光标跳转"
 }
}
登录后复制

效果为:

4.gif

可选值:${1|text1,text2,text3|}

占位符的方式就像 input 标签加了个 placeholder 属性,还是要手动输入,当可编辑区域是有几个可选的值的话,就要换成下拉选择,在 snippets 里就是通过 ${1|text1,text2,text3|} 的方式支持,在 | 和 | 之间填入通过 , 分割的多个选项。

比如:

{
 "测试": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
  "${1|神说要有光,卡颂|}"
  ],
  "description": "可选值"
 }
}
登录后复制

效果为:

5.gif

变量:$变量名

在模版可编辑位置填入内容的时候,有的时候需要用到选中的值、剪贴板的值、文件名、日期等,这些信息通过 snippets 中支持的变量来取。

比如:

  • TM_FILENAME: 文件名
  • TM_CURRENT_LINE: 当前行的内容
  • CLIPBOARD: 剪贴板内容
  • WORKSPACE_NAME:workspace 的名字
  • WORKSPACE_PATH:workspace 的路径
  • CURRENT_YEAR:当前年
  • CURRENT_MONTH:当前月
  • CURRENT_DATE:当前日
  • RANDOM: 随机数
  • RANDOM_HEX: 6 位随机 16 进制数
  • UUID: 唯一 id

可以取这些变量的值来填入到光标位置,方式就是使用 TM_FILENAMETM\_FILENAME、CURRENT_YEAR 的方式。

比如:

{
 "测试": {
  "scope": "javascript,typescript",
  "prefix": "test",
  "body": [
  "当前文件: $TM_FILENAME",
  "当前日期: $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
  ],
  "description": "变量"
 }
}
登录后复制

效果为:

6.gif

变量转换:${变量名/匹配的正则/替换到的字符串/匹配模式}

支持了变量的填入还不行,因为有的变量的内容不合适,需要做一些字符串替换,所以 snippets 支持了 transform 的功能。

比如 abc-123.js 的文件,

我们通过 $TM_FILENAME 取到文件名,然后把后缀去掉转成大写填入

${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}复制代码
登录后复制

对文件名 TM_FILENAME 做正则匹配 (.*).[a-z]+,把分组一变成大写之后返回,匹配模式为忽略大小写(ignore)。

{
    "填入文件名": {
            "scope": "javascript,typescript",
            "prefix": "filename",
            "body": [
                    "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
            ],
            "description": "文件名"
    }
}
登录后复制

我们实验下效果:

7.gif

可以看到,正确的取到了文件名,并且去掉后缀转成大写填入了。

知道了 snippets 的功能,那么怎么设置 snippets 呢?snippets 在什么范围内生效呢?

snippets 的范围

command + shift + p 打开命令面板,输入 snippet,选择 configure user snippets:

8.png

可以选择创建全局的、项目范围的、语言范围的 snippets:

9.png

分别会打开不同位置的文件来添加 snippets。

语言级别的 snippets 是对于特定语言才生效,这个还可以封装成插件。在插件的 package.json 中配置下即可:

{
  "contributes": {
    "snippets": [
      {
        "language": "javascript",
        "path": "./snippets.json"
      }
    ]
  }
}
登录后复制

项目范围的 snippets 是在项目根目录的 .vscode/xxx.code-snippets 下面添加的,vscode 启动的时候会读取这些文件,然后使之在项目范围内生效。

当有一些项目级别的代码片段可以共享的时候,完全把这个文件提交到远程 git 仓库,然后项目成员都可以共享这些 snippets 设置。对于一些模版代码比较多的项目,还是比较有意义的。

总结

snippets 是 vscode 提供的用于提高开发效率的一些快速输入代码片段的功能,支持光标位置的跳转、多光标同时编辑、占位符、可选值、变量、变量转换等功能,灵活运用这些功能,可以作出易用的提高开发效率的 snippets。

snippets 有 global、language、project 3 种生效范围:global 是全局的设置;language 是语言级别的设置,可以进一步封装成插件共享;project 则是项目范围内的,在 .vscode 下的 xx.code-snippets 中,完全可以提交到 git 仓库,和其他成员共享。

灵活运用 snippets 功能,是可以提高开发效率的,而且这个也是可以项目级别共享的。希望这篇文章能够帮大家了解 snippets。

原文地址:https://juejin.cn/post/7005878164517814280

作者:zxg_神说要有光

更多编程相关知识,请访问:编程入门!!

以上是了解VSCode中的snippets,看看怎么提高开发效率!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode怎么查看word文档 vscode查看word文档的方法 vscode怎么查看word文档 vscode查看word文档的方法 May 09, 2024 am 09:37 AM

首先,在电脑上打开vscode软件,点击左边的【Extension】(扩展)图标,如图中①所示然后,在扩展界面的搜索框中输入【officeviewer】,如图中②所示接着,从搜索结果中选择【officeviewer】安装,如图中③所示最后,打开文件,如docx,pdf等,如下图

vscode怎么绘制流程图_visual_studio code绘制流程图的方法 vscode怎么绘制流程图_visual_studio code绘制流程图的方法 Apr 23, 2024 pm 02:13 PM

首先要打开电脑中的visualstudiocode,点击左侧四个方块按钮然后在搜索框中输入draw.io查询插件,点击安装安装好后,新建一个test.drawio文件接着选中test.drawio文件,进入编辑模式左侧有各种图形,随意选择,就可以绘制流程图了绘制好后,点击文件→嵌入→svg下面再选择嵌入复制svg代码将复制的svg代码粘贴到html代码中打开html网页,就可以看到绘制的流程图了点击网页上的图片,就可以跳转页面在该页面可以放大缩小流程图在这里,我们选择点击右下角的铅笔图案,跳转网

Vscode怎样编写Maude_Vscode编写Maude的方法 Vscode怎样编写Maude_Vscode编写Maude的方法 Apr 23, 2024 am 10:25 AM

首先在vscode插件管理器可以搜索到Maude插件。接着,新建扩展名为maude的文件,即可使用maude的代码段和语法高亮。终端->新建终端可以在当前文件夹打开vscode内置终端,来运行maude或者full-maude程序。在maude的官方教程中,还有http客户端的例子,可以如图方式调用运行。如果希望关联fm扩展名的文件,打开设置,在用户设置中,搜索fileassociations,打开settings.json。给文件关联添加一个条目,即*.fm到maude的条目即可。但是full

加州理工华人用AI颠覆数学证明!提速5倍震惊陶哲轩,80%数学步骤全自动化 加州理工华人用AI颠覆数学证明!提速5倍震惊陶哲轩,80%数学步骤全自动化 Apr 23, 2024 pm 03:01 PM

LeanCopilot,让陶哲轩等众多数学家赞不绝口的这个形式化数学工具,又有超强进化了?就在刚刚,加州理工教授AnimaAnandkumar宣布,团队发布了LeanCopilot论文的扩展版本,并且更新了代码库。图片论文地址:https://arxiv.org/pdf/2404.12534.pdf最新实验表明,这个Copilot工具,可以自动化80%以上的数学证明步骤了!这个纪录,比以前的基线aesop还要好2.3倍。并且,和以前一样,它在MIT许可下是开源的。图片他是一位华人小哥宋沛洋,他是

vscode怎么开启后台更新 vscode开启后台更新方法 vscode怎么开启后台更新 vscode开启后台更新方法 May 09, 2024 am 09:52 AM

1.首先,打开界面后,点击左上角的文件菜单2.随后,在首选项栏目中点击设置按钮3.接着,在跳转的设置页面中,找到更新板块4.最后,鼠标点击勾选启用在Windows上后台下载和安装新的VSCode版本按钮,并重启程序即可

vscode工作区怎么添加文件 vscode工作区添加文件的方法 vscode工作区怎么添加文件 vscode工作区添加文件的方法 May 09, 2024 am 09:43 AM

1.首先,打开vscode软件,点击资源管理器图标,找到工作区窗口2.然后,点击左上角的文件菜单,找到将文件夹添加到工作区选项3.最后,在本地磁盘中找到文件夹位置,点击添加按钮即可

vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 vscode怎么禁止wsl配置文件 vscode禁止wsl配置文件方法 May 09, 2024 am 10:30 AM

1.首先,打开设置菜单中的settings选项2.随后,在跳转的commonlyused页面中找到terminal栏目3.最后,在该栏目右侧取消勾选usewslprofiles按钮即可

VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 VScode怎么设置动画平滑插入 VScode设置动画平滑插入教程 May 09, 2024 am 09:49 AM

1.首先,打开界面后,点击工作区界面2.然后,在打开的编辑面板中,点击文件菜单3.随后,点击首选项栏目下的设置按钮4.最后,鼠标点击勾选CursorSmoothCaretAnimation按钮,保存设置即可

See all articles