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. spring官宣接入deepseek，真的太香了~

    写在前面 经常逛Spring官网(https://docs.spring.io/spring-ai/reference/api/chat/deepseek-chat.html)的小伙伴会发现, Spr ...

  2. Hadoop - HDFS 概述

    什么是HDFS HDFS的优缺点 HDFS的文件块大小 HDFS的写数据流程 HDFS的副本配置策略 HDFS读数据的流程 什么是HDFS HDFS(Hadoop Distributed File S ...

  3. 远程debug

    1. 在idea中添加远程服务器信息 打开应用配置 填写配置 1. 在 + 选择 Remote JVM Debug 2. 在 2 处填写名称,任意 3. 在 3 填写服务器ip 4. 在 4 填写de ...

  4. vuepress-reco搭建与部署指南

    个人博客:槿苏的知识铺 一.前言   在技术飞速发展的今天,高效地编写.维护和呈现文档已成为开发者不可或缺的能力.无论是开源项目.团队协作还是个人知识沉淀,一套结构清晰.体验优雅的文档系统都能显著提升 ...

  5. k8s DCGM GPU采集指标项说明

    dcgm-exporter 采集指标项 https://help.aliyun.com/document_detail/433222.html#section-oin-6mf-6j0 指标 解释 dc ...

  6. 编写你的第一个 Django 应用程序，第4部分

    本教程从教程 3 停止的地方开始.我们是 继续民意调查应用程序,并将专注于表单处理和 减少我们的代码. 一.编写最小表单 让我们更新上一个教程的投票详细信息模板("polls/detail. ...

  7. VSCode 终端中文乱码解决方案

    问题描述 以下为一个简单的 c++ 文件代码,注意中文部分的显示内容 //测试代码 #include <stdio.h> int main() { int y = 10; int coun ...

  8. Electron 客户端开机自启动

    app.setLoginItemSettings 与 auto-launch 对比分析 一.稳定性对比 1. app.setLoginItemSettings 优点:作为Electron官方API,有 ...

  9. 【Java】枚举类和注解

    一.枚举类的使用 1. 枚举类的说明: 枚举类的理解:类的对象只有有限个,确定的.我们称此类为枚举类 当需要定义一组常量时,强烈建议使用枚举类 枚举类的实现: JDK 5.0以前需要自定义 JDK 5 ...

  10. ZKmall开源商城iOS 与安卓双端开发：如何平衡 B2B2C 商城的代码复用与性能

    在ZKmall开源商城的iOS与安卓双端开发中,平衡B2B2C商城的代码复用与性能是一个关键考量.以下是一些建议和实践方法,以实现这一目标: 一.架构分层设计:解耦与复用 1. 分层架构模型 merm ...