vscode设置代码段

深碍√TFBOYSˉ_ 2022-11-20 10:00 217阅读 0赞

## 1. 打开编辑器>文件>首选项>用户代码片段>输入要创建的代码类型>会生成一个json文件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70_pic_center]

## 2. 按语法编写 ##

prefix      :代码片段名字，即输入此名字就可以调用代码片段。
    body        :这个是代码段的主体.需要编写的代码放在这里,　　　　　 
    $1          :生成代码后光标的初始位置.
    $2          :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
    ${1,字符}    :生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符。)
    description :代码段描述,输入名字后编辑器显示的提示信息。

**我的示例：**

{ 
    	// 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": "log",
    	// 	"body": [
    	// 		"console.log('$1');",
    	// 		"$2"
    	// 	],
    	// 	"description": "Log output to console"
    	// }
    	"rrn": { 
    		"prefix": "rrn",
    		"body": [
    			"import React,{Component} from 'react'",
    			"import {View,Text} from 'react-native'",
    			"class Index extends Component {",
    			"\trender(){",
    			"\t\treturn (",
    			"\t\t\t<View><Text></Text></View>",
    			"\t\t);",
    			"\t}",
    			"}",
    			"export default Index"
    		],
    		"description": "rrn"
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIxNzU0MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/21cbe7210c1c4f418a5f2c613db3ca85.png