vsCode 设置用户代码片段详解（以React为例）

Z时代
2024-01-10
分类：综合

react

设置入口

setting ==> user Snippets
设置 ===> 用户代码片段

setting/设置指的是vscode左下角的那个齿轮图标

选中javascriptreact.json文件做修改。

每个代码片段的数据结构为：

{
	"Snippet Name": {
		"prefix": "cc", // 触发片段的快捷键
		"body": [
			"import React, { $1 } from 'react'",
			"",
			"class $2 extends ${1} {",
			" render(){",
			"   return (",
			"     $3$0",
			"   )",
			" }",
			"}",
			"",
			"export default ${2:MyComponent}"
		],
		"description": "Create Basic Component"
	},
	"Constructor": {
		"prefix": 'ctr',
		"body": [
			"constructor() {",
			"	super()",
			"}"
		]
	}
}