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. mysql数据库表如何设计

    单表数据量 所有表都需要添加注释,数据量建议控制在3000万以内 不保存大字段数据 不在数据库中存储图片.文件等大数据 表使用规范 拆分大字段和访问频率低的字段,分离冷热数据 单表字段数控制在 20 ...

  2. Pm2安装以及守护傻妞机器人进程教程

    本教程以centos7为例子,其他系统可自行替换 一.安装 1.安装nodejs yum install nodejs 2.安装pm2 cd /root && npm install ...

  3. Linux - centos6.6升级openssh9.7p1

    一.注意事项 1.任何会被修改的配置文件都要提前备份 2.每一步操作都要记录 3.提前预演,知道可能遇到的问题,以及对应的解决方法,能够在生产环境上升级时,更快完成操作. 4.一开始用来操作的ssh会 ...

  4. MySQL数据库datetime类型不能为空值的问题

    修改mysql的配置文件:my.ini 将其只的: sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUT ...

  5. 【译】Visual Studio 中新的强大生产力特性

    有时候,生活中的小事才是最重要的.在最新版本的 Visual Studio 中,我们增加了一些功能和调整,目的是让您脸上带着微笑,让您更有效率.这里是其中的一些列表,如果您想要完整的列表,请查看发行说 ...

  6. [Qt 基础-03] QRadioButton

    QRadioButton基础 本文主要根据QT官方帮助文档以及日常使用,简单的介绍一下QRadioButton的功能以及使用 文章目录 QRadioButton基础 简介 autoExclusive ...

  7. Qt 重载QComboBox，实现右侧删除键

    文章目录 Qt 重载QComboBox,实现右侧删除键 前言 方案 设置下拉箭头图标 设置QComboBox内容为空 自定义showPopup函数 定位鼠标 屏蔽鼠标右键 最终控制下拉代码 效果图 代 ...

  8. 用于线程同步的Interlocked系列函数主要有哪些

    原子访问 通过Interlocked系列函数是 Windows API 提供的一组原子操作函数,用于在多线程环境中安全地操作共享变量.当我们执行这些Interlocked系列函数的时候 ,函数会对总线 ...

  9. 把postgreSQL的表导入SQLite

    万能的互联网,一查一大堆废话,几乎搞不定.现将查到的资料结合实践概况如下,对不对也不清楚,反正可以跑了. 1.把PostgreSQL的表SQL语句复制出来 CREATE TABLE "mai ...

  10. 帮客户解决基于surging的物流速运网关内存泄漏问题

    一.概述 有surging企业客户找到我,系统已经在线上环境运行,在使用过程中碰到内存不能释放的问题,每次都要和客户打招呼进行重启造成很坏的影响,问能不能彻底解决掉,然后我打包票可以解决,解决不了不收 ...