VSCode中Snippet插件如何使用
VSCode中Snippet插件如何使用 发布时间:2023-01-04 09:04:42 来源:亿速云 阅读:99 作者:iii 栏目:软件技术
这篇文章主要介绍“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 部分可以通过 ${} 的方式指定光标位置、顺序、占位字符串、可用的值等
${} 语法简介:
光标跳转:1112:
占位符:${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、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 ext install 不工作 vscode基于Linux和Windows下c/c++的多文件编译与连接
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
vscode snippet 上一篇新闻:golang有工厂类吗 下一篇新闻:Laravel使用技巧有哪些 猜你喜欢 Wondershare UniConverter for Mac是什么工具 2020 年,从架构谈起,到 Mesh 结束 如何进行RazorSQL Mac的功能介绍 云趣科技助力某银行信贷等核心系统成功上线 单体架构知识点及单体架构的缺陷 如何理解Gossip 协议 分析DevOps生命周期 创建有效DevOps测试策略的5大技巧 如何理解SaaS软件的技术缺陷以及解决方法 多层级多部门的协作项目,还能敏捷起来么?