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

更多详细内容可以查看:

官方说明文档

喜欢的点个赞❤吧!

目录
相关文章
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
55 1
时尚的联系我们表单HTML模板(源码)
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
453 4
|
2月前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
507 3
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
51 1
前端基础(十七)_HTML5新特性
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
23 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
35 1
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
70 19
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
181 1
下一篇
DataWorks