目录
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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++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怎么定义头文件 vscode怎么定义头文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定义头文件?创建头文件并使用 .h 或 .hpp 后缀命名在头文件中声明符号(例如类、函数、变量)使用 #include 指令在源文件中包含头文件编译程序,头文件将被包含并使声明的符号可用

vscode需要什么电脑配置 vscode需要什么电脑配置 Apr 15, 2025 pm 09:48 PM

VS Code 系统要求:操作系统:Windows 10 及以上、macOS 10.12 及以上、Linux 发行版处理器:最低 1.6 GHz,推荐 2.0 GHz 及以上内存:最低 512 MB,推荐 4 GB 及以上存储空间:最低 250 MB,推荐 1 GB 及以上其他要求:稳定网络连接,Xorg/Wayland(Linux)

vscode中文注释变成问号怎么解决 vscode中文注释变成问号怎么解决 Apr 15, 2025 pm 11:36 PM

解决 Visual Studio Code 中中文注释变为问号的方法:检查文件编码,确保为“UTF-8 without BOM”。更改字体为支持中文字符的字体,如“宋体”或“微软雅黑”。重新安装字体。启用 Unicode 支持。升级 VSCode,重启计算机,重新创建源文件。

VSCode怎么用 VSCode怎么用 Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCode) 是一款跨平台、开源且免费的代码编辑器,由微软开发。它以轻量、可扩展性和对众多编程语言的支持而著称。要安装 VSCode,请访问官方网站下载并运行安装程序。使用 VSCode 时,可以创建新项目、编辑代码、调试代码、导航项目、扩展 VSCode 和管理设置。VSCode 适用于 Windows、macOS 和 Linux,支持多种编程语言,并通过 Marketplace 提供各种扩展。它的优势包括轻量、可扩展性、广泛的语言支持、丰富的功能和版

vscode终端常用命令 vscode终端常用命令 Apr 15, 2025 pm 10:06 PM

VS Code 终端常用命令包括:清除终端屏幕(clear)列出当前目录文件(ls)更改当前工作目录(cd)打印当前工作目录路径(pwd)创建新目录(mkdir)删除空目录(rmdir)创建新文件(touch)删除文件或目录(rm)复制文件或目录(cp)移动或重命名文件或目录(mv)显示文件内容(cat)查看文件内容并滚动(less)查看文件内容只能向下滚动(more)显示文件前几行(head)

vscode终端使用教程 vscode终端使用教程 Apr 15, 2025 pm 10:09 PM

vscode 内置终端是一个开发工具,允许在编辑器内运行命令和脚本,以简化开发流程。如何使用 vscode 终端:通过快捷键 (Ctrl/Cmd ) 打开终端。输入命令或运行脚本。使用热键 (如 Ctrl L 清除终端)。更改工作目录 (如 cd 命令)。高级功能包括调试模式、代码片段自动补全和交互式命令历史。

vscode怎么切换中文模式 vscode怎么切换中文模式 Apr 15, 2025 pm 11:39 PM

VS Code 切换中文模式的操作步骤:打开设置界面(Windows/Linux:Ctrl ,,macOS:Cmd ,)搜索 "Editor: Language" 设置在下拉菜单中选择 "中文"保存设置重启 VS Code

vscode上一步下一步快捷键 vscode上一步下一步快捷键 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷键的使用方法:一步(向后):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

See all articles