VSCode snippets

生成工具:https://snippet-generator.app/

VSCode snippets:https://code.visualstudio.com/docs/editor/userdefinedsnippets#/

VS Code 中的 Snippets 是一种快捷方式,可以帮助你更快地编写代码。你可以创建自己的 Snippets,也可以使用其他人创建的 Snippets。在 VS Code 中,你可以通过打开 "文件" 菜单,然后选择 "首选项" -> "用户代码片段" 来创建和编辑 Snippets。你可以选择某种语言,然后在其中添加自己的 Snippets。当你在编辑器中输入某个触发器时,VS Code 会自动提示你可用的 Snippets,你可以选择其中一个来快速生成代码。Snippets 可以大大提高编写代码的效率,特别是当你需要频繁使用某些代码片段时。

示例:

json 复制代码
{
	// Place your snippets for javascriptreact 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",
		 "prefix": [
		      "console",
		      "log"
	    ],
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

这段代码是一个用于创建 "Print to console"(打印到控制台)的代码片段。它是一个在 VS Code 中创建自定义 Snippets 的示例。

  • "prefix"(前缀)是在编辑器中触发代码片段的关键词。在这个示例中,当你在编辑器中输入 "log"或"console" 并按下 Tab 键时,代码片段将被插入。
  • "body"(代码体)是实际的代码片段内容。在这个示例中,代码片段包含两行代码。第一行是 console.log('$1');,它将在控制台打印一个值,并使用 $1 表示占位符,你可以在插入代码后编辑这个占位符的内容。第二行是 $2,它表示另一个可编辑的占位符。
  • "description"(描述)是对代码片段的简短描述,用于帮助你理解这个代码片段的作用。

因此,当你使用这个代码片段时,它会自动插入一行 console.log(''); 代码,并将光标定位在引号内,以便你输入要打印到控制台的值。你还可以使用 Tab 键切换到第二个占位符进行编辑。这个代码片段可以帮助你更快地在 JavaScript 文件中添加打印语句并输出到控制台。

相关推荐
VidDown9 天前
VidDown 工具站:免费、本地优先的开发者工具箱
javascript·编辑器·音视频·视频编解码·视频
摇滚侠9 天前
IDEA 创建 Java 项目 手动整合 SSM 框架
java·ide·intellij-idea
霸道流氓气质9 天前
Trae IDE 新手入门指南
ide
VidDown9 天前
显卡处理视频技术详解:从硬解码到 NVENC,GPU 如何让视频处理起飞?
javascript·编辑器·音视频·视频编解码·视频
夜猫逐梦9 天前
【UE基础】03.蓝图与编辑器工作流
编辑器·ue·蓝图·ue编辑器
VidDown9 天前
视频帧率技术详解:从 24fps 到 120fps,帧率如何影响你的观看体验?
网络·网络协议·编辑器·音视频·视频编解码·视频
爱就是恒久忍耐9 天前
VSCode里如何比较2个branch
ide·vscode·编辑器
意法半导体STM329 天前
【官方原创】如何为STM32CubeMX2配置Visual Studio Code配置方案
vscode·stm32·单片机·嵌入式硬件·策略模式·stm32cubemx·嵌入式开发
bloglin999999 天前
vscode中可视化的合并分支,在“合并编辑器中解析”中“与基线进行比较”是什么意思
ide·vscode·编辑器
终将老去的穷苦程序员9 天前
IntelliJ IDEA 的安装教程
java·ide·intellij-idea