起因是最近在学习前端,看的网上的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++里的程序 GetDlgItem(IDC_EDIT_INPUTFILE) ->EnableWindow(TRUE)

    转载:https://zhidao.baidu.com/question/654519209423407765.html GetDlgItem(IDC_EDIT_INPUTFILE) ->Ena ...

  2. mycat的privileges标签

    参考https://blog.csdn.net/tornadojava/article/details/54948662 privileges标签 对用户的 schema以及表进行精细化的DML权限控 ...

  3. 多测师讲解_007 hashlib练习

    #Hash,译做"散列",也有直接音译为"哈希"的.把任意长度的输入,通过某种hash算法,变换成固定长度的输出,该输出就是散列值,也称摘要值.该算法就是哈希函 ...

  4. Mac快捷键整理(随时更新)

    一.文字编辑 快捷键 含义 解释 control + A 到行首 A没找到对应单词,暂时认为A是字母表的开始 control + E 到行尾 E是end的缩写

  5. CLion 控制台输出内容乱码问题的解决方法

    问题再现 #include "stdio.h" #include "stdlib.h" int main() { printf("嘤嘤嘤") ...

  6. Get提交方式中文乱码

    Get提交方式中文乱码 今天在servlet使用中,在Get方法中获取提交的中文参数,发现是乱码,我用的是Tomcat7. 在Tomcat9中: get方式的参数是放在请求头中,而Tomcat9对请求 ...

  7. python去除特殊字符

    去除数字,特殊字符,只保留汉字 ? 1 2 3 4 5 6 7 8 import re    s = '1123*#$ 中abc国' str = re.sub('[a-zA-Z0-9'!"# ...

  8. Navicat Premium_11.2.7简体中文版 破解版本 windows版本 失效

    亲测可用 自己一直在用的 https://pan.baidu.com/s/1VVKKQoIKVB0BgNXBK4YTrQ

  9. BGP - 不同 AS 间运行的协议

    在之前介绍的网络场景中,ERGRP,OPSF,RIP 等都是运行在单独一个 AS(自治系统之间).这些协议统称为 IGP - 内部网关协议 ,目的主要是为自治系统内发现邻居和计算路由,从而找到合适的路 ...

  10. 《Graph-Based Reasoning over Heterogeneous External Knowledge for Commonsense Question Answering》论文整理

    融合异构知识进行常识问答 论文标题 -- <Graph-Based Reasoning over Heterogeneous External Knowledge for Commonsense ...