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. Typecho 博客文章评论添加显示 UserAgent（UA）的功能

    本篇文章实现了为 Typecho 博客文章评论添加显示 UserAgent(UA)的功能 本功能可替代 UserAgent 插件,更美观.简洁且好看 效果显示 大概就是这样了,实际效果请看我的评论! ...

  2. 让Typecho支持Emoji表情,解决报错：Database Query Error

    最近在使用一个主题时,看到搭配emoji表情可以让改主题更加美观,于是我就上了,结果在将emoji表情放进去保存的时候报错:Database Query Error,于是问起了度娘.最后的结果是: 在 ...

  3. 小米手机/红米手机解锁BL详细教程

    由于MIUI解锁风控提升,全部小米默认为支持解锁BootLoader的 但需要登录小米账号后,到开发者选项将设备和账号绑定0-1000小时,一般默认为168小时,部分新机实际几百小时,具体绑定时间,我 ...

  4. .NET10 - 预览版1新功能体验（一）

    .NET 10 首个预览版已经在前两天发布,该版本在 .NET Runtime.SDK.libraries.C#.ASP.NET Core.Blazor 和 .NET MAUI 等多个方面都有重大改进 ...

  5. PHP对表单提交特殊字符的过滤和处理方法汇总

    http://www.jb51.net/article/46921.htm PHP关于表单提交特殊字符的处理方法做个汇总,主要涉及htmlspecialchars/addslashes/stripsl ...

  6. 第二届獬豸杯wp

    第二届獬豸杯wp 容器密码:}2N|n_yxdt!G/Ru}|_zdn$@?6@CD8E 计算机和手机部分已经在第二届 獬豸杯-复现 - 萧瑟迪亲传大弟子 - 博客园这里发过了,服务器部分自己又写了一 ...

  7. 震惊！AI 编程竟然让程序员 “失业” 了？真相让人意外

    在科技飞速发展的当下,AI 编程的异军突起无疑成为了整个编程领域乃至社会各界热议的焦点. 去年,全球首个AI程序员Devin横空出世,不仅能独立完成代码开发.修复Bug,甚至能通过阅读技术文档自主学习 ...

  8. golang中容易遇到的错误

    前言 在循环中,有几种情况可能会导致混乱,需要弄清楚. 循环迭代器变量中使用引用 出于效率考虑,我们经常使用单个变量来循环迭代器.但在循环中,每次循环迭代中都会有不同的值,有时候会导致未知的行为. i ...

  9. linux生成ssh密钥

    前言 我们一般使用 PuTTY 等 SSH 客户端来远程管理 Linux 服务器.但是,一般的密码方式登录,容易有密码被暴力破解的问题.所以,一般我们会将 SSH 的端口设置为默认的 22 以外的端口 ...

  10. docker搭建本地仓库

    环境准备: 服务器:9.134.130.35 私有仓库服务器,运行registry容器 客户端:9.208.244.175 测试客户端,用于上传.下载镜像文件 测试搭建本地仓库 mkdir /dock ...