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

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

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

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

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

  1. {
  2. "!": {
  3. "prefix": "!", // 触发的关键字 输入!按下tab键
  4. "body": [
  5. "<!DOCTYPE html>",
  6. "<html lang=\"en\">",
  7. "",
  8. "<head>",
  9. " <meta charset=\"UTF-8\">",
  10. " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  11. " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  12. " <title>Document</title>",
  13. " <style>",
  14. " #app{",
  15. "",
  16. " }",
  17. " </style>",
  18. "</head>",
  19. "",
  20. "<body>",
  21. " <div id=\"app\"></div>",
  22. " <script>",
  23. " </script>",
  24. "</body>",
  25. "",
  26. "</html>",
  27. ],
  28. "description": "common components"
  29. },
  30. "jh": {
  31. "prefix": "jh", // 触发的关键字 输入jh按下tab键
  32. "body": [
  33. "<!DOCTYPE html>",
  34. "<html lang=\"en\">",
  35. "",
  36. "<head>",
  37. " <meta charset=\"UTF-8\">",
  38. " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  39. " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  40. " <title>Document</title>",
  41. " <style>",
  42. " #app{",
  43. "",
  44. " }",
  45. " </style>",
  46. "</head>",
  47. "",
  48. "<body>",
  49. " <div id=\"app\"></div>",
  50. " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js\"></script>",
  51. " <script>",
  52. " </script>",
  53. "</body>",
  54. "",
  55. "</html>",
  56. ],
  57. "description": "jquery components"
  58. },
  59. "vh": {
  60. "prefix": "vh", // 触发的关键字 输入vh按下tab键
  61. "body": [
  62. "<!DOCTYPE html>",
  63. "<html lang=\"en\">",
  64. "",
  65. "<head>",
  66. " <meta charset=\"UTF-8\">",
  67. " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  68. " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  69. " <title>Document</title>",
  70. "</head>",
  71. "",
  72. "<body>",
  73. " <div id=\"app\"></div>",
  74. " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js\"></script>",
  75. " <script>",
  76. " var vm=new Vue({",
  77. " el:'#app',",
  78. " template:`<div></div>`,",
  79. " data(){",
  80. " return {",
  81. "",
  82. " }",
  83. " },",
  84. " methods:{",
  85. "",
  86. " }",
  87. " });",
  88. " </script>",
  89. "</body>",
  90. "",
  91. "</html>",
  92. ],
  93. "description": "vh components"
  94. },
  95. "rh": {
  96. "prefix": "rh", // 触发的关键字 输入rh按下tab键
  97. "body": [
  98. "<!DOCTYPE html>",
  99. "<html lang=\"en\">",
  100. "",
  101. "<head>",
  102. " <meta charset=\"UTF-8\">",
  103. " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  104. " <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  105. " <title>Document</title>",
  106. " <style>",
  107. " #app{",
  108. "",
  109. " }",
  110. " </style>",
  111. "</head>",
  112. "",
  113. "<body>",
  114. " <div id=\"app\"></div>",
  115. " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js\"></script>",
  116. " <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js\"></script>",
  117. " <script>",
  118. " ReactDOM.render(<div>hello,react</div>, document.getElementById('app'))",
  119. " </script>",
  120. "</body>",
  121. "",
  122. "</html>",
  123. ],
  124. "description": "react components"
  125. },
  126. }

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. Java知识系统回顾整理01基础06数组05复制数组

    数组的长度是不可变的,一旦分配好空间,是多长,就多长,不能增加也不能减少 一.复制数组 把一个数组的值,复制到另一个数组中 System.arraycopy(src, srcPos, dest, de ...

  2. WebStrom配置TypeScript开发环境

    安装NodeJS node.js下载地址:https://nodejs.org/en/download/ 安装TypeScript npm install typescripot -g 新建tscon ...

  3. Vue结合Django-Rest-Frameword结合实现登录认证(二)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...

  4. devops-jenkins分布式构建

    1. devops-jenkins分布式构建 1) 点击系统管理 进入节点管理 2) 点击新建节点 3) 进行节点配置在node节点服务器配置,进行java的安装 [root@nginx-backup ...

  5. 高效的后端API开发模板-illuminant

    概要 整体介绍 补充说明 Q. 有了 prisma 自动生成的 graphql 接口, 为什么还要 rest 接口和 websocket 接口? Q. 为什么要通过 illuminant 加一层反向代 ...

  6. lumen容器模仿

    <?php class Container { private $bindings = []; private $instances = []; public function getClosu ...

  7. C++ 设置软件激活不息屏

    SetThreadExecutionState(ES_CONTINUOUS | ES_SYSTEM_REQUIRED | ES_DISPLAY_REQUIRED);

  8. 【应用服务 App Service】App Service 中部署Java应用中文乱码现象

    问题情形 有时候部署在 Azure  App Service的 Java应用会出现乱码 详细日志 无 问题原因 因为 App Service默认的编码为gbk,所以在显示页面或传递中文字符时就会出现乱 ...

  9. 前端基础——HTML(二)

    HTML标签 标题标签<h1>.<h2>.<h3>.<h4>,标题标签之间是不能嵌套的,下一级标题与上级标题之间通过同级 关于书写,下级标题解释说明的是 ...

  10. ES6里class杂乱随笔

    这是一篇乱七八糟的随笔.class是ES6新增的特性,用于解决JavaScript没有类的困惑. --杂谈 ES5及之前,类都是用函数来替代,包括实例. 如: 1 function Person(na ...