聊聊VSCode中Snippet插件的使用(提高编程效率)

本文介绍的是 vscode snippet 插件,一种代码片段配置插件,可以节省你写样板代码的时间。

聊聊VSCode中Snippet插件的使用(提高编程效率)

你可能之前学习过 vscode Snippet 插件,知道它的作用也学习了配置的语法,但是你想不到落地使用的场景。本文也将解决你的这个疑惑~

本文将介绍 VSCode Snippet 的使用介绍、配置语法、引入方式和使用场景。【推荐学习:vscodevscode

VSCode Snippet 插件使用简介

聊聊VSCode中Snippet插件的使用(提高编程效率)

(图片来自于 VSCode 官网)

如 gif 图所示,当你想编写一段 ajax 代码时,只需要在编辑器里输入 ajax,再点击下 Tab 键,就会为你自动生成 ajax 代码的模板。

Snippet 支持我们配置自己想要的任意代码片段,因此我们可以把项目中常见的代码片段抽出来,提高编程效率。同时可以共享给所在的团队,提高整个团队的编程效率。

Snippet 配置语法

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

Antd Selet 组件代码如下:

<select></select>

对应的 Snippet 配置代码如下:

{     "antd/Select": {         "prefix": ["Select"],         "body": [             "<select></select>"         ],         "description": "Antd Select UI 组件"     } }

字段含义:

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

  • body 是填入到编辑器的内容

  • description 是 snippets 的描述

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

${} 语法简介:

  • 光标跳转:1vscode

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

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

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

更多关于VSCode的相关知识,请访问:vscode

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享