VSCODE自定义代码片段简述与基础使用_vscode 代码片段

一、 简述

VSCode的自定义代码片段功能允许开发者根据自己的需求定义和使用自己的代码片段，从而提高编码效率。
优点:

1. 提高效率： 自定义代码片段能够减少重复输入的工作量，特别是对于经常使用的代码模式或者特定的代码结构。
2. 规范代码风格： 可以定义统一的代码风格和命名规范，让团队成员在编码过程中更加一致。
3. 易于维护： 用户代码片段文件可以轻松地进行编辑和管理，可以随时添加、删除或修改代码片段。
4. 适应个性化需求： 开发者可以根据自己的习惯和需求定制代码片段，使得编码过程更符合个人的工作流程。
5. 跨平台支持： VSCode跨平台，并且用户代码片段可以在不同的操作系统上共享和使用。

二 、 基础使用说明

2.1 新建一个代码块工作区间

点击左下角的设置

点击用户代码片段


选择新建全局代码片段
输入文件名称

2.2 语法

以下是snippets模板文件的示例代码

	Example:
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
1
2
3
4
5
6
7
8
9
10

1. “Print to console” : 代码片段的名称，显示在代码片段提示列表中。
2. “prefix” : 代码片段的触发前缀，当你键入这个前缀时，VSCode会自动提示该代码片段。
3. “body” : 代码片段的实际内容，以数组的形式列出。在数组中，可以使用 $1、$2 等占位3. 符来表示光标停留的位置，方便用户进行填写和编辑。
4. “description” : 代码片段的描述，当你在代码片段提示列表中看到该片段时，会显示该描述。

在上面的示例中，当你键入 log 后按下 Tab 键时，就会展开为 console.log(‘’);，其中的单引号之间是光标所在位置，方便你直接输入要打印的内容。再次按下 Tab 键，光标移动到 $2 所在的位置，方便你继续编辑后续代码。

body内介绍
Ⅰ 规则

	Example:

		"body": [
			"1",
			"2",
			"3",
			"4","5",
			   "6",
			"7"
		],
	
1
2
3
4
5
6
7
8
9
10
11

以双引号框住，逗号分隔为实际代码里的一行，在引号外的空格回车皆不会影响引号内的格式

如若需要进行特殊对齐缩进需要在引号内部操作，如在引号内部使用
“\t”制表符进行对齐

		"begin and end": {  
			"prefix": "bend",  
			"body": [
				"begin",
				"\tbegin",
				"\tend",
				"end"
			], 
			"description": "begin and end"  
		}, 
1
2
3
4
5
6
7
8
9
10

Ⅱ 方法
① 光标位置控制

		"Cursor Position": {
			"prefix": "var",
			"body": [
				"const haha = '$1';",
				"const xixi = '$2'.toUpperCase();",
				"$3"
			],
			"description": "Variable Replacement"
		}

1
2
3
4
5
6
7
8
9
10
11

输入关键词 var 然后 回车 或者 TAB 展开代码段后，光标会移动至 $[数字] 的位置（优先较 小 数字），而后在不通过 方向键 或者鼠标移动光标位置的情况下，继续按 TAB 就会移动至下一个较小数字

② 变量替换

    "Replace console.log with debug function": {  
        "prefix": "clog",  
        "body": [  
            "debug(${variable1}, ${variable1}, ${variable2});"  
        ],  
        "description": "Replace console.log with debug function and multiple variables"  
    }  

1
2
3
4
5
6
7
8
9

展开代码片段后光标移动至变量位置，输入内容即可将相同变量同时替换为相同内容

③ 二者结合

    "Replace console.log with debug function": {  
        "prefix": "clog~",  
        "body": [  
            "debug(${2:variable1}, ${3:variable2}, ${1:variable3});"  
        ],  
        "description": "Replace console.log with debug function and multiple variables"  
    }  
1
2
3
4
5
6
7

只需在变量名称前添加 [数字] : 即可通过 TAB 按照数字顺序移动光标

三、 示例

① verilog计数器

{
	// Place your snippets for verilog 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.
	"计数器": {
		"prefix": "cnt",
		"body": [
		"reg         [${2:cnt_width}-1:0]      cnt_${1:cnt_name}    ; //计数器",
    	"wire                    add_cnt_${1:cnt_name}; //开始计数",
    	"wire                    end_cnt_${1:cnt_name}; //计数器最大值",
		"always @(posedge sys_clk or negedge sys_rst_n) begin",
    	"\tif (!sys_rst_n)begin",
        "\t\t cnt_${1:cnt_name} <= ${2:cnt_width}'b0;",
		"\tend",
    	"\telse if (add_cnt_${1:cnt_name})begin",
        "\t\tif (end_cnt_${1:cnt_name})begin",
        "\t\t\tcnt_${1:cnt_name}<=${2:cnt_width}'b0;",
        "\t\tend",
        "\t\telse begin",
        "\t\t\tcnt_${1:cnt_name} <= cnt_${1:cnt_name} +1'd1;",
        "\t\tend",
    	"\tend",
    	"\telse begin",
        "\t\tcnt_${1:cnt_name} <= cnt_${1:cnt_name};",
    	"\tend",
		"end",
		"assign add_cnt_${1:cnt_name} = ${3:param3};",
		"assign end_cnt_${1:cnt_name} = add_cnt_${1:cnt_name} && (${4:param4});"
		],
		"description": "计数器模板"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

② ros有关代码片段（待补全）

{
	// 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:
	"link": {
		"scope": "xml",
		"prefix": "<link",
		"body": [
			"<link name=\"$1\">",
			"\t<visual>",
			"\t\t<geometry>",
			"\t\t</geometry>",
			"\t\t<origin xyz=\"$2\" rpy=\"$3\"/>",
			"\t\t<material name=\"$4\">",
			"\t\t\t<color rgba=\"$5\"/>",
			"\t\t</material>",
			"\t</visual>",
			"</link>"
		],
		"description": "link"
	},
	"robot": {
		"scope": "xml",
		"prefix": "<robot",
		"body": [
			"<robot name=\"$1\">",
			"</robot>"
		],
		"description": "robot"
	},
	"launch to rivz": {
		"scope": "xml",
		"prefix": "<launchrivz",
		"body": [
			"<launch>",
			"\t<param name=\"robot_description\" textfile=\"$1.urdf\" />",
			"\t<node pkg=\"rviz\" type=\"rviz\" name=\"rviz\" args=\"$2.rviz\"/>",
			"</launch>"
		],
		"description": "launch"
	},
	"launch to gazebo": {
		"scope": "xml",
		"prefix": "<launchgaze",
		"body": [
			"<launch>",
			"\t<param name=\"${name}\" textfile=\"${urdf_path}.urdf\" />",
			"<!-- 启动gazebo仿真环境 -->",
			"\t<include file=\"$(find gazebo_ros)/launch/empty_world.launch\"/>",
			"<!-- 在Gazebo中添加机器人模型 -->",
			"<node pkg=\"gazebo_ros\" type=\"spawn_model\" name=\"${spawn_name}\" args=\"-urdf -model mycar -param ${name}\"/>",
			"</launch>"
		],
		"description": "launch with gazebo"
	},
	"node": {
		"scope": "xml",
		"prefix": "<node",
		"body": [
			"<node pkg=\"$1\" type=\"$2\" name=\"$3\"/>"
		],
		"description": "node"
	},
	"joint": {
		"scope": "xml",
		"prefix": "<joint",
		"body": [
			"<joint name=\"$1\" type=\"$2\">",
			"\t<parent link=\"$3\"/>",
			"\t<child link=\"$4\"/>",
			"\t<origin xyz=\"$5\" rpy=\"$6\"/>",
			"\t<!-- <axis xyz=\"$7\"/> -->",
			"</joint>"
		],
		"description": "joint"
	},
	"xacro": {
		"scope": "xml",
		"prefix": "<xarobot",
		"body": [
			"<robot name=\"$1\" xmlns:xacro=\"http://wiki.ros.org/xacro\">",
			"\t$2",
			"</robot>"
		],
		"description": "xacro"
	},
	"xacro:property": {
		"scope": "xml",
		"prefix": "<xp",
		"body": [
			"<xacro:property name=\"$1\" value=\"$2\" />"
		],
		"description": "property"
	},
	"xacro:macro": {
		"scope": "xml",
		"prefix": "<xm",
		"body": [
			"<xacro:macro name=\"$1\" params=\"$2\">",
			"\t$3",
			"</xacro:macro>"
		],
		"description": "macro"
	},
	"gazebo label": {
		"scope": "xml",
		"prefix": "<Gazs",
		"body": [
		"<!-- 1.设置碰撞参数 -->",
		"<collision>",
        "\t<geometry>",
        "\t\t<box size= \"$1\" />",
        "\t</geometry>",
        "<origin xyry>",
        "<origin xyz=\"$2\" rpy=\"$3\"/>",
    	"</collision>",
        "<!-- 2.设置惯性矩镇 -->",
        "<inertial>",
        "\t<origin xyz=\"$4\"/>",
        "\t<mass value=\"$5\"/>",
        "\t<inertia ixx=\"$6\" ixy=\"$7\" ixz=\"$8\" iyy=\"$9\" izy=\"$10\" izz=\"$11\" />",
        "</inertial>",
		"<gazebo reference=\"$12\">",
        "\t<material>Gazebo/$13</material>",
    	"</gazebo>"
		],
		"description": "gazebo "
	},

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

四、 参考链接

1.https://blog.csdn.net/qq_33463449/article/details/103928634