（一）新建html快捷键

当我们想在VSCode中新建html代码时，可以 输入! 然后回车或者Tab即可自动生成一个html文件模板，效果如下：

效果如下：

但是有时候我们需要创建一些个性化的，可能需要大量重复使用的模板，例如我们在学习vue时，每次写一个demo都要重复引入vue.js并且创建new Vue等，很焦躁，这个时候我们就可以通过下面的方式搞一个模板，然后就像我们上面输入“！”触发html原生模板一样，输入我们自定义的触发标志触发我们的个性化自定义模板：

之后会打开一个json文件：

这些注释就是告诉你怎么写模板。。。估计你也看不懂。。。。，先删掉吧。最后就剩下“{}”；

然后我们把下面的模板内容黏贴进“{}”中：

"vue_learn_template":{

        "prefix": "vl",

        "body": [

            "<!DOCTYPE html>",

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

            "<head>",

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

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

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

            "\t<title>Document</title>",

            "\t<script src=\"./lib/vue.js\"></script>",

            "</head>\n",

            "<body>",

            "\t<div id =\"app\"> </div>\n",

            "\t<script>",

            "\t //创建Vue实例,得到 ViewModel",

            "\t var vm = new Vue({",

            "\t\tel: '#app',",

            "\t\tdata: {},",

            "\t\tmethods: {}",

            "\t });",

            "\t</script>",

            "</body>\n",

            "</html>"

        ],

        "description": "vue学习时创建文件的模板" // 模板的描述

    }

转义字符解释：

\t \" \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置 等于 Tab键
\" 的意思是 双引号
\n 的意思是回车换行

最后的json文件内容如下图：

最终使用效果如下：

输入我们自定义的触发标志：

回车之后的效果：

是不是很骚、、、

vsCode创建自己的代码模板的更多相关文章

  1. vscode 创建.net core项目初体验

    微软的virtual studio编辑器那是宇宙第一大编辑器,可惜就是太笨重,遇到性能差一些的电脑设备,简直无法快速的编辑项目. 而vs code编辑器轻便易用,想要编辑哪种项目,只需扩展插件就OK, ...

  2. 使用VSCode创建.NET Core 项目，添加类库间引用

    注:网络上搜索到的关于VsCode创建调试.Net Core 项目的文章都比较老旧,不能完全参考使用,根据网络文章.微软官方文档的指导下,学习并整理此文档,但也大体和文档学习路线相似,主要为记录学习过 ...

  3. .NET Core 1.0 CentOS7 尝试(三、使用VSCode创建一个Web应用)

    参考地址:https://docs.asp.net/en/latest/tutorials/your-first-mac-aspnet.html 一.使用VSCode创建一个目录FirstWebApp ...

  4. flutter vscode创建objc工程

    通过vscode创建flutter工程时,默认创建的是swift项目工程,如果想要修改,可以通过vscode设置默认创建语言 1. Open vscode settings. Under User S ...

  5. Django 使用VScode 创建工程

    一.VSCode 创建Django 工程 VSCode 官方: https://code.visualstudio.com 1 mysite(项目名),创建Django 项目,可以和虚拟环境放在同一目 ...

  6. 【翻译】在Mac上使用VSCode创建你的第一个Asp.Net Core应用

    Setting Up Your Development Environment 设置你的开发环境 To setup your development machine download and inst ...

  7. 使用VSCode创建Asp.Net Core

    前言 .Net Core 2.0已经发布几个月了,惭愧!身为一个开发人员现在才开始接触,有人说有VS这一宇宙第一IDE在,为啥还要用VSCode,为啥?因为我们是程序猿啊!我们是攻城狮啊!我们爱折腾啊 ...

  8. vscode创建net core控制台程序

    vscode近来深受的开发人员的喜爱.在下的前端同事们也纷纷使用vscode.在下就想了我等后端程序员也可以用vscode写C#代码.毕竟是从宇宙第一IDE  ----Visual Studio衍生的 ...

  9. 折腾vue--使用vscode创建vue项目（二）

    1.安装webpack npm install -g webpack 2.安装sass npm install --save-dev sass-loader npm install --save-de ...

随机推荐

  1. 小白_开始学Scrapy__原理

    整体架构 引擎(Scrapy Engine),用来处理整个系统的数据流处理,触发事务. 调度器(Scheduler),用来接受引擎发过来的请求,压入队列中,并在引擎再次请求的时候返回. 下载器(Dow ...

  2. 用python在屏幕上输出一个杨辉三角

    在屏幕上输出一个杨辉三角,代码如下 def yanghui(): L = [1] while True: yield L L.append(0) L = [L[i - 1] + L[i] for i ...

  3. django中解决跨域问题

    -跨域问题 -浏览器的:同源策略,浏览器拒绝不是当前域域返回的数据 -ip地址和端口号都相同才是同一个域 -如何解决: -CORS:跨域资源共享 -简单请求:发一次请求 -非简单请求:非简单请求是发送 ...

  4. iptables详解说明

    Iptabels是与Linux内核集成的包过滤防火墙系统,几乎所有的linux发行版本都会包含Iptables的功能.如果 Linux 系统连接到因特网或 LAN.服务器或连接 LAN 和因特网的代理 ...

  5. c/c++编译器配置(交叉编译重要参数)、交叉编译动态库与as配置、mk初步

    gcc/g++/clang,相当于javac: 了解c/c++编译器的基本使用,能够在后续移植第三方框架进行交叉编译时,清楚的了解应该传递什么参数. clang: clang 是一个C.C++.Obj ...

  6. xss之上传文件的xss,绕过csp,预警机制

    xss1.XSS姿势——文件上传XSS https://wooyun.x10sec.org/static/drops/tips-14915.html总结: 1.1.文件名方式,原理:有些文件名可能反应 ...

  7. zhengrui集训D1-D5笔记

    Day_1 计数 它咕掉了 Day_1 序列数据结构 它咕掉了 Day_2 线性代数 高斯消元\Large{高斯消元}高斯消元 普通版:略 模质数:求逆 模合数:exgcd 逆矩阵\Large{逆矩阵 ...

  8. mapbox展示动态图标

    mapbox-gl通过为marker设置css动画,实现动态闪烁效果,先放个效果图 . 1.主要就是为元素设置一个动画, myfirst动画让元素随时间放大 .marker { /* backgrou ...

  9. 【题解】P1638 逛画展-C++

    原题传送门 思路这道题目可以通过尺取法来完成 (我才不管什么必须用队列)什么是尺取法呢?顾名思义,像尺子一样取一段,借用挑战书上面的话说,尺取法通常是对数组保存一对下标,即所选取的区间的左右端点,然后 ...

  10. 使用C++定义一个万能类型

    分享一个类似于Qt中QVariant类. 目录: 1 类型定义 2 数值操作 3 万能类型包装 4 使用 ——————————————————Begain—————————————————— 类型定义 ...