聊聊vscode中怎么定制代码片段,让编码快到飞起!
时间:2022-04-27 [网络编程]作者:fabuyuan 浏览:9 次
vscode的用户片段非常的方便,比如我想规范注释、快速生成代码呀,vscode的用户片段都可以帮我实现,而且是那种非常定制化去实现。定义好片段后,你还可以通过脚手架去生成一个vscode插件,并不复杂。【推荐学习:《vscode入门教程》】
基本指南
先找到文件的菜单 -> 找到首选项 -> 用户片段 -> 选择新建 xx 文件夹
的代码片段文件 -> 输入片段名称 -> 开始定制。
这个 xx 文件夹
就是你当前目录,当然你也可以新建全局的或者某一个文件类型的,都可以的。无非是片段文件存放的目录不同。
然后你就在当前目录下看到这个了。
只要把它放到当前vscode打开的文件夹的根目录下面,只要vscode能读取到这个文件.vscode
即可。
还有一种方式就是你把它放到vscode的用户全局目录下也行,vscode会首先去那里面去找,然后再到当前目录下去找。
至于如何去找vscode的用户全局目录,你新建一个全局的代码片段,然后从vscode的面包屑导航中就能看到了。
开始定制自己的代码片段
目前我只先做一个通用的,可以在js、ts、scss、lesss中能用到的。
{ "单行注释:start": { "scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "ts", "body": [ "// PROJECT 一段自定义描述 start", "$0" ], "description": "单行注释:start" }, "单行注释:end": { "scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "te", "body": [ "// PROJECT 一段自定义描述 end", "$0" ], "description": "单行注释:end" }, "单行注释:start&end": { "scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "tse", "body": [ "// PROJECT 一段自定义描述 start", "", "${1:你即将填充的内容}", "", "// PROJECT 一段自定义描述 end", ], "description": "单行注释:start&end" }, "多行注释:start": { "scope": "javascript,typescript,javascriptreact,typescriptreact", "prefix": "ms", "body": [ "/**\r\n * PROJECT 一段自定义描述 start", " * $0", " * */", "" ], "description": "多行注释:start" }, "多行注释:end": { "scope": "javascript,typescript,javascriptreact,typescriptreact", "prefix": "me", "body": [ "/* PROJECT 一段自定义描述 end */", "" ], "description": "多行注释:end" } }
上面定制的是js、ts、jsx的注释代码块,不同的人有不同的风格,你简单改改成你自己的了。
使用说明:代码片段是需要通过 关键字 才能呼唤出来的。比如 如上的普通的单行注释就是通过 ts呼唤出来的,然后按一下补全的键,进行常规补全操作即可,就像windows系统的tab键。
代码片段的关键字就是上述配置文件中的 prefix 属性里的字符串,而scope就是它这个代码片段作用的文件类型了。
而body就是代码片段,数组中每一项都会在生成的代码中独占一行,$0
即表示生成代码片段后光标出现的位置。
还会有$1 2 3 4 5 6
等等,表示下一次光标出现的位置,也就是你连续敲击按tab键时光标出现的位置。
还可以使用让字符串作为占位符,比如单行注释::start&end
中的${1:xxx}
,这种就是用字符串当作占位符,可以给你很清楚的提示。
关键字说明:
ts:单行注释:star
te:单行注释:end
tse:单行注释:start&end
ms: 多行注释:start
me:多行注释:end
继续定制jsx和tsx的代码片段
这次先做一个jsx、tsx中能用的吧,jsx、tsx的注释判断和js、ts不太一样,所以要单独做一下。
{ "jsx&tsx注释:start": { "scope": "javascriptreact,typescriptreact", "prefix": "js", "body": [ "{/* PROJECT 一段自定义描述 start */}", "$0" ], "description": "jsx&tsx注释:start" }, "jsx&tsx注释:end": { "scope": "javascriptreact,typescriptreact", "prefix": "je", "body": [ "{/* PROJECT 一段自定义描述 end */}", "$0" ], "description": "jsx&tsx注释:end" }, "jsx&tsx注释:start&end": { "scope": "javascriptreact,typescriptreact", "prefix": "jse", "body": [ "{/* PROJECT 一段自定义描述 start */}", "", "${1:你即将填充的内容}", "", "{/* PROJECT 一段自定义描述 end */}", ], "description": "jsx&tsx注释:start&end" } }
效果如图:
关键字说明:
js:jsx&tsx注释:start
je:jsx&tsx注释:end
jse:jsx&tsx注释:start&end
再来一个css的
其实到了这里,你已经对vscode定制代码片段非常熟悉了,如果我上面写的片段不符合你的要求,你可以自己改改哟,没有什么复杂的操作。
{ "css注释:start": { "scope": "css", "prefix": "cs", "body": [ "/* PROJECT 一段自定义描述 start */", "$0" ], "description": "css注释:start" }, "css注释:end": { "scope": "css", "prefix": "ce", "body": [ "/* PROJECT 一段自定义描述 end */", "$0" ], "description": "css注释:end" }, "css注释:start&end": { "scope": "css", "prefix": "cse", "body": [ "/* PROJECT 一段自定义描述 start */", "", "${1:你即将填充的内容}", "", "/* PROJECT 一段自定义描述 end */", ], "description": "css注释:start&end" } }
关键字说明:
cs:css注释:start
ce:css注释:end
cse:css注释:start&end
最后做个todo吧
{ "TODO注释:common": { "scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less", "prefix": "tt", "body": [ "// PRJECT-TODO:$0" ], "description": "TODO注释:common" }, "TODO注释:jsx": { "scope": "javascriptreact,typescriptreact", "prefix": "jt", "body": [ "{/* PRJECT-TODO:$0 */}" ], "description": "TODO注释:jsx" }, "TODO注释:css": { "scope": "css", "prefix": "ct", "body": [ "/* PRJECT-TODO:$0 */" ], "description": "TODO注释:css" }, }
关键字说明:
tt:TODO注释:common
jt:TODO注释:jsx
ct:TODO注释:css
总结
有了这些代码片段之后,其实还可以做一个vscode的插件,也比较的简单,这篇掘金文章中写了很详细了,照着做基本没啥问题。
关键字汇总说明
js、ts、less、scss文件中能够用到的
ts:单行注释:star
te:单行注释:end
tse:单行注释:start&end
ms: 多行注释:start
me:多行注释:end
jsx、tsx文件中能够用到的
js:jsx&tsx注释:start
je:jsx&tsx注释:end
jse:jsx&tsx注释:start&end
css文件中能够用到的
cs:css注释:start
ce:css注释:end
cse:css注释:start&end
上述三种文件中都能用到的todo
tt:TODO注释:common
jt:TODO注释:jsx
ct:TODO注释:css
更多关于VSCode的相关知识,请访问:vscode教程!!
以上就是聊聊vscode中怎么定制代码片段,让编码快到飞起!的详细内容,更多请关注站长家园其它相关文章!
本文标签: VSCode
转载请注明来源:聊聊vscode中怎么定制代码片段,让编码快到飞起!
本文永久链接地址:https://www.adminjie.com/post/11732.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- 华为dubal20是什么型号
- ana an00华为是什么型号
- html5的标题标记一共有几个等级
- app是什么应用程序的简称
- html5中onclick是什么意思
- 电脑显示信号线无连接是什么意思
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- angular与bootstrap的区别是什么
- vivov1818a是什么手机型号

- 最新文章
-
-
jquery怎么设置停止几秒
在jquery中,可以利用setTimeout()方法来设置停止几秒再去执行,该方法用于设定一个指定等候时间,当时间到了之后,才会执行一个指定的代码,语法为“s...
-
jquery中detach去除怎么用
在jquery中,detach方法可用于去除选中的元素,并去除该元素的所有文本和子节点,但是会保留数据和事件,允许在以后被重新插入,语法为“$(selector...
-
html5文档一定要有什么标签
一定要有4个标签:1、“<!DOCTYPE>”,是一种标准通用标记语言的文档类型声明;2、“<html>”,用于告知浏览器其自身是一个H...
-
jquery怎么去除br
jquery去除br的方法:1、获取br元素对象,语法为“$("br")”;2、利用remove()方法去除获取到的br元素即可,语法为“br元素对象.remo...
-
jquery怎么删除子元素并保留第一个
方法:1、利用“$(元素).children()”获取元素的子元素对象;2、利用“子元素对象.not(":first")”获取除第一个子元素外的子元素对象;3、...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-