vsCode配置用户代码片段

皇菇凉

已于 2022-08-17 16:38:45 修改

阅读量1.3k

点赞数 2

分类专栏： vsCode 插件文章标签： vscode vue.js javascript

于 2022-08-17 16:34:54 首次发布

本文链接：https://blog.csdn.net/hdy119yaner/article/details/126387651

版权

本文介绍了如何在VSCode中配置用户代码片段，通过快捷方式提高编码效率。详细步骤包括打开配置路径、新建全局代码片段文件、命名规则、编写代码片段以及配置说明。示例展示了代码片段的使用效果。

摘要由CSDN通过智能技术生成

前言：小伙伴们是不是经常看到别人写代码的时候特别迅速，输入几个字母按下enter键就会出现一堆已经写好的代码，那你知道这是怎么实现的吗？接下来可以尝试按照下面的步骤进行配置，会让你写代码事半功倍哟！先演示下我自定义的代码片段。

在这里插入图片描述
(https://img-blog.csdnimg.cn/d8d050d06123495cb9291855deb2a51c.gif#pic_center#pic_center)

一、打开路径

方式一：文件>首选项>配置用户代码片段
在这里插入图片描述

方式二：左下角设置图标>配置用户代码片段
在这里插入图片描述

二、新建全局代码片段文件

在这里插入图片描述

三、文件命名

尽量取一个比较通用的名称，下次如果需要添加或者修改代码片段时就按照上面的步骤可找到此文件
在这里插入图片描述

四、片段书写

{
   
	"Print to console": {
    // 控制台打印
		"scope": "javascript,typescript,Vue,vue,js",
		"prefix": "lg",
		"body": [
			"console.log('$1')",
			"$2"
		],
		"description": "Log output to console"
	},
	"add function note": {
    // 添加函数注释
		"scope": "javascript,typescript,Vue,vue,js",
		"prefix": "fn",
		"body": [
			"/**",
			" * @description $1",
			" * @param {*$2}",
			" * @retu