VSCode--HTML代码片段（基础版，react、vue、jquery）
起因是最近在学习前端，看的网上的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）的更多相关文章
- 200行代码实现简版react🔥
200行代码实现简版react
- vscode自定义代码片段，自定义注释片段（动态时间）
下载vscode 一.打开vscode,点击左下角设置图标. 二.点击用户代码片段 三.点击新建全局代码片段文件 四.输入自定义代码片段配置文件名,例如:vue.json 五.进行代码片段配置示例如下 ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- 项目中解决实际问题的代码片段-javascript方法，Vue方法（长期更新）
总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...
- vsCode设置代码片段
输入vue.json { "Print to console": { "prefix": "vv", "body": [ ...
- vscode的代码片段
一.快速创建一个vue单文件组件 "Create a new Component": { "prefix": "vue", "bo ...
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
- VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入（snippet）
前言 本来分成三篇来写的,但是想了想没必要,大家都是聪明人...简单的东西点一下就晓得了. 基本配置 快捷键自定义(Ctrl+K Ctrl + S) 那个when支持条件表达式返回一个布尔值 支持的快 ...
- VSCode 如何操作用户自定义代码片段
自己写了一些根据自己习惯弄成的自定义代码片段,不喜跳过 很简单,快速过一下,F1,然后输入 snippets vue代码片段 { // Place your snippets for vue here ...
随机推荐
- 简单区间dp
题目链接 对于基本区间dp,设dp[l][r]是区间l到r的最大价值. 我们可以枚举区间的长度,在枚举左端点,判断即可. 当右端点大于n,就break. dp[l][r]=max(dp[l+1][r] ...
- 【4】进大厂必须掌握的面试题-Java面试-jdbc
1.什么是JDBC驱动程序? JDBC驱动程序是使Java应用程序与数据库进行交互的软件组件.JDBC驱动程序有4种类型: JDBC-ODBC桥驱动程序 本机API驱动程序(部分为Java驱动程序) ...
- 多测师讲解 _教师（必备）_高级讲师肖sir
教学心得1.备课要充分,防止第二天上课会出现一些突发情况2.上课要有自己的思路,不一定要按照课件上的讲3.上课气氛比较沉闷的时候,可以适当的开下玩笑,缓解大家的学习氛围4.讲课的时候提醒学员不要做笔记 ...
- 使用Python对植物大战僵尸学习研究
根据上一篇 使用Python读写游戏1 中,使用Python win32库,对一款游戏进行了读内存 操作. 今天来写一下对内存进行写的操作 正文 要进行32位的读写,首先了解一下要用到的几个函数,通过 ...
- MeteoInfoLab脚本示例：SeaWiFS HDF Grid数据
SeaWiFS HDF Grid数据读取,特别是涉及到了文件的众多属性数据的读取,数据取对数后绘图.脚本程序: #Add data file f = addfile('D:/Temp/hdf/S199 ...
- linux centos 03
linux用户权限相关 root用户 相当于qq群的群主 sudo命令 相当于qq群的管理员 普通用户 相当于qq群的 水军 超级用户root的UID是 0 组ID也是 0 普通用户的UID ...
- 扫描仪扫描文件处理-Photoshop批处理内存不足问题解决
一次批处理上千张扫描图片,如果提示内存不足,这时候需要修改操作系统虚拟内存.最小值:512(512M),最大值建议51200(50G). 同时设置让Photoshop使用100%.
- 可变数据类型不能作为python函数的参数
可变数据类型:列表.字典 不可变数据类型:整型.浮点型.字符串.元组 为什么可变数据类型不能作为python函数的参数?请看以下例子: def foo(a=[]): a.append(1) retur ...
- 运行shell文件时提示/bin/bash^M: bad interpreter: 没有那个文件
查看脚本文件是dos格式还是unix格式的几种办法.(1)cat -A filename 从显示结果可以判断,dos格式的文件行尾为^M$,unix格式的文件行尾为$:(2)od -t x1 file ...
- 千万不要往 Shell 里粘贴命令！
对于用惯了 IDE 的程序员来说,在终端里敲命令可能没那么顺手,也记不住那么多复杂的命令.比较偷懒的做法就是网上搜相关的命令,复制到剪贴板往命令行窗口里一贴,完事! 但是这么做有很大的风险,为什么呢? ...