首页 > 其他分享 >VSCode使用技巧快速生成HTML模板

VSCode使用技巧快速生成HTML模板

时间:2022-12-27 21:31:42浏览次数:56  
标签:文件 自定义 VSCode html HTML 输入 Tab 模板




本章目录:

- 前言简述

- 自定义HTML模板


前言简述

描述,我们在使用vscode时,新建的html文件是什么内容都没有的空文件,每次新建之后我们都要写那一坨一模一样的固定结构的标签。那有木有省略这一步骤简便方法呢?

我们可以在VSCode中编辑.html文件只需要输入:

  1. ​!(英文)​​+Tab
  2. ​html5​​:Tab

输入!或html后有提示信息,可根据提示自行选择,也可以直接Tab即可自动生成一个html文件模板,效果如下:


VSCode使用技巧快速生成HTML模板_html5


自定义html5模板

但我们每次新建html模板时候,总是感觉太单调,例如我是希望每次新建都自动引入Vue并新建一个空的页面模板,这是是完全可以实现的:​​点击设置->用户代码片段-> 输入搜索html,出现html.json文件​​,点击即可


VSCode使用技巧快速生成HTML模板_html_02


打开html.json文件后即可自定义设置H5模板

VSCode使用技巧快速生成HTML模板_html_03


转义字符解释

\t \" \n都是转义字符,而空格就是单纯的空格,输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
\" 的意思是 双引号
\n 的意思是回车换行

和正则的转义符一样的,本文结束!



本文至此完毕,更多技术文章,尽情期待下一章节!




个人主页: 【 ​​https://weiyigeek.top​​】

博客地址: 【 ​​https://blog.weiyigeek.top ​​】








    VSCode使用技巧快速生成HTML模板_自定义_04



    标签:文件,自定义,VSCode,html,HTML,输入,Tab,模板
    From: https://blog.51cto.com/weiyigeek/5973616

    相关文章

    • 基于springboot+mybatis+mysql+html实现校园宿舍管理系统
      @目录一、系统简介二、系统主要功能界面三、其它系统四、源码下载一、系统简介本系统功能模块主要分为:信息浏览浏览功能、宿舍打卡浏览功能、学生提交信息功能、宿舍搜索......
    • 提升vscode的搜索速度
      在全局搜索速度上vscode比pycharm要慢不少,尤其是对于我们这种近二十年历史的项目代码来说特别明显,所以这里记录一下我是如何加快vscode的搜索速度的。官方的搜索建议htt......
    • 网页特殊符号HTML代码大全
      ´´©©>>µµ®®&&°°¡¡  »»¦¦÷÷¿¿¬¬§§......
    • C#使用Aspose将Word\HTML 转换成PDF文件
      写在前面Aspose这个是收费的,直接使用是有水印的需要用到的dll文件==> Aspose.Words.dll、Aspose.HTML.dll、Aspose.Total.lic(授权文件)我使用的是.NETFramework4.0......
    • 模板引擎Jinja资料
      模板引擎Jinja资料说明githubhttps://github.com/pallets/jinja官方网站https://jinja.palletsprojects.com/......
    • vscode 右键运行php文件到浏览器
      1.安装PHPServer插件2.在需要打开的文件中右键选择PHPServer:Serverproject3.浏览器页面显示......
    • Web前端--HTML+Canvas+Js实现3D魔方小游戏
      一、案列效果二、案列思路1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。 2、我们需要将每一个面旋转到相应的位置上,每一个面的旋转轴都是不......
    • Web前端--HTML+Canvas+Js实现3D魔方小游戏
      一、案列效果二、案例思路1、先将平面上的6个DIV拼接在一起。形成一张类似于3d立方体图形展开的平面图。 2、我们需要将每一个面旋转到相应的位置上,每一个面的旋转......
    • macOS下vscode配置c++万能头文件
      vscode正常情况下是不能使用c++的万能头文件#include<bits/stdc++.h>,那么这会给我们算法刷题带来一定的不便,以下是配置教程,具体可以参考该博文:macOS下使用bits/stdc++.h万......
    • HTML5和CSS3的一些新特性-视屏,语音,表单,选择器,伪类,结构,before和after选择器,iconmoon 字
      HTML5和CSS3的一些新特性-视屏,语音,表单,选择器,伪类,结构,before和after选择器,iconmoon字体使用方法Html5:1.HTML5新增语义化标签<!DOCTYPEhtml><htmllang="en"><head>......