用于在VSCode中创建自关闭标记的代码片段
在VSCode中，可以通过创建自关闭标记的代码片段来提高开发效率。自关闭标记是指在输入特定的代码片段后，编辑器会自动补全相应的代码，并将光标定位到需要填写的位置，方便开发人员快速编写代码。
要在VSCode中创建自关闭标记的代码片段，可以按照以下步骤进行操作：
- 打开VSCode，点击左侧的扩展图标（四个方块组成的图标）。
- 在搜索框中输入"snippet"，并选择"Code Snippets"扩展进行安装。
- 安装完成后，点击左下角的齿轮图标，选择"用户代码片段"。
- 在弹出的菜单中，选择相应的语言，比如"JavaScript"。
- 在编辑器中会打开一个以所选语言命名的代码片段文件，可以在其中添加自定义的代码片段。
下面是一个示例的自关闭标记的代码片段，以创建HTML的<img>标签为例：
"Create img tag": {
"prefix": "img",
"body": [
"<img src=\"$1\" alt=\"$2\">$0"
],
"description": "Create img tag"
}解释：
"Create img tag"：代码片段的名称。"prefix"：触发代码片段的前缀，即输入该前缀后会触发代码补全。"body"：代码片段的内容，使用特定的语法进行占位符的定义。"$1"、"$2"：占位符，表示需要填写的位置，数字表示光标切换的顺序。"$0"：最后的光标位置，即代码片段输入完成后光标所在的位置。"description"：代码片段的描述。
使用以上代码片段示例，当在编辑器中输入"img"后按下Tab键，就会自动补全<img>标签，并将光标定位到src属性的位置，方便开发人员直接输入图片的URL。同时，还可以通过Tab键切换到alt属性的位置进行输入。
这是一个简单的示例，实际上可以根据需要创建各种自定义的代码片段，提高开发效率。
腾讯云相关产品和产品介绍链接地址：
相关·内容
2回答
我发现在用VSCode编写React代码时，使用自结束标记更容易。默认的Emmet自动完成行为是插入一个显式的结束标记，例如。<Recipe></Recipe>，而我想要一种自动完成的方式来发出一个自动结束标记，例如。<Recipe />。 我以前做过代码片段，但我不知道如何让代码片段前缀作用于更通用的输入。它需要对任何大写字母的单词做出反应。我该如何创建一个代码段来完成这个任务呢？
浏览 31提问于2021-09-19得票数 0
例如，如何在ctor中创建与VSCode中的Visual C#片段相当的代码片段？我正在查看TextMate文档，VSCode片段系统是基于这些文档的，我看到了很多变量，比如TM_SCOPE，但是VSCode似乎没有对这些变量进行评估。在VSCode片段支持的当前状态下，这是不可能的吗？
浏览 4提问于2016-01-02得票数 2
回答已采纳
我已经让VSCode中的用户片段为C和C++工作，但出于某种原因，VSCode没有为.md和.tex文件提供代码片段建议。
下面是tex.json的一个很小的例子(不起作用)：
{
"dummy": {
"prefix": "dummy",
"body": [
"some random text for demonstration"
],
"description": "A dummy snipp
浏览 2提问于2021-08-25得票数 1
我试着理解为什么浏览器显示诗句的方式有区别？
下面是一个例子:代码片段#1的预期输出是三个方框，并排:黑色、蓝色、红色。代码片段2只显示黑色和红色-为什么不是在代码片段2？中呈现的蓝色框？
1：
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;"></div>
<div sty
浏览 1提问于2011-07-19得票数 14
回答已采纳
3回答
下面是两个html代码片段：
<html>
<head>
<title>foo</title>
<style type="text/css"></style>
</head>
<body>
bar
</body>
</html>
<html>
<head>
<title>foo</title>
<style type="text/css&
浏览 1提问于2014-01-06得票数 2
4回答
我是PHP框架的新手，目前我正在使用其中一个名为Laravel的框架。我正在使用VSCode作为IDE。我对Laravel的刀片模板有一些问题，当我尝试在浏览器中的本地主机上运行刀片模板或使用插件LiveServer时，它不工作，我得到以下图像。
在第一个图像中，当我尝试启动chrome时，我得到了什么；在第二个图像中，我试图打开LiveServer。
此外，我还使用了以下代码来路由刀片文件：
Route::view('app','app');
Auth::routes();
我试图运行的刀片文件是app.blade.php。
我相信我已经在V
浏览 3提问于2020-11-24得票数 0
我正在使用VSCODE编写使用JQuery编写web应用程序的程序，当我想使用div时，例如，当我想在JQuery中创建一个新的div时，我会这样写：
$('<div>
但是VSCODE立即关闭这个html标记如下：
$('<div></div>
我想要的是在其他语言中保留这个html结束标记，但是在.js文件中禁用它。可以使用VSCODE吗？
浏览 7提问于2019-12-06得票数 2
回答已采纳
我正在使用import styles from './FileName.module.scss'在VSCode中为我的react function组件样板创建一个用户代码片段，我想知道是否可以在创建Filename.tsx文件或运行代码片段时创建该FileName.module.scss
浏览 3提问于2021-04-03得票数 0
我正在处理下面的HTML页面，它使用浮动在图像上的链接导航到其他页面。
.main{
width:100vw;
}
.image_container {
position: relative;
margin: 0 auto;
width: 90%;
}
.map_image{
width:100%;
}
.map_cell {
float:left;
position: absolute;
}
.box_link{
display:block;
}
.test {
border-color: red;
浏览 2提问于2019-09-03得票数 0
回答已采纳
2回答
我有点困惑。我在VScode中编辑的文件是一个php文件，如果我将代码片段放入php.json中，下面的代码片段将无法工作，但如果我将代码片段插入html.json?！
有人能解释一下为什么代码片段在一个而不是另一个中工作吗？
"php": {
"prefix": "php",
"body": [ "<?php $1 ?>" ],
"description": "php tag"
}
上面的代码片段将归功于
浏览 3提问于2018-08-28得票数 0
我想在VSCode中使用代码片段。但是，例如，当我在javascript文件中输入for时，Intellisense并不建议代码片段“for -循环”--我需要手动滚动下拉菜单并选择它。有什么方法可以让VSCode在一开始建议代码片段吗？谢谢!
UPD:我发现那个人也有同样的问题，但他没有答案-
浏览 11提问于2016-06-16得票数 48
回答已采纳
3回答
我正在尝试通过在Git中通过VSCode创建一个提交标记。VS代码是在Git中构建的，它有一个提交选项。但是如何通过VS代码创建标记提交
浏览 32提问于2017-01-03得票数 34
我已经编写了一个标记助手，我可以使用如下..。
<mytaghelper attr1="jim"></mytaghelper>
我想把这个缩短到.
<mytaghelper attr1="jim">
至少...or ..。
<mytaghelper attr1="jim"/>
但是，我不能让它起作用。以下是流程方法的一些示例代码..。
public override void Process(TagHelperContext context, TagHelperOutput output) {
浏览 0提问于2019-05-14得票数 5
回答已采纳
在我的扩展中，我先使用vscode.workspace.openTextDocument打开一个本地文件，然后使用vscode.window.showTextDocument和vscode.workspace.onDidCloseTextDocument关闭该文件。
如果使用代码运行扩展，这似乎工作得很好。
现在我已经使用vsce包创建了vsix文件。棘手的事情来了
vscode.workspace.onDidOpenTextDocument和vscode.workspace.onDidSaveTextDocument回调都是按照预期调用的。但是，当我在UI中关闭文件时，不会调用vscode.
浏览 1提问于2019-08-15得票数 1
我想知道是否有任何方法可以潜在地设置一个NPM包来包含VSCode片段，并让它们自动可供用户使用(即。无需将它们拖放到VSCode snippets文件夹或类似的文件夹中。我知道可以创建一个包含代码片段的VSCode扩展，用户可以下载该扩展并自动添加代码片段。我曾尝试用NPM包复制该功能，但大部分都没有成功。我确实构建了一个扩展，它的工作原理是在package.json中有一个"Contributes“键，它似乎将扩展中包含的代码片断导出到主snippets文件夹中。 ? 我尝试用NPM包复制这个包，但是VSCode似乎没有以同样的方式注册它。对如何实现这一点有什么想法吗？所
浏览 9提问于2020-12-03得票数 0
回答已采纳
我有以下两个组件
BrewTitle.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: "Brew Title"
};
},
created() {
console.log("title created")
}
};
</script>
Snackbar.vue
<templat
浏览 0提问于2019-07-08得票数 6
回答已采纳
1回答
我目前有一个svelte程序，它被编译成相应的js和css文件，这是我在一个单独的html模板字符串中使用的。它被用作应用程序的the视图的一部分--它基本上会在应用程序的末尾被放入一个iframe中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta chatset='UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-
浏览 2提问于2021-02-01得票数 3
回答已采纳
我尝试在vscode中为我的扩展创建自定义代码片段。但是为了使用这些代码片段，我还需要特定的导入语句，我正在尝试弄清楚如何在从选项中选择一个代码片段时添加相应的导入语句。vscode提供了这样做的方法吗？
浏览 4提问于2018-10-11得票数 20
我正在寻找或以编程方式隐藏所有VSCode面板，但在API：中找不到任何有用的东西。
我知道我能够切换每个面板的可见性(通过使用代码片段中的命令)，因为切换命令是可用的，但是检查它是否可见是不可能的。
vscode.commands.executeCommand("workbench.action.toggleActivityBarVisibility");
vscode.commands.executeCommand("workbench.action.toggleSidebarVisibility");
vscode.commands
浏览 8提问于2020-07-20得票数 1
2回答
我想在VSCode中创建一个显示PHP箭头的片段。当我按下“2”键时，我想要PHP箭头"->“。
这是我的代码片段
"PHP arrow": {
"prefix": "²",
"body": "->$0",
"description": "PHP Arrow ->"
},
当“2”字符周围没有任何内容时，但是当我编写如下代码时，它工作得很好。
$this²
没有触发代码段。
我能做些什么？
谢谢你，祝你愉快:)
PS： char是oe
浏览 0提问于2019-05-07得票数 1
回答已采纳
我正在实现这个启动模式点击一个按钮。但是在点击按钮时，模式会出现在屏幕上，除了textarea字段、按钮代码和文件上传代码之外，每个字段都正确地显示在文本框中，为什么会这样呢？请检查下列代码的模态：
<div class="modal fade" id="myModalContactt" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="m
浏览 0提问于2018-03-08得票数 2
回答已采纳
2回答
我正在查看Reacti-360和react-本机代码，并找到了有关View组件的以下示例。
class ViewColoredBoxesWithText extends Component {
render() {
return (
<View style={{flexDirection: 'row', height: 100, padding: 20}}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View
浏览 3提问于2018-12-13得票数 0
回答已采纳
2回答
角只加载第一指令
、、、
我已经通过以下设计模式声明了两个指令：
var sampleDrtv = function () {
return {
restrict: 'E',
replace: true,
scope: false,
templateUrl: 'app/views/partials/sample.html',
link: function() {
alert('sample');
}
}
};
angular
.modu
浏览 0提问于2015-05-06得票数 4
回答已采纳
从问题中，我了解到自结束标记(如<br />和<img /> )在HTML5中完全是可选的，可以简单地编写为<br>和<img>。
但是，对于放置在HTML5中的SVG元素也是如此吗？例如，是否可以将<circle />标记写为<circle>
<svg viewBox="0 0 1000 1000">
<circle cx="500" cy="500" r="500" />
</svg>
如果允许的话，它通常是好的
浏览 6提问于2015-08-22得票数 6
回答已采纳
在Java webapp中，我创建了长HTML文本的摘要文本。在截断过程中，字符串中的HTML片段经常发生断裂，从而产生含有无效和断裂片段的HTML字符串。如下面的示例HTML字符串：
Visit this link <img src="htt
有没有Java库可以更好地处理这个问题，这样就可以避免上面这样的碎片了？
或者，我可以让它包含在HTML页面中&以某种方式使用客户端代码来处理它吗？
浏览 0提问于2014-04-28得票数 0
我想知道当我在vscode中创建一个文件时，是否有可能触发用户定义的自定义代码段。
我最近开始学习Golang，并注意到在创建main.go文件时有一些样板代码。
因此，我为它创建了我的自定义代码段，现在我可以手动触发这个片段，并为我节省一些输入的击键。
我想更进一步，以便每当我从main.go内部创建一个名为VsCode的新文件时，它就会自动启动该片段，并为我插入生物板代码，而不必手动触发代码片段。
这有可能吗？
浏览 3提问于2019-04-10得票数 7
1回答
我对Typescript/Javascript比较陌生，并在VSCode扩展示例中看到了以下片段：
const options: { [key: string]: (context: ExtensionContext) => Promise<void> } = {
showQuickPick,
showInputBox,
multiStepInput,
quickOpen,
};
我尝试了一些类似于原始类型的方法，但这会产生一个关于缺少“：”的错误。
开发人员控制台显示函数名被用作键。上述示例中的代码是如何/为什么工作的？
浏览 1提问于2022-08-25得票数 0
回答已采纳
我对Reactjs很陌生，我正在尝试为Reactjs和jsx配置VSCode。
现有信息似乎过时了..。我设法在VScode中配置了reactjs。
我安装了以下扩展：
排字安装程序
台风
Babel ES6/ES7
Reactjs代码段
由TwentyChung编写的jsx
VSCode语言模式现在显示"Javascript“。
我无法开始工作的是react jsx语法突出显示和intellisense。我遗漏了什么？有关于jsx配置的说明吗？
Windows 1064，VSCode 1.5.2，在.js中响应文件
谢谢,
恩里科
浏览 2提问于2016-09-22得票数 5
回答已采纳
1回答
有html代码可以选择选项，而不关闭选项标签，并且可以正常工作。
<div><div class="select-wrapper">
<select name="adult">
<option value="none" />Adults
<option value="0" />0 Adults
<option value="1" />1 Adults
浏览 2提问于2013-12-24得票数 0
回答已采纳
我猜在Sublime Text 3中，当你在下面的“快捷键”处使用"alt +.“时，结束标签会自动放入。VSCode有相同功能的快捷方式吗？
<ul>
<li></li>
<li></li>
<li></li>
//shortcut here
已经为VSCode安装了扩展"Sublime Text Keymap and Settings Importer“。
谢谢!
浏览 0提问于2019-04-11得票数 1
是否可以将代码片段直接粘贴到第三方应用程序(如电子应用程序)的vscode中？示例是以下代码：
const code = "var $0 = $1;";
clipboard.writeText(code, 'clipboard')
app.hide()
const newWin = await activeWindow()
// simulate CTRL+V / CMD+V
setTimeout(() => {
if (newWin.owner.bundleId === 'com.microsoft.VSCode') {
浏览 1提问于2022-06-08得票数 0
1回答
下面的HTML有什么问题吗？
它在DOM中创建了两个头。
源代码(Ctrl+U)看上去不错--这正是我所写的。
我正在使用Firefox。
<html>
<body>
<table id="interactions" class="tablesorter" style="width:600px; height=1024px">
<thead>
<tr>
<th width="800">Charts
浏览 0提问于2015-03-15得票数 0
晚上好，第一个问题！
我一直在寻找，我已经找到了不起作用的解决方案。我的问题是，IE9 (和8，7等)将剥离TinyMCE 3.4.3.2中的标记。
恐怕我的情况有点独特:我正在使用一个现有的CMS (自定义)，它有点过时，是用Java制作的，而且对XHTML不友好。有一个自定义插件，允许您插入一些脚本代码，然后用CDATA标记包围它。实质上：
insertHTML(document.videoForm.myobj.value);
在insertHTML的位置，嗯，插入光标所在的位置。现在，这在Chrome、Firefox等浏览器中非常有效，但在IE中却失败了。在通过弹出式文本框插入脚本之后，
浏览 5提问于2011-07-25得票数 5
我试图在VSCode上使用tflint，但是不能正确地配置它。
在我的终端上，terraform和tflint都工作得很好。
terraform --version
Terraform v0.12.28
tflint --version
TFLint version 0.17.0
which tflint
/usr/local/bin/tflint
但是在VSCode上，皮毛不起作用。
我已经安装了HashiCorp Terraform插件v2.0.2，并启用了terraform语言服务器。现在我检查了我的setting.json。许多互联网上的文章说，我们可以在terraform.lin
浏览 1提问于2020-06-28得票数 6
回答已采纳
在vscode中，react类组件(crl + /)将为JSX创建正确的注释 {/* comment */} 但在vscode中，react函数组件(crl + /)将为JSX创建不正确的注释 // comment 如何在vscode中修复此问题？ ?
浏览 152提问于2020-04-05得票数 0
回答已采纳
因此，我正在使用vscode在C中完成一个学校项目。我们被彻底评分的最重要的事情之一是整洁的代码格式化。假设我声明了3个这样的变量 int i;
char *s;
size_t t; 它们必须完全像这样对齐。现在，在"editor.formatOnSave": true /settings.json`中启用vscode设置会将其更改为 int i;
char *s;
size_t t; 现在，vscode中的方法是像第一个代码片段一样，以特定的方式保持这些变量对齐，还是自动完成对齐？
浏览 167提问于2019-09-11得票数 3
回答已采纳
VS代码中的html.autoClosingTags选项允许我键入'‘-和瞧'’，‘’现在将光标插入到这两个标记中。但这只适用于.html文件。我正在开发一个vue项目，并且希望这个特性也可以在我的.vue文件中使用(以及其他任何实际包含html内容的文件)。
这个是可能的吗？
浏览 0提问于2019-06-08得票数 13
回答已采纳
我想写一个vscode的扩展。我需要在某个地方展示一张gif。我看到vscode的一个变量的提示是一个窗口，有没有API来创建这样的窗口？或者，有没有其他方法可以创建一个窗口并在几秒钟后将其关闭？
浏览 0提问于2019-07-28得票数 0
我正在使用Typescript开发一个VS-Code扩展。 在其中一个流中，它使用以下接口创建一个QuickPick菜单： let quickPick: vscode.QuickPick<vscode.QuickPickItem> = vscode.window.createQuickPick();
quickPick.items = this.getValues();
quickPick.canSelectMany = true; // Enable checkboxes
// Set listeners
quickPick.onDidChangeSelection(item
浏览 13提问于2019-09-26得票数 3
回答已采纳
我想要创建一个react表，它有一些水平的标题，如下所示：
所以我在写：
<table className="table table-hover">
<thead>
<tr>
<td />
<th>EUR</th>
<th>USD</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"
浏览 3提问于2017-03-15得票数 1
回答已采纳
1回答
当我键入"，例如，VSCode用第二个自动关闭它“，并将光标放在引号之间，这使我输入引号内容，然后到达->键跳过结束括号。到达->键要比自己输入“.”要困难得多，所以我想知道我是否遗漏了在VSCode中使用自动结束括号的有意方式。
是否有一种简单的方法可以跳过由于“自动关闭”而出现的括号，而不用->键？
例如，使用代码片段，可以按"Tab“键跳转到代码段的另一个”输入部分“。但是使用自动结束括号"Tab“只是添加了制表符号。
浏览 4提问于2021-03-04得票数 3
1回答
我创建了一些VSCode用户代码段，但它在其他代码段中不起作用。
这是最新版本的VSCode，1.36。
如果我有这个片段，
"tmp": {
"prefix": "tmp",
"body": [
"#include <bits/stdc++.h>",
"using namespace std;",
"",
"int main()
浏览 1提问于2019-08-03得票数 1
回答已采纳
我有一个文件，我一直到第1行import requests，没有更多了，我收到了下面的error ModuleNotFoundError: No module named 'requests'。
使用Visual代码安装的VSCODE registeredVerified ，今天安装在VSCODE中的x64 3.7.4Python扩展中，VSCODE中创建了VSCODE作为工作区的子文件夹，创建VSCODE终端时被VSCODE识别，我正在使用VSCODE中的解释器，如VSCODE内终端内的ran pip install requests中所示-已完成的VSCODE<代码&
浏览 18提问于2019-09-30得票数 4
回答已采纳
我正在验证我的代码，在IE中我的svg路径得到了以下错误Tag cannot be self-closing. Use an explicit closing tag.，因为它是自动关闭的。
<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4.699-1.019h-3.439c" />
现在我知道HTML5中的meta标签不需要正向破折号/，你只需要用>.关闭它们同样的事情也适用于svg标签吗？如下所示：
<path d="m53.911,10.023c-1.46-.898-3.195-1.019-4
浏览 84提问于2014-06-19得票数 31
回答已采纳
2回答
随着2016年11月的发布(版本1.8)，VSCode 现在得到了支持，特别是TM_SELECTED_TEXT。
这让我很高兴，因为我在崇高文本和TextMate中都大量使用了这些内容。
我不知道如何让它在VSCode中工作。我已经创建了它们用作示例的代码片段：
"in quotes": {
"prefix": "inq",
"body": "'${TM_SELECTED_TEXT:${1:type_here}}'"
}
然后我输入一些文本，突出显示，这就是事情开始破裂的地方。
其想
浏览 8提问于2016-12-16得票数 12
回答已采纳
2回答
我非常喜欢使用普通<tag/>格式的标记使用“短结尾”，但不幸的是，在浏览器(即chrome)中使用这种方法会导致相当意外的行为。
当我在文件中有：
<div/><div/>
它被解释为
<div>
<div></div>
<div>
无论我使用什么DOCTYPE (XHTML)或HTML5，我只是以一种错误的方式得到了它。我还对命名空间<widget:aSampleWidgetA/> <widget:aSampleWidgetB/>中的自定义标记使用了这个“符号”，这也带来了这
浏览 7提问于2013-07-25得票数 4
回答已采纳
是否有可能创建代码片段或任务运行程序(或其他任何东西)，允许我在VSCode中生成UUID？这个问题也可以用一种更通用的方式解释:我能否运行一个外部工具/程序并在当前光标位置插入结果。
谢谢。
浏览 5提问于2015-10-08得票数 8
回答已采纳
5回答
我想在Visual代码中编写一个XML，然后编写一些对该模式有效的XML，但令人惊讶的是，似乎没有这样的工具，无论是内置的还是通过扩展完成的。过去也有过类似的问题(和)，但我想重新提出这个问题，并询问是否没有人知道现有的扩展，这是否是vscode github团队自己可以要求的，如果是的话，怎么做？
浏览 15提问于2017-12-15得票数 30
回答已采纳
我正在尝试将我的Mac ( 10.11.1)配置为使用作为它的默认编辑器。我创建了一个包含以下两行的~/.bash_profile文件
vscode () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}
export VISUAL=open\ -n\ -b\ "com.microsoft.VSCode"
这在某些方面是可行的:我可以在bash终端输入vscode test.txt，在Visual代码中输入up pops test.txt，如果我运行命令env，就
浏览 4提问于2015-10-24得票数 42
回答已采纳
2回答
网页上未显示代码片段
、、、、
我正在尝试构建一个基于Wagtail教程的代码片段。
我已经在models.py中构建了我的代码片段，并在templatetags文件夹中创建了一个自定义模板标记，并通过ForeignKey将该代码片段连接到Page。我还创建了html模板，并同时运行makemigrations和migrate。
代码片段是一个标题图像和一个标题，它出现在除主页之外的所有页面上。代码如下：
代码片段模型：
@register_snippet
class HeroImage(models.Model):
text = models.CharField(max_length=255)
image
浏览 4提问于2017-05-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
