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中如何定制代码片段”的内容了,经过本文的学习后,相信大家对vscode中如何定制代码片段这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文标题:vscode中如何定制代码片段
网站URL:http://pwwzsj.com/article/iepipo.html