使用vscode的用户代码片段制作模板

使用 vscode 的用户代码片段制作模板

最近在重构项目,每次创建文件都需要一个基础模板,以前的项目里是建了一个模板文件,每次复制粘贴过来的。

同事给我说了一个新方法,就是利用 vscode 的用户代码片段

顾名思义,就是输入一个关键字,回车后蹦出一大堆代码片段,有点像 mac 下一款好用的软件——aText。就是一个在输入一个关键字的时候变成输入一段话的效率工具。

那么这个代码片段如何使用呢。

首选项下面就有这个用户代码片段的选项了。点开之后有很多选项,我这里是因为每个项目下模板的结构不一样,所以就选择在当前项目下新建片段了。

会在.vscode 文件夹下生成一个文件。就是你的配置文件了

文件内是键值对,key 可以用作标识,value 的对象有多个属性。

prefix 比较重要,就是你输入的关键字。比如设置成 log,在输入 log 的时候会就出现 body 中的代码片段

body 是一个数组,每一项都是一行。空格要自己写在字符串里。也可以先不空格后面再 format。

description 就是描述了。

设置好之后大概是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
"create-react-template": {
"scope": "javascript,typescript",
"prefix": "reactTemplate",
"body": [
"import React, { BaseComponent } from \"@/Base\";",
"// import {Button} from 'antd';",
"// import {NavLink} from 'react-router-dom';",
"export default class ViewName extends BaseComponent {",
" render() {",
" return (",
" <div>",
" <div>111</div>",
" </div>",
" );",
" }",
"}"
],
"description": "Log output to console"
}
}

然后在你的文件中输入 reactTemplate,按提示敲回车,就出现了基础的文件结构了。