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:
// ,  for tab stops, k_e_k_c_c_n-d_i_f_t_c_n 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('');",
// ""
// ],
// "description": "Log output to console"
// }
}

书写配置

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

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

写在最后

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