suchen
HeimEntwicklungswerkzeugeVSCodeAusführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

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

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

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

内置Snippets

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

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

如果要查看内置的代码模板有哪些,可以通过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的作用范围要么是某个(些)语言,要么是某个(些)项目,这个不在这里做赘述,详细信息可见这里

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

这些配置文件所在目录为:<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)

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

打开了一个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触发,效果如下

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

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的作用或者模板内容的字段,它的内容会出现在相关的提醒中

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

特殊结构的使用

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内容的最后的位置,在这里就是生成的那行代码的末尾)

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

至此应该就可以理解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内容的最后的位置,在这里就是右花括号的后面)

Ausführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode

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

详情参考这里:

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

Artikelquellcode: gitee.com/thisismyadd…

Weitere Informationen zu VSCode finden Sie unter: vscode-Tutorial ! !

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Codevorlagen (Snippets) in VSCode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Dieser Artikel ist reproduziert unter:掘金社区. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Visual Studio: Erforschung von Preis- und LizenzoptionenVisual Studio: Erforschung von Preis- und LizenzoptionenApr 13, 2025 am 12:03 AM

Visualstudio ist in drei Versionen erhältlich: Community Free Edition ist für Einzelpersonen und kleine Teams, professionelle bezahlte Ausgabe für professionelle Entwickler und kleine und mittlere Teams, und Enterprise Ultimate Edition ist für große Unternehmen und komplexe Projekte.

Visual Studios Wert: Abwägung der Kosten gegen seine VorteileVisual Studios Wert: Abwägung der Kosten gegen seine VorteileApr 12, 2025 am 12:06 AM

Visualstudio ist in der .NET -Entwicklung von großer Wert, da es leistungsstark und umfassend ist. Trotz des hohen Kosten- und Ressourcenverbrauchs ist die Effizienzverbesserung und die Entwicklung der Entwicklung erheblich. Die Gemeinschaft ist ideal für einzelne Entwickler und kleine Teams. Große Unternehmen eignen sich für professionell oder Unternehmen.

Visual Studios Verfügbarkeit: Welche Ausgaben sind kostenlos?Visual Studios Verfügbarkeit: Welche Ausgaben sind kostenlos?Apr 10, 2025 am 09:44 AM

Zu den freien Versionen von Visualstudio gehören VisualstudioCommunity und VisualstudioCode. 1. VisualstudioCommunity eignet sich für einzelne Entwickler, Open -Source -Projekte und kleine Teams. Es ist leistungsstark und für individuelle Projekte und Lernprogramme geeignet. 2. VisualStudioCode ist ein Leichtgewichts -Code -Editor, der mehrere Programmiersprachen und Erweiterungen unterstützt. Es hat eine schnelle Startgeschwindigkeit und eine geringe Ressourcenverwendung, was es für Entwickler geeignet ist, die Flexibilität und Skalierbarkeit benötigen.

Wie installiere ich Visual Studio für Windows 8?Wie installiere ich Visual Studio für Windows 8?Apr 09, 2025 am 12:19 AM

Die Schritte zur Installation von VisualStudio unter Windows 8 sind wie folgt: 1. Laden Sie das Installationspaket für VisualstudioCommunity2019 von der offiziellen Microsoft -Website herunter. 2. Führen Sie das Installationsprogramm aus und wählen Sie die erforderlichen Komponenten aus. 3. Es kann nach Abschluss der Installation verwendet werden. Achten Sie darauf, Windows 8-kompatible Komponenten auszuwählen und sicherzustellen, dass ausreichende Speicherplatz- und Administratorrechte vorhanden sind.

Kann mein Computer gegen Code ausführen?Kann mein Computer gegen Code ausführen?Apr 08, 2025 am 12:16 AM

VSCODE kann auf den meisten modernen Computern ausgeführt werden, solange die grundlegenden Systemanforderungen erfüllt sind: 1. Betriebssystem: Windows 7 und höher, macOS 10.9 und höher, Linux; 2. Prozessor: 1,6 GHz oder schneller; 3. Speicher: mindestens 2 GB RAM (4 GB oder höher empfohlen); 4. Speicherplatz: Mindestens 200 MB verfügbarer Raum. Durch die Optimierung der Einstellungen und die Reduzierung der erweiterten Nutzung können Sie eine reibungslose Benutzererfahrung auf Computern mit niedriger Konfiguration erhalten.

Wie mache ich ein Programm, das mit Windows 8 kompatibel ist?Wie mache ich ein Programm, das mit Windows 8 kompatibel ist?Apr 07, 2025 am 12:09 AM

Damit das Programm unter Windows 8 reibungslos ausgeführt wird, sind die folgenden Schritte erforderlich: 1. Verwenden Sie den Kompatibilitätsmodus, erkennen und aktivieren diesen Modus über Code. 2. Passen Sie die API -Aufrufe an und wählen Sie die entsprechende API gemäß der Windows -Version aus. 3. Führen Sie die Leistungsoptimierung durch, vermeiden Sie den Kompatibilitätsmodus, optimieren Sie API -Aufrufe und verwenden Sie allgemeine Steuerelemente.

Funktioniert VS -Code unter Windows 8?Funktioniert VS -Code unter Windows 8?Apr 06, 2025 am 12:13 AM

Ja, VSCODEISCOMPATIBLEWITHWINDOWS8.1) Download theinstallerfromthevScodewebSeandensurethelatest.netframeworkiSInstalled.2) InstalleTensionsusingTheCommandLine, NotingsomemayloloadsLower.3) ManagingPerformanceByclosensunningaryExtensNosition, anhand der Leuchten

Was ist der Unterschied zwischen VS -Code und Visual Studio?Was ist der Unterschied zwischen VS -Code und Visual Studio?Apr 05, 2025 am 12:07 AM

VSCODE ist ein leichter Code -Editor, der für mehrere Sprachen und Erweiterungen geeignet ist. Visualstudio ist eine leistungsstarke IDE, die hauptsächlich für die .NET -Entwicklung verwendet wird. 1.VSCODE basiert auf Elektron, unterstützt plattformübergreifend und verwendet den Monaco-Editor. 2. Visualstudio verwendet den unabhängigen Technologiestack von Microsoft, um Debugging und Compiler zu integrieren. 3.VSCODE ist für einfache Aufgaben geeignet, und Visualstudio eignet sich für große Projekte.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.