搜尋
首頁開發工具VSCode詳解VSCode中怎麼使用程式碼模板(snippets)

VSCode中怎么使用代码模板(snippets)?下面本篇文章给大家介绍一下VSCode中snippets的使用方法,用以提升开发效率,希望对大家有所帮助!

詳解VSCode中怎麼使用程式碼模板(snippets)

有时在使用VSCode进行前端编码时总会有一些代码段是需要重复编写的,这时使用一些代码模板(snippets),通过规定的字符序列触发snippets,快速地输入一段预设的代码模板会使编码效率提高。【推荐学习:《vscode入门教程》】

内置Snippets

VSCode中本身也自带一些 snippets ,典型的就是JavaScript中的for

詳解VSCode中怎麼使用程式碼模板(snippets)

如果要查看内置的代码模板有哪些,可以通过Command Palette查看:

点击左下角的齿轮图案,然后找到Command Palette选项(或者使用快捷键Ctrl + Shift + P),在VSCode窗口上方出现的搜索框输入Insert Snippets即可查看到

要通过Insert Snippets命令查看一个语言的 snippets 时,必须满足当前编辑的语言为snippet对应的语言的条件,才能找到对应语言的 snippets 。比如如果要找到 JavaScript 的 snippets ,当前打开的文件是.html类型的,那么如果当前编辑位置为<script></script>内部,输入Insert Snippets就可以找到 JavaScript 的snippet;或者当前编辑的文件是.js,输入Insert Snippets也可以找到 JavaScript 的 snippets 。这是因为snippets是有作用范围的snippet scope),snippet的作用范围要么是某个(些)语言,要么是某个(些)项目,这个不在这里做赘述,详细信息可见这里

詳解VSCode中怎麼使用程式碼模板(snippets)

这些配置文件所在目录为:<vscode>\resources\app\extensions\\snippets\</vscode>

下载Snippets

这里的下载是指下载带有 snippets 的插件,可以在VSCode的插件市场搜索@category:"snippets"

自定义Snippets

这里以CSS代码为例:在进行简单的前端页面布局前,一般会将标签元素自带的内外边距统一清除,所以以下代码块是很经常用到的

* {
    margin: 0;
    padding: 0;
}

为此我想为它配置一个 snippet ,这里需要找到 CSS snippet 的配置文件:找到VSCode左下角的齿轮图标,查找菜单中的“User Snippets”选项,选择 CSS (或者顶部菜单File > Prenferences > User Snippets)

詳解VSCode中怎麼使用程式碼模板(snippets)

打开了一个css.json文件后,可以看到有一大段注释,认真读懂注释并按照规定输入就可以配置出自己的代码模板了,先不说规则细节,先实现一下上述提到的清除内外边距的CSS样式

按照注释提示,添加以下内容并保存

"Clear all elements&#39; margin and padding": {
    "prefix": "cmp",
    "body": [
        "* {",
        "\tmargin: 0;",
        "\tpadding: 0;$0",
        "}"
    ],
    "description": "Clear all HTML elements&#39; default margin and padding"
}

prefix表示触发代码段的文本,所以需要通过输入cmp触发,效果如下

詳解VSCode中怎麼使用程式碼模板(snippets)

snippets 配置规则

当打开用户snippets的配置文件时,总能看到一段注释,根据这段注释一般就可以写出自己的 snippet 了,接下来基于这段注释的内容展示如何写一个 snippet(更多配置方式可以参考这里

// Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// \$1, \$2 for tab stops, \$0 for the final cursor position, and \${1:label}, \${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
//   "console.log(&#39;\$1&#39;);",
//   "\$2"
// ],
// "description": "Log output to console"
// }

配置文件类型

snippet 的配置文件是 JSON 文件,允许使用C语言风格的注释,允许定义不限定数量的 snippet

基本结构

单个snippet的配置基本结构如下:

// 尖括号包含内容表示自定义内容
"<snippet name>": {
    "prefix": "<triggerText>",
    // 如果模板有多行,应该用字符串数组赋值,一个元素代表一行内容
    "body": "<template>",
    "description": "<description of this snippet>"
}

多个配置之间用逗号分隔(不能有多余逗号)

首先一个 snippet 配置要指定该一个名称,然后给这个项赋值一个对象 对象中包含三个部分:prefixbodydescription

  • prefix是指定用于触发snippet的文本,比如上述配置的清除元素内外边距的 snippet ,使用的prefixcmp(clear margin and padding)。这个可以根据自己的喜好配置,主要是要好记,毕竟配置snippet就是为了提高编码效率

  • body是指定代码模板内容,这里可以赋值为单个字符串或者一个字符串数组当模板只有一行内容或者只有一行代码时,可以直接把这行代码作为字符串赋值给body。比如如果想要快速打印console.log("hello")这一句,则可以配置:

    "Print Hello to console": {
        "prefix": "hello",
        "body": "console.log(&#39;Hello&#39;);", // 直接赋值语句字符串
        "description": "Print Hello to console"
    }

    如果模板是多行内容,那么则需要用一个字符串数组来赋值(如上述CSS的例子),其中一个元素代表一行内容。其中的空白字符可以使用转义字符(如上述CSS的例子),并且如果直接应用空白字符,只有空格可以应用(不可以直接应用制表符)

  • description是指定描述该snippet的作用或者模板内容的字段,它的内容会出现在相关的提醒中

詳解VSCode中怎麼使用程式碼模板(snippets)

詳解VSCode中怎麼使用程式碼模板(snippets)

特殊结构的使用

body部分的内容可以使用一些特殊结构来控制光标位置和插入的文本。以下介绍一下配置文件中默认注释提到的tabstopsplaceholders

tabstops

当输出一个 snippet 时,如果 snippet 的body定义了tabstops,那么可以通过Tab键来使光标位置跳到特定位置,方便修改生成的模板

tabstops用$0, $1, $2, ......标识,数字表示被访问的顺序,而$0标识的是最后到达的光标位置,并且相同数字的tabstops是相关联的(也就是说会有多个光标同时在多个相关联的位置)

看下述例子:

// 添加到JavaScript的snippets配置文件中
"Test tabstops": {
    "prefix": "tts",
    "body": "$0two($2);one($1);three($3);one($1)",
    "description": "a test for tabstops"
}

以上这个例子刚开始时会有两个光标分别在两个one()的括号内;然后按一次Tab后,会有一个光标在two()括号内;第二次按Tab后,光标会在three()括号内;再按一次Tab,光标会跑到这行代码最前面,因为$0标识光标最后到达的位置(这里如果不设定$0会默认到达body内容的最后的位置,在这里就是生成的那行代码的末尾)

詳解VSCode中怎麼使用程式碼模板(snippets)

至此应该就可以理解tabstops这个称呼的含义了,其实就是“按tab后光标停止的地方” 另外可以Shift+Tab退回上一个tabstops的位置,但要注意的是如果到达了$0,也就是snippet中光标的最后位置后还进行了其他操作(包括按Tab),就无法回退到上一个tabstops的位置了

placeholders

placeholders就是带值的tabstops,其中的值会作为默认文本插入代码并被选中,这样就可以方便地在需要时修改代码模板的默认内容了

最典型的例子就是文章开头内置的那个for循环JS snippet,这里我稍微复现一下来举个例子

"Test placeholders": {
    "prefix": "flt",
    "body": [
        "for(let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index} ++) {",
        "\t${4:const} ${3:element} = ${2:array}[${1:index}];",
        "\t$0",
        "}"
    ],
    "description": "a test for placeholders using for loop"
}

刚开始时,有多个选中的index,此时可以同时修改全部index为想要的内容;接着按一次tab,同时选中所有的array,这时也可以同时修改所有选中内容;按第二次tab就选中了element;按第三次,就到达了const;再按一次就到了最后的位置$0(这里如果不设定$0会默认到达body内容的最后的位置,在这里就是右花括号的后面)

詳解VSCode中怎麼使用程式碼模板(snippets)

snippet语法允许使用的特殊结构不止以上的tabstops和palceholders的配置,还有其他的

详情参考这里:

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

文章原始碼:gitee.com/thisismyadd…

文章原始碼:gitee.com/thisismyadd…

## ##更多關於VSCode的相關知識,請造訪:###vscode教學###! ! ###

以上是詳解VSCode中怎麼使用程式碼模板(snippets)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
手把手带你会习VSCode debug,不信你还不会!手把手带你会习VSCode debug,不信你还不会!Mar 31, 2022 pm 08:45 PM

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

浅析VSCode怎么关闭自动更新浅析VSCode怎么关闭自动更新Jun 02, 2022 pm 12:56 PM

VSCode怎么关闭自动更新?下面本篇文章给大家介绍一下VSCode关闭自动更新的方法,希望对大家有所帮助!

手把手带你在VSCode中配置 Geant4 和 Root手把手带你在VSCode中配置 Geant4 和 RootApr 25, 2022 pm 08:57 PM

本篇是VSCode配置文章,手把手教大家怎么在VSCode​中配置使用 Geant4 和 Root,希望对大家有所帮助!

23个提高开发效率的前端VSCode插件(快来收藏)23个提高开发效率的前端VSCode插件(快来收藏)Jul 25, 2022 pm 08:06 PM

本篇文章给大家分享23个前端VSCode插件,助你提高开发效率,让你事半功倍,快来收藏吧!

扒一扒vscode Prettier选项中的16个实用属性,让代码变美!扒一扒vscode Prettier选项中的16个实用属性,让代码变美!May 03, 2022 am 10:00 AM

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

总结分享12个好玩有趣的 VSCODE 插件总结分享12个好玩有趣的 VSCODE 插件May 27, 2022 am 11:06 AM

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

手把手教你在VScode中配置C/C++环境(Win下)手把手教你在VScode中配置C/C++环境(Win下)Oct 10, 2022 pm 06:52 PM

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器