（一）新建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. 理解JVM之对象的生命周期

    1.对象的创建 1) 当虚拟机遇到一条new的指令时,首先将去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载,解析和初始化过. 2) 在类加载检查通 ...

  2. 爬虫的新模块pyppeteer的使用

    安装 python3 -m pip install pyppeteer 最好是py3.5+ 手动安装 你懂的,天朝网络环境很复杂,如果要用pyppeteer自己绑定的chromium,半天都下载不下来 ...

  3. (17)for循环

    # 把容器里数据拿出来的这个过程 可以叫遍历 迭代 循环 listvar = [1, 2, 3, 4, 5] print(len(listvar)) # 算出列表里面所有元素的个数,len是计算长度 ...

  4. RHEL7启动到命令模式

    打开/etc/inittab 文件会看到以下信息 从中知道想要启动后就进入完整的多用户文本模式(命令行模式) 以root权限执行: ln -sf /lib/systemd/system/multi-u ...

  5. 从c到c++<三>

    引用是给一个变量起别名回顾下变量,它有这两个属性:名称和空间.而引用不是变量,它仅仅只是变量的别名,没有自己的独立空间,需要与它所引用的变量共享空间,所以对于引用所做的改变实际上是对它所引用的变量的改 ...

  6. ocr 识别 字体大小问题？

    字体大 字体小?????? ???????????

  7. 阿里云申请免费SSL证书，并配置到Tomcat，实现https访问

    第一步:阿里云免费https证书安装  https://jingyan.baidu.com/article/fdffd1f8619481f3e98ca196.html 第二步:阿里云申请免费SSL证书 ...

  8. ZrOJ #878. 小K与赞助 (网络流)

    傻逼最大费用流: . 两棵树分别流,最后汇合. CODE #include <bits/stdc++.h> using namespace std; #define pb push_bac ...

  9. UVA1426 Discrete Square Roots

    思路:\(exgcd\) 提交:\(2\)次 错因:输出格式错误OTZ 题解: 求:\(r^2 ≡ x \mod N , 0 \leq r < N\),并且题目会给出 \(x,N\) 和一个合法 ...

  10. 002_linux之点灯（汇编深度解析）

    1.      开发板采用韦山东的开发板 2.      芯片CPU三星S3C2440A 3.  控制引脚:GPF4 4.  linux操作系统 5. 芯片手册下载地址:https://eyun.ba ...