vscode自定义用户代码片段
在VSCode中,我们可以通过自定义用户代码片段来实现这个功能
期望:输入fncb,回车,显示:
const fn = useCallback(() => {
}, []);
下面是如何配置一个snippet使得输入fncb并按下回车后自动展开为useCallback的回调函数模板:
- 打开VSCode,进入“文件”菜单,选择“首选项”(或者直接按 Ctrl + ,),然后点击“用户代码片段”。
- 在弹出的子菜单中,选择或搜索你想要添加snippet的语言环境,这里我们假设是在JavaScript或TypeScript环境中,所以选择"新建全局 snippets" -> “JavaScript” 或 "TypeScript
- 这时会打开一个JSON文件,在此文件中编写你的snippet配置,例如:
{
"Create useCallback Hook": {
"prefix": "fncb",
"body": [
"const $1 = useCallback(() => {",
"\t$0",
"}, []);"
],
"description": "Inserts a useCallback hook with an empty dependency array"
}
}
解析
在这个配置中:
“Create useCallback Hook” 是snippet的描述名,用于在VSCode IntelliSense提示中显示。
“prefix”: “fncb” 表示触发该snippet的前缀。
“body” 是一个数组,每一项是一个字符串,代表要插入的代码行。其中 $1 是第一个可选光标位置,按Tab键可以在 $1 和 $0 之间切换。$0 表示最后的光标停留位置。
保存此JSON文件后,在JavaScript或TypeScript文件中输入 fncb 并按回车,就会看到自动生成了useCallback的回调函数模板,并且光标会定位到函数体内部等待进一步编辑。