vsCode 设置用户代码片段详解(以React为例)

设置入口

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

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

vsCode 设置用户代码片段详解(以React为例)
选中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()",
			"}"
		]
	}
}

placeholder 分析:

  • $1 作为光标第一个停留的位置,以供用户输入
  • ${1: defaultValue} 与$1相关联,同时有光标停留,defaultValue作为相关联两处光标的默认值
  • $2 第一个光标位置输入完成后按下tab后停留位置
  • ${2} 与$2相关联,同时有关标停留,但没有提供默认值,需用户手动输入
  • …以此类推
  • $0 切换tab最终光标停留的位置
    vsCode 设置用户代码片段详解(以React为例)
    vsCode 设置用户代码片段详解(以React为例)