vscode自定义代码片段

  • Post author:
  • Post category:其他

一,需求原因

有些代码是通用的,每次都要重写或者复制太麻烦,希望通过vscode自定义用户代码片段,需要用的时候,直接使用。

二,新建用户代码片段流程

1,打开自定义代码片段文件:文件>首选项>用户代码片段>选择要新建的代码片段类型

这里我要新建的是react native的代码片段,我直接选择全局的:

2,编写自己的代码片段

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
		"scope": "javascript,typescript",
		"prefix": "cl",
		"body": [
			"console.log('$1');",
		],
		"description": "Log output to console"
	},
	"react native template": {
		"prefix": "rncom",
		"body": [
			"import React from 'react';",
			"import { Text, View } from 'react-native';",
			"class Navigator extends React.Component {",
				"render() {",
					"return (",
					"<View>",
						"<Text>组件模板</Text>",
					"</View>",
					");",
				"}",
			"}",
			"export default Navigator;"
		],
		"description": "react native的模板文件"
	}
}

三,具体使用

在这里插入图片描述

四,具体语法:

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


版权声明:本文为weixin_42349568原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。