起因是最近在学习前端，看的网上的demo也是在react、vue、jquery之间穿插，为了方便一键生成html模板（懒）写demo，有了以下折腾。

本人使用的前端编辑工具是vscode（方便、懒），可配置成中文界面，很友好，丰富的第三方插件，真香。以下是基于vscode设置的html代码片段：

1. 文件->首选项->用户代码片段

2. 输入html，打开第一个html.json文件

3.编辑json文件，内容如下。unpkg被墙，这里使用的是cdn镜像（https://cdnjs.com/）

{

    "!": {

        "prefix": "!", // 触发的关键字 输入!按下tab键

        "body": [

            "<!DOCTYPE html>",

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

            "",

            "<head>",

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

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

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

            "    <title>Document</title>",

            "    <style>",

            "    #app{",

            "",

            "    }",

            "    </style>",

            "</head>",

            "",

            "<body>",

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

            "    <script>",

            "    </script>",

            "</body>",

            "",

            "</html>",

        ],

        "description": "common components"

    },

    "jh": {

        "prefix": "jh", // 触发的关键字 输入jh按下tab键

        "body": [

            "<!DOCTYPE html>",

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

            "",

            "<head>",

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

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

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

            "    <title>Document</title>",

            "    <style>",

            "    #app{",

            "",

            "    }",

            "    </style>",

            "</head>",

            "",

            "<body>",

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

            "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js\"></script>",

            "    <script>",

            "    </script>",

            "</body>",

            "",

            "</html>",

        ],

        "description": "jquery components"

    },

    "vh": {

        "prefix": "vh", // 触发的关键字 输入vh按下tab键

        "body": [

            "<!DOCTYPE html>",

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

            "",

            "<head>",

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

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

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

            "    <title>Document</title>",

            "</head>",

            "",

            "<body>",

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

            "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js\"></script>",

            "    <script>",

            "        var vm=new Vue({",

            "            el:'#app',",

            "            template:`<div></div>`,",

            "            data(){",

            "                return {",

            "",

            "                }",

            "            },",

            "            methods:{",

            "",

            "            }",

            "        });",

            "    </script>",

            "</body>",

            "",

            "</html>",

        ],

        "description": "vh components"

    },

    "rh": {

        "prefix": "rh", // 触发的关键字 输入rh按下tab键

        "body": [

            "<!DOCTYPE html>",

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

            "",

            "<head>",

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

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

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

            "    <title>Document</title>",

            "    <style>",

            "    #app{",

            "",

            "    }",

            "    </style>",

            "</head>",

            "",

            "<body>",

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

            "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js\"></script>",

            "    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js\"></script>",

            "    <script>",

            "    ReactDOM.render(<div>hello,react</div>, document.getElementById('app'))",

            "    </script>",

            "</body>",

            "",

            "</html>",

        ],

        "description": "react components"

    },

}

4. 保存，新建一个html文件，输入（!/jh/vh/rh），敲tab键，自动生成模板。

亲测可用，完结。

VSCode--HTML代码片段（基础版，react、vue、jquery）的更多相关文章

  1. 200行代码实现简版react🔥

    200行代码实现简版react

  2. vscode自定义代码片段，自定义注释片段（动态时间）

    下载vscode 一.打开vscode,点击左下角设置图标. 二.点击用户代码片段 三.点击新建全局代码片段文件 四.输入自定义代码片段配置文件名,例如:vue.json 五.进行代码片段配置示例如下 ...

  3. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  4. 项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）

    总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...

  5. vsCode设置代码片段

    输入vue.json { "Print to console": { "prefix": "vv", "body": [ ...

  6. vscode的代码片段

    一.快速创建一个vue单文件组件 "Create a new Component": { "prefix": "vue", "bo ...

  7. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  8. VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入（snippet）

    前言 本来分成三篇来写的,但是想了想没必要,大家都是聪明人...简单的东西点一下就晓得了. 基本配置 快捷键自定义(Ctrl+K Ctrl + S) 那个when支持条件表达式返回一个布尔值 支持的快 ...

  9. VSCode 如何操作用户自定义代码片段

    自己写了一些根据自己习惯弄成的自定义代码片段,不喜跳过 很简单,快速过一下,F1,然后输入 snippets vue代码片段 { // Place your snippets for vue here ...

随机推荐

  1. DMZ是什么

    刚刚接触安全域,实在是佩服自己真的是菜,,,啥都不懂,看看过段时间能有多大进步吧... 概念 DMZ:它是一个缓冲区,一个隔离区.它是位于两台防火墙之间的区域,相对于INTER网来说安全级别高一些,但 ...

  2. Open CV leaning

    刚接触Open CV 几个比较好的介绍: OpenCV学习笔记:https://blog.csdn.net/yang_xian521/column/info/opencv-manual/3 OpenC ...

  3. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  4. Vue3实战系列：结合 Ant-Design-of-Vue 实践 Composition API

    Vue 3 出来之后,很多人有如下想法,"又要学新东西啦"."我学不动了"等等. 但是事物总有它的两面性,前端知识更新的很快,利好勤奋好学的同学.计算机行业的迭 ...

  5. .net core中的那些常用的日志框架（NLog篇）

    前言 咱们上回讲到,.net core中内置的Logging日志框架的使用,以及浅显的讲解,接下来,给大家介绍一个第三方日志框架(NLog). NLog简介 NLog是适用于各种.NET平台(包括.N ...

  6. 左叶子之和(sum-of-left-leaves)

    LeetCode题目--左叶子之和(sum-of-left-leaves) 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 ...

  7. EV加密播放器的分析过程+过虚拟机方法

    开启了OD载入播放器进行分析,发现如下问题:1.播放器会进行翻录检测2.防止虚拟机播放3.视频播放后,可直接对内存操作提取出源视频翻录检测:主要是对指定的文件名或进程名对比虚拟机检测:是针对虚拟机特征 ...

  8. ASP.NET Core 3.1 Razor 视图预编译、动态编译

    1.安装NuGet包 Install-Package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation 2.Startup.cs 配置 public ...

  9. centos8上使用lsblk查看块设备

    一,查看lsblk命令所属的rpm包 [root@yjweb ~]# whereis lsblk lsblk: /usr/bin/lsblk /usr/share/man/man8/lsblk.8.g ...

  10. cookie和session可以参考的文章

    cookie和session可以参考的文章 cookie:http://www.lemfix.com/topics/5session:https://www.cnblogs.com/nickjiang ...