• 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": ",
		"body": [
			"",
			"\t",
			"\t\t",
			"\t\t",
			"\t\t",
			"\t\t",
			"\t\t\t",
			"\t\t",
			"\t",
			""
		],
		"description": "link"
	},
	"robot": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			""
		],
		"description": "robot"
	},
	"launch to rivz": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			"\t",
			"\t",
			""
		],
		"description": "launch"
	},
	"launch to gazebo": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			"\t",
			"",
			"\t",
			"",
			"",
			""
		],
		"description": "launch with gazebo"
	},
	"node": {
		"scope": "xml",
		"prefix": ",
		"body": [
			""
		],
		"description": "node"
	},
	"joint": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			"\t",
			"\t",
			"\t",
			"\t",
			""
		],
		"description": "joint"
	},
	"xacro": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			"\t$2",
			""
		],
		"description": "xacro"
	},
	"xacro:property": {
		"scope": "xml",
		"prefix": ",
		"body": [
			""
		],
		"description": "property"
	},
	"xacro:macro": {
		"scope": "xml",
		"prefix": ",
		"body": [
			"",
			"\t$3",
			""
		],
		"description": "macro"
	},
	"gazebo label": {
		"scope": "xml",
		"prefix": ",
		"body": [
		"",
		"",
        "\t",
        "\t\t",
        "\t",
        "",
        "",
    	"",
        "",
        "",
        "\t",
        "\t",
        "\t",
        "",
		"",
        "\tGazebo/$13",
    	""
		],
		"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

  • 相关阅读:
    Redis 连接不上 WRONGPASS invalid username-password pair
    基于java+springmvc+mybatis+vue+mysql的婚纱影楼
    C++ STL 顺序结构 vector
    c语言练习74: 分割数组中数字的数位
    leetcode：2454. 下一个更大元素 IV【sortedDict初探 + 双单调栈学习】
    [附源码]计算机毕业设计JAVA校园失物招领平台
    C++：添加头文件时出错C3646和C4430
    8/24 差分lca+数学（抽屉原理）
    逍遥自在学C语言 | 位运算符的基础用法
    MySQL5.7慢查询实践
  • 原文地址：https://blog.csdn.net/lxr0106/article/details/138090887