VS Code配置snippets代码片段快速生成html模板,提高前端编写效率

news2024/9/22 1:03:23

先看下示例,在输入 ! 号回车后自动生成一段代码片段。
这样我们就可以更便捷的进行代码编写了。
请添加图片描述
配置方法如下:
在这里插入图片描述
然后找到对应的文件进行配置,例如 html.json,编写 .html 扩展名文件时就能触发。
在这里插入图片描述
我这选的 html.json 进行的配置,
其中 "prefix": "html" 里的 html 就是关键词,后面就靠它来触发,这个可以自己随便定义。
Html templates 名也是随便定义的。
里面用的 $0 表示光标所落的位置。
其它的例如 $TM_FILENAME 是引用的一些内置的变量,这个是表示当前文件名,更多的可以查看后面的表格。

{
	"Html templates": {
		"prefix": "html",
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
			"  <meta charset=\"UTF-8\">",
			"  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"  <title>xxx</title>",
			"</head>",
			"<body>",
			"$0",
			"</body>",
			"</html>",
			"$BLOCK_COMMENT_START",
			"文件名:$TM_FILENAME",
			"日期:$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
			"$BLOCK_COMMENT_END"
		],
		"description": "Html templates"
	}
}

然后输入 html 就能触发了,那个前面有个方块的就是。
在这里插入图片描述
按回车或 Tab 键后就能展示代码了。
在这里插入图片描述
相关的变量表如下:
在这里插入图片描述
更多详细内容可以查看:
官方说明文档
喜欢的点个赞❤吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/188647.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CSS选择器整理学习(下)

书接上回&#xff0c;在前端项目开发中&#xff0c;有时候需要对特殊的元素进行特殊的处理&#xff0c;但有时候元素的位置不确定、层级不确定、数量不确定等问题&#xff0c;导致我们没办法进行元素的选择&#xff0c;这个时候我们就需要用到元素选择器了。 一、css选择器 1…

ESP-IDF:懒汉式和饿汉式单例模式测试代码

ESP-IDF:懒汉式和饿汉式单例模式测试代码 /单例模式测试/ /懒汉式/ class singleton_lazy { private: singleton_lazy(){}; public: static singleton_lazy *getinstance(){ if (pSingleton NULL){ pSingleton new singleton_lazy; } return pSingleton; } private: stati…

美摄云剪辑3.0:融合AIGC,实现效率提升

云剪辑3.0亮点速览 数字人视频一键生成本地素材剪辑无需等待上传支持Lottie动画导入01 模板化包装&#xff0c;一键生成数字人视频 伴随元宇宙技术的发展和产业数字化升级&#xff0c;数字人正在成为下一代互联网的基础设施。与此同时&#xff0c;AI的应用场景也愈加丰富。人…

网站被劫持的解决方案

网站被劫持怎么解决?用户打开网站就发现网站被篡改不是自己原来的页面&#xff0c;而是被变成被劫持的页面&#xff0c;以下几种情况以及对应的处理方法&#xff0c;一起来看看吧。 一、DNS劫持 DNS劫持是一种恶意攻击&#xff0c;其中&#xff0c;个人通过覆盖计算机的传输控…

TCP/IP详解与实例分析

TCP/IP详解 TCP/IP并不是一个具体的协议&#xff0c;而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇&#xff0c;只是因为在TCP/IP协议中TCP协议和IP协议最具代表性&#xff0c;所以被称为TCP/IP协议。 TCP/IP协议在一定程度上参考了OSI的体系结构&#xff0c;在TCP/…

前端面试题2023含答案 前端必备知识点 混淆 刷题 查漏补缺【持续更新中】

目录1. vue双向数据绑定&#xff08;响应式&#xff09;原理2. HTML 语义化&#xff08;语义化标签&#xff09;3. 标签上 title 与 alt 属性4. CSS单位&#xff1a;1px、1em、1rem、1vh / 1vw 的含义5. 网页前端性能优化的方式6. HTTP常见的状态码7. Vuex是什么&#xff08;有…

基于卡尔曼滤波器的PID控制-2

采用Simulink进行仿真&#xff01;&#xff01;Kalman算法由M函数实现。控制干扰信号wk)和测量噪声信号v(k)幅值均为0.10的白噪声信号&#xff0c;输入信号幅值为1.0、频率为0.5Hz 的正弦信号。采用卡尔曼滤波器实现信号的滤波,取O1&#xff0c;R1。仿真结果如图1和2所示。图1 …

PyQt5编程基础 2.1 GUI程序的基本框架

文章目录 创建纯代码GUI程序 创建目录 新建程序 创建GUI程序的基本过程(代码分析) 导入模块 创建应用程序 创建窗体 使用窗体类的GUI程序框架 创建项目目录 窗体设计 修改窗体的windowTitle 放一个label 放一个Push Button 保存窗体 代码设计 将QtApp中的ui文…

【自学Docker】Docker update命令

Docker update命令 大纲 docker update命令教程 docker update 命令可以用于更新一个或多个 Docker容器 的配置。该命令后面的 CONTAINER 可以是容器Id&#xff0c;或者是容器名。 docker update命令语法 haicoder(www.haicoder.net)# docker update [OPTIONS] CONTAINER […

网络编程套接字之UDP实现回显服务器及客户端

目录 前言&#xff1a; 基础理解 传输层协议 UDP TCP Socket API DatagramSocket API DatagramPacket API UDP实现回显服务器 完整代码展现&#xff08;有详细注释&#xff09; UDP实现回显客户端 完整代码展现&#xff08;有详细注释&#xff09; 小结&#xff1…

使用OpenCV对点集从左上到右下排序

本文实现如何使用OpenCV对点集从左上到右下排序。本文使用的案例图片如下&#xff1a; 需要实现的效果如下&#xff1a; 1.分阶段实现 让我们看看考虑4行的工作流。我考虑的是沿着y轴将图像分成4段&#xff0c;形成4行。对于图像的每一段&#xff0c;找出每一个以该段为中心…

虚拟主机怎么用?香港虚拟主机搭建网站教程

在了解使用方法之前要先明白什么是虚拟主机、它的用处以及服务器、VPS和虚拟主机之间有什么区别。香港虚拟主机也称为网站空间&#xff0c;顾名思义就是存放网站文件的空间。主要用于搭建网站、提供程序运行。下面就介绍一下香港虚拟主机搭建网站的使用方法以及教程。 一、香港…

职场新人应该如何培养项目管理的能力?

李强在一家企业工作&#xff0c;前阵子升任项目经理。但他这两天却一副愁眉不展的样子&#xff0c;像霜打的茄子。原来是因为他缺乏管理经验&#xff0c;设定的工作任务不合理&#xff0c;项目成员职责不清&#xff0c;导致项目混乱&#xff0c;项目进度不清晰。 项目管理涉及…

Redis搭建基于docker跨服务器的一主两从三哨兵集群模式

文章目录1 整体拓扑图2 redis与哨兵配置文件2.1 主节点配置文件2.1.1 主节点redis.conf配置文件2.1.2 主节点哨兵配置文件2.2 从节点配置文件2.1.1 从节点redis.conf配置文件2.1.2 从节点哨兵配置文件3 docke-compose编排文件4 启动并测试查看哨兵日志查看集群状态测试集群是否…

在 Visual Studio 中更好地进行搜索

当在 IDE 中查找特定的代码文件、类、方法或者功能、选项&#xff0c;找到它们并不总是那么容易。有多种搜索方式&#xff0c;到底该选择哪一种才最便捷呢&#xff1f;新的“一站式”搜索&#xff08;All-In-One Search&#xff09;将代码和功能搜索合并到同一个 UI 中&#xf…

从GPT到chatGPT(三):GPT3(一)

#GPT3 文章目录前言正文摘要介绍方法模型结构训练数据集训练过程评估小结前言 OpenAI在放出GPT2后&#xff0c;并没有引起业界太大的影响和关注&#xff0c;究其原因&#xff0c;并不是zero-shot这种想法不够吸引人&#xff0c;而是GPT2表现出来的效果依然差强人意&#xff0c…

Unity数据持久化-PlayerPrefs

1. PlayerPrefs 是什么&#xff1f; 是Unity提供的可以用于存储读取玩家数据的公共类 1.1. 存储相关 PlayerPrefs的数据存储类似于键值对存储 一个键对应一个值 提供了存储3种数据的方法int float string 键:string类型 值: int float string对应3种API PlayerPrefs.SetInt(…

如何将宿主机工作文件夹映射到vmware虚拟机内

将宿主机工作文件夹映射到vmware虚拟机内vmware启用共享文件夹在虚拟机中使用vmtools进行挂载虚拟机为linux系统&#xff0c;操作中使用的是凝思系统 vmware启用共享文件夹 在vmware中将需要共享的工作文件夹添加到共享列表中&#xff0c;如图 在虚拟机中使用vmtools进行挂…

Tomcat部署项目及Tomcat间会话同步

目录一、Tomcat中部署项目的相关配置1.相关配置2.测试二、Tomcat间的会话同步1.配置Tomcat2.修改web工程的WEB-INF下的web.xml3.配置Nginx4.测试一、Tomcat中部署项目的相关配置 1.相关配置 在Tomcat中进入conf/tomcat-users.xml文件&#xff0c;将以下代码放到最后 <rol…

本地Exchange备份方案

Exchange Server的Windows服务器备份只能执行基础还原&#xff0c;并且不支持对邮箱项执行粒度还原。在需要恢复单个已删除的电子邮件或文件夹的情况下&#xff0c;本机解决方案提供了一个耗时且低效的过程。Exchange ServerRecoveryManager Plus帮助您克服这些限制。使用Recov…