IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 在vscode中维护代码片段 -> 正文阅读

[开发工具]在vscode中维护代码片段

vscode中的snippet功能简介

vscode的语言插件已经内置了一些snippet。例如:C++的插件。当你在编辑器里输入main时,会提示你可以插入的snippet。

但是也可以自己定义snippet,然后通过关键字来触发插入snippet

vscode支持非常多编程语言的snippet。通过ctrl+shift+p ,打开命令面板。输入snippet ,就能看到snippet的配置选项。

点击Configure User Snippets 后就可以选择配置哪种语言的snippet了。

点击语言名称可以生成相应语言的json文件。这个json文件就是用于维护snippet的。其中的cpp.json和python.json文件就是分别维护相应语言snippet的文件。snippet的内容可以按照语言类别来维护。在编辑器里插入时,vscode会检测当前编辑的是什么语言。当输入snippet的触发词时,只会触发对应语言的snippet。

点击global snippets file 时会生成一个全局的snippet维护文件。并且其后缀是.code-snippets 。该文件中维护的snippet可以在任意文本编辑过程中被触发。

vscode 中使用snippet的官方文档:

Snippets in Visual Studio Code

编辑snippet的方法

安装VS Code Snippet Generator插件

在market里搜索VS Code Snippet Generator并安装。

编写snippet文件

snippet文件的格式如下所示:

	// Place your snippets for cpp here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},

其中Print to consolesnippet 的名称。prefix 是触发snippet的关键词。body 就是snippet 的代码内容。每行代码都需要用双引号包裹起来。description 就是对snippet 的描述。

需要特别注意的是,$1和$2 是tabstop。当我们插入snippet 时,光标会自动处于$1的位置。这时可以输入相应的内容。输好后按tab 键,光标切换到$2处。tabstop 是可以赋默认值的。

	"Print to console1": {
		"prefix": "log",
		"body": [
			"console.log('${1:/*test1 */');",
			"${2:/*test2*/}"
		],
		"description": "Log output to console"
	},

从上面看,编辑snippet 维护文件还挺麻烦的。找到一个插件(VS Code Snippet Generator)可以将普通代码转换成上面描述的格式。这里以cpp为例,描述一下操作步骤:

  1. 先拷贝需要制作成snippet的代码片段到cpp.json文件中。
  2. 在cpp.json文件中选中刚才拷贝过来的代码。
  3. 使用ctrl+shift+p 快捷键打开命令面板。输入snippet 。然后点击Generate snippet JSON block

  1. 注意加上,。完工。

编辑好的snippet 文件存放在~/.config/Code/User/snippets/ 目录中。

1.63版本的vscode已经支持使用github同步配置了。建议开启。因为该同步操作也可以把snippet文件同步到github。一处添加处处可用。

使用snippet功能

当键入snippet 关键词(即文件中prefix的值)时会自动提示可以插入的snippet

提示的左侧会显示snippet 关键词(即prefix的值),右侧则显示snippet 的名称。如果键入关键词没有触发可选项,可以手动按ctrl+space空格 来触发。

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-01-17 11:41:39  更:2022-01-17 11:42:09 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 12:49:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码