zoukankan      html  css  js  c++  java
  • VScode中的自定义模板

    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>",
                "	<meta charset="utf-8">",
                "	<meta http-equiv="X-UA-Compatible" content="IE=edge">",
                "	<meta name="viewport" content="width=device-width, initial-scale=1">",
                "	<title>Title Page</title>",
                "	<!-- Bootstrap CSS -->",
                "	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">",
                "	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->",
                "	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->",
                "	<!--[if lt IE 9]>",
                "	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>",
                "	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>",
                "	<![endif]-->",
                "</head>",
                "<body>",
                "<h1 class="text-center">Hello </h1>",
                "<!-- jQuery -->",
                "	<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",则

     表明,模板调用成功!

    ##### 愿你一寸一寸地攻城略地,一点一点地焕然一新 #####
  • 相关阅读:
    Leetcode:linked_list_cycle
    关于Go语言共享内存操作的小实例
    程序猿如同妓女
    算法——排序算法个人总结
    CentOS 6.4下安装和配置Samba 第2页_服务器应用_Linux公社-Linux系统门户网站
    解决fedora samba在windows下无权限访问的问题
    基于samba实现win7与linux之间共享文件_阳仔_新浪博客
    增加samba用户提示Failed to add entry for user
    Ubuntu+Win7+Samba实现文件共享_Linux教程_Linux公社-Linux系统门户网站
    Mycat 月分片方法
  • 原文地址:https://www.cnblogs.com/johnyang/p/13443115.html
Copyright © 2011-2022 走看看