1.背景

在用bootstrap框架，写前端代码时，由于每个页面都有固定的模板格式，比如都包含CDN等，所以在每次写代码的时候，都要重复写这些，效率比较低下。幸运的是，VScode中可以编辑各个语言的自定义模板，编辑完毕后，只需要写出“prefix"部分，就可以自动补全自定义编辑的部分。

2.具体操作

在VScode中，file--preferences--user snippets，然后选择html，显示如下：

也可以粘贴做好的：

    "Print to console": {

        //快捷键

        "prefix": "bs3-HTML5",

        //bootstrap的模块代码

        "body": [

            "<!DOCTYPE html>",

            "<html lang=\"\">",

            "<head>",

            "\t<meta charset=\"utf-8\">",

            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",

            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",

            "\t<title>Title Page</title>",

            "\t<!-- Bootstrap CSS -->",

            "\t<link href=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">",

            "\t<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->",

            "\t<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->",

            "\t<!--[if lt IE 9]>",

            "\t<script src=\"https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js\"></script>",

            "\t<script src=\"https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js\"></script>",

            "\t<![endif]-->",

            "</head>",

            "<body>",

            "<h1 class=\"text-center\">Hello </h1>",

            "<!-- jQuery -->",

            "\t<script src=\"https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\"></script>",

            "<!-- Bootstrap JavaScript -->",

            "<script src=\"https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\"></script>",

            " </body>",

            "</html>"

        ],

        //说明简介

        "description": "Bootstrap-3.3.7 "

然后，在空的html中，敲出prefix下的代码，即

”bs3-HTML5“，

点击“bs3-HTML5"，则

 3.拓展

由此想到，能不能在python中自定义一些模板，比如pycomcad中，常用的几个导入语句？

prefix是”pycomcad",在空py文件中，敲出"pycomcad"，点击“pycomcad"，则

表明，模板调用成功！

VScode中的自定义模板的更多相关文章

  1. 在vscode中，自定义代码片段，例vue组件的模板

    1---- 2----  输入vue,  选 vue.json 3----  在vue.json中编辑, 有说明 a.  tab符,要用空格, 也可以转义 4----   新建vue文件, 输入自定义 ...

  2. 如何在IDEA中自定义模板、快速生成完整的代码？

    文章目录 1.修改现有的模板 2.自定义模板 3.在代码中测试自定义模板 1.修改现有的模板 打开设置面板- settings 2.自定义模板 选择定义模板组 选择创建模板 define 代表应用的范 ...

  3. vim中如何引用自定义模板文件

    我们在使用vim新建文件时可以引用自定义模板,来避免重复的数据格式处理花费太多时间. 实现方法很简单,只需要2步即可:1. 在.vim/template目录放入自己的模板文件(如shellconfig ...

  4. JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  5. python---django中模板渲染（csrf令牌使用，自定义模板函数）

    使用终端,可以更方便的去实验,但是没有提示信息: 在项目目录下: D:\MyPython\day23\HelloWorld>python manage.py shell 开始实验: >&g ...

  6. Django自定义模板

    定义simple_tag步骤 一.创建templatetags文件 首先在app下创建templatetags文件:名字不许叫这个,不能改变. 二.在文件中创建一个py文件 文件名自定义 三.在创建的 ...

  7. 学习CodeIgniter框架之旅（一）自定义模板目录

    在常用的框架本身都已经做好了分层和目录结构,但这在很多时候不满足项目的需求甚至在某些情况下变得不合理,因此很多时候需要自定义目录结构,在此就看看如果在CodeIgniter框架中自定义模板目录: 在C ...

  8. .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（三）

    阅读目录: 7.HtmlHelper.HtmlHelper<T>中的ViewModel的类型推断 8.控制ViewModel中的某个属性的呈现(使用PartialView部分视图细粒度控制 ...

  9. 使用requireJS，backboneJS，和underscoreJS完成自定义模板封装

    使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...

  10. DISCUZ 自定义模板

    DISCUZ 自定义模板 模板安装和维护 安装新模板 将模板template打包放在对应目录:template/ 后台 -> 界面 -> 风格管理 , 安装模板 后台 -> 界面 - ...

随机推荐

  1. QT5笔记：5. QtCreator 的快捷键

    常用的快捷键: F4 同名头文件和源文件之间切换 F2 声明和定义切换 Ctrl + / 注释 F10\F11 单步调试

  2. AI与.NET技术实操系列（二）：开始使用ML.NET

    引言 在当今技术飞速发展的时代,机器学习(Machine Learning, ML)已成为推动创新和变革的核心力量.从智能推荐系统到自动化决策工具,ML的应用无处不在,深刻影响着我们的生活和工作方式. ...

  3. .NET周刊【2月第4期 2025-02-23】

    国内文章 [翻译] 为什么 Tracebit 用 C# 开发 https://www.cnblogs.com/liuliu-66/p/-/why-tracebit-is-written-in-c-sh ...

  4. python excel 读取：如何读取符合多个条件的记录【出差、外出、调休、年假】

    if 语句结合or 实现:读取所有出差.外出.调休.年假的记录 if '出差' in str(c_cell) or '外出' in str(c_cell) or'调休' in str(c_cell) ...

  5. WebScoket-服务器客户端双向通信

    WebScoket学习笔记 1. 消息推送常用方式介绍 轮询 浏览器以指定的时间间隔向服务器发出HTTP请求,服务器实时返回数据给浏览器. 长轮询 浏览器发出ajax请求,服务器端接收到请求后,会阻塞 ...

  6. JMeter 定义 User 随机数变量无效

    Jmeter 定义 User 随机数变量无效 随机数方法: RandomString10 ${__RandomString(10,ABCDEFGHIJKLMNOPQRSTUVWXYZ)} Random ...

  7. linux php安装mongodb 扩展

    下载扩展 首先从这个网站选择适合你当前 php 版本的的 mongodb 扩展 https://pecl.php.net/package/mongodb wget https://pecl.php.n ...

  8. Mac port 443: Connection refused

    MAC 安装brew raw.githubusercontent.com port 443: Connection refused 本人亲自认证过,踩过多种方案,最终认证的解决方案 原因:由于某些你懂 ...

  9. wincurl：一款基于HTTP协议的轻量级web资源抓取和上传工具

    编写web程序经常要进行接口调测,通常我们会使用curl或者postman等工具,通过这些工具可以方便的发送GET或POST请求来验证接口的正确与否. 对于复杂的接口业务,我们可以通过这些工具构造po ...

  10. Oralcle11.2.0.1.0使用出现的问题

    问题1:oracle中监听程序当前无法识别连接描述符中请求服务 解决方法1: 查看oracle的服务是否开启,计算机->管理->服务和应用程序->服务,如下图 解决方法2: 找到or ...