vscode快速创建js代码块

ゝ一世哀愁。 2023-10-15 18:57 35阅读 0赞

vscode内置有个用户代码片段自定义设置功能，可以简单创建我们需要的模板代码！

下边介绍具体配置步骤

1、打开vscode 左下角设置，点击用户代码片段

![a899646f87b04ce6a5c0c4587e4f3dfd.png][]

第二步 在上方的弹出框内输入javascript 点回车

![2b0eeaee8ca343c1a7272f3e1aedf4df.png][]

第三步，配置自定义代码块

![ad3e0a6a280e4452aeb9e7814e355d32.png][]

里边已经设置了console.log的自定义代码块

一个双引号代表一行代码，$符号代表我们生成代码后光标的停留位置，$1 代表第一次停留的位置

，$2代表第二次停留的位置（也就是我们按下tab键后的跳转位置）

按照以上规则我们可以配置一个创建vue实例的js代码块

{
    	// Place your snippets for javascript 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": "se",
    		"body": [
    			"console.log('$1');",
    			"$2"
    		],
    		"description": "Log output to console"
    	},	
    	
    	"create vue instance": {
    		"prefix": "vuejs",
    		"body": [
    			"const vm= new Vue({",
    			"    el:'#app',",
    			"    data:{",
    			"        $1",
    			"    }",
    			"})"
    		],
    		
    	},
    }

[a899646f87b04ce6a5c0c4587e4f3dfd.png]: https://img-blog.csdnimg.cn/a899646f87b04ce6a5c0c4587e4f3dfd.png
[2b0eeaee8ca343c1a7272f3e1aedf4df.png]: https://img-blog.csdnimg.cn/2b0eeaee8ca343c1a7272f3e1aedf4df.png
[ad3e0a6a280e4452aeb9e7814e355d32.png]: https://img-blog.csdnimg.cn/ad3e0a6a280e4452aeb9e7814e355d32.png