VsCode自定义代码片段

前言

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

插件

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

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

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

image-20221118113836344.png

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

image-20221118114100561.png

image-20221118114217356.png

自定义插件

打开设置面板

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

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

image-20221118111930669.png

选择代码块文件类型

image-20221118112024396.png
然后选则,你想设置的文件类型。比如这里,我添加一个 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"
// }
}

书写配置

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

image-20221118113344165.png

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

写在最后

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

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容