起因是最近在学习前端，看的网上的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. C++ 异常处理 catch(...)介绍

    转载:https://blog.csdn.net/fcsfcsfcs/article/details/77717567 catch(-)能够捕获多种数据类型的异常对象,所以它提供给程序员一种对异常 对 ...

  2. 头文件.h的作用

    参考链接http://www.cnblogs.com/webcyz/archive/2012/09/16/2688035.html懒得复制过来

  3. appium 环境安装指引

    1.安装Appium-Python-Client Pip install Appium-Python-Client 2.安装nodejs https://nodejs.org/ 安装成功验证:node ...

  4. Croppie -一个Javascript图像Croppie

    下载 Croppie -一个Javascript图像CroppieCroppie -一个Javascript图像Croppie 安装 凉棚:凉棚安装作物 Npm: Npm安装作物 下载: croppi ...

  5. 跨时代的MySQL8.0新特性解读

    目录 MySQL发展历程 MySQL8.0新特性 秒级加列 性能提升 文档数据库 SQL增强 共用表表达式(CTEs) 不可见索引(Invisible Indexes) 降序索引(Descending ...

  6. 感觉学java学到自己的瓶颈期了，各种框架乱七八糟，感觉好乱。该怎么办！？

    通常我们都会有这样的一个疑问! 解决办法 这时候,你需要的是分清条理,重整知识架构 GitHub开源社区有一个这样的项目,我觉得非常好,很适合Java有基础但是想进阶提升的人. 项目简介 本期介绍的开 ...

  7. python之线程池和进程池

    线程池和进程池 一.池的概念 池是用来保证计算机硬件安全的情况下最大限度的利用计算机 它降低了程序的运行效率但是保证了计算机硬件的安全从而让你写的程序能够正常运行 ''' 无论是开设进程也好还是开设线 ...

  8. 0-完全开源的 Vue.js 入门级教程：HelloVue，发车啦！

    本教程基于 Vue.js 2.x 作者:HelloGitHub-追梦人物 欢迎来到 HelloVue-todo-tutorial,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项 ...

  9. .NetCore 异步编程 - async/await

    前言: 这段时间开始用.netcore做公司项目,发现前辈搭的框架通篇运用了异步编程方式,也就是async/await方式,作为一个刚接触的小白,自然不太明白其中原理,最重要的是,这个玩意如果不明白基 ...

  10. python文件管道 下载图集

    # -*- coding: utf-8 -*- import re from time import sleep import scrapy from scrapy.linkextractors im ...