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

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

先看下示例,在输入 ! 号回车后自动生成一段代码片段。

这样我们就可以更便捷的进行代码编写了。

09cae84e829c4d98bc038cd597f8a0d5.gif

配置方法如下:

af3ae4e9ea404164838424bd27df2673.png

然后找到对应的文件进行配置,例如 html.json,编写 .html 扩展名文件时就能触发。

8fd0d91c267248efa0aa084b2cdeb955.png

我这选的 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 就能触发了,那个前面有个方块的就是。

483f84f5c6fd43e394d2d6495d0bceb7.png

按回车或 Tab 键后就能展示fcf9f3912ba64d348577fbbaac635bcd.png代码了。


相关的变量表如下:

e84ccbace353479c844dff77055d9f52.png

更多详细内容可以查看:

官方说明文档

喜欢的点个赞❤吧!

目录
相关文章
|
9月前
|
人工智能 自然语言处理 前端开发
面向六个月后的 AI Code,也许影响的不只是前端
本文探讨了AI在编程领域的快速发展及其对程序员职业的影响。随着AI技术的不断进步,特别是Codebase Indexing和MCP(Model Context Protocol)等技术的应用,AI已能够更好地理解企业内部知识并生成符合项目规范的代码。文章指出,未来六个月AI代码生成将形成“规范驱动→知识沉淀→协议贯通→智能执行”的闭环架构,大幅提升开发效率。同时, Anthropic CEO Dario Amodei预测,初级程序员可能在18个月内被AI取代,强调了职业规划更新的重要性。文章还对比了Function Call与MCP的技术路线,并提供了相关参考链接。
806 71
面向六个月后的 AI Code,也许影响的不只是前端
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
762 11
|
7月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
10月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1658 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
11月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
321 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
11月前
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
843 0
|
12月前
html5+svg太空人404动画模板源码
html5+svg太空人404动画模板源码
192 17
|
12月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
298 10
|
移动开发 前端开发 Java