VsCode自定义代码片段

前言

体验了一段时间 GitHub Copilot，感觉有点别扭。我编码时，敲之前脑海中都已经提前想好了结构。当我写下关键字，机器人给我推送的代码，有时候会打断我的思路，容易分神，不能聚焦。如果只是想快速的出码，我更倾向于 自定义很多代码片段(snippets)

插件

vscode的插件市场，有各种snippets，也支持自定义。我更倾 不要装太多插件，而是自定义，或者直接改第三方插件。

插件的安装位置，我以macos为例介绍一下：

# 路径位置：$HOME/.vscode/

然后根据插件的ID，找到对应的文件夹里面的json文件，进行修改

自定义插件

打开设置面板

打开配置用户代码片段的设置面板有两种方式，第一种是，找到vscode面板左下角齿轮的图标，然后鼠标点点点...

第二种方式，通过快捷键cmd+shift+p(windows：ctrl+shift+p)，打开命令面板。搜索snippet

选择代码块文件类型

然后选则，你想设置的文件类型。比如这里，我添加一个 Rect Hooks 的useCallback。那么我需要选择 typescriptreact.json

然后会打开一个json面板，下面有个示例。

{
	// 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"
	// }
}

书写配置

根据上面的例子，写自己想要的配置

对于一些复杂的，可以参考开源的插件。比如我装过Simple React Snippets。找到他里面写的，然后复制出来自己改。

修改第三方插件

第三方插件位置 macos 一般存放的位置在**~/.vscode/extensions** 可以直接编辑内容，自定义

写在最后

协作水平有限，如有问题，欢迎留言指正