关于VSCode Snippet插件之使用详解

本文给大家介绍的是 VSCode Snippet 插件,它是一种代码片段配置插件,可以节省写样板代码的时间。下面是关于VSCode Snippet 的使用介绍、配置语法、引入方式和使用场景的详细解析,一起来看一下。

关于VSCode Snippet插件之使用详解

当我们想要编写一段 ajax 代码时,只需要在编辑器里输入 ajax,再点击下 Tab 键,就会自动生成 ajax 代码的模板。Snippet 支持我们配置自己想要的任意代码片段,因此我们可以把项目中常见的代码片段抽出来,提高编程效率。同时可以共享给所在的团队,提高整个团队的编程效率。

Snippet 配置语法

我们拿 antd 组件库举例,比如我们想配置 antd 的 Snippet 代码片段,Antd Selet 组件代码如下:

对应的 Snippet 配置代码如下:

{    “antd/Select”: {        “prefix”: [“Select”],        “body”: [            “”        ],        “description”: “Antd Select UI 组件”    }}

字段含义:

●  prefix 是触发 snippets 的前缀,可以通过数组指定多个;

●  body 是填入到编辑器的内容;

●  description 是 snippets 的描述;

body 部分可以通过 ${} 的方式指定光标位置、顺序、占位字符串、可用的值等。

${} 语法简介:

●  光标跳转:112:

●  占位符:${1: placeholder}

●  可选值:${1|text1,text2,text3|}

●  变量:$变量名

在模版可编辑位置填入内容的时候,有的时候需要用到选中的值、剪贴板的值、文件名、日期等,这些信息通过 snippets 中支持的变量来取。

比如:* TM_FILENAME: 文件名* TM_CURRENT_LINE: 当前行的内容* CLIPBOARD: 剪贴板内容* WORKSPACE_NAME:workspace 的名字* WORKSPACE_PATH:workspace 的路径* CURRENT_YEAR:当前年* CURRENT_MONTH:当前月* CURRENT_DATE:当前日* RANDOM: 随机数* RANDOM_HEX: 6 位随机 16 进制数* UUID: 唯一 id

可以取这些变量的值来填入到光标位置,方式就是使用 TM\_FILENAME、TM_FILENAME、CURRENT_YEAR 的方式。

Snippets 引入方式

●  直接在项目中生成 .vscode/xxx.code-snippets 文件,格式为本文描述的 JSON 格式,语法如上述介绍。

●  发布 VS Code 插件。

Sinppets 插件使用场景

●  使用一些开源组件库可以找寻是否已经存在 Snippet 插件,例如 antd 的 snippet 插件:github.com/bang88/antd…

●  如果你的项目使用了某个开源的框架/组件库,这个开源项目没有配套的 Snippets 插件,那么已经学会封装 Snippets 插件的你,快快动起勤劳的小手,是时候为你的团队或者社区做些贡献啦~

●  如果你的项目中,基于 antd 等 UI 组件库,又封装了一些自己业务的公共组件,那么可以给这些业务相关的公共的组件封装一个 Snippets 插件,提高你团队的效率

●  除了 JSX 类的组件,一些常用的工具函数也可以抽象 Snippets 插件代码片段。

关于VSCode Snippet插件之使用详解就到这里,翼速应用平台内有更多相关资讯,欢迎查阅!


比丘资源网 » 关于VSCode Snippet插件之使用详解

发表回复

提供最优质的资源集合

立即查看 了解详情