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 ...
随机推荐
- Java知识系统回顾整理01基础06数组05复制数组
数组的长度是不可变的,一旦分配好空间,是多长,就多长,不能增加也不能减少 一.复制数组 把一个数组的值,复制到另一个数组中 System.arraycopy(src, srcPos, dest, de ...
- WebStrom配置TypeScript开发环境
安装NodeJS node.js下载地址:https://nodejs.org/en/download/ 安装TypeScript npm install typescripot -g 新建tscon ...
- Vue结合Django-Rest-Frameword结合实现登录认证(二)
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...
- devops-jenkins分布式构建
1. devops-jenkins分布式构建 1) 点击系统管理 进入节点管理 2) 点击新建节点 3) 进行节点配置在node节点服务器配置,进行java的安装 [root@nginx-backup ...
- 高效的后端API开发模板-illuminant
概要 整体介绍 补充说明 Q. 有了 prisma 自动生成的 graphql 接口, 为什么还要 rest 接口和 websocket 接口? Q. 为什么要通过 illuminant 加一层反向代 ...
- lumen容器模仿
<?php class Container { private $bindings = []; private $instances = []; public function getClosu ...
- C++ 设置软件激活不息屏
SetThreadExecutionState(ES_CONTINUOUS | ES_SYSTEM_REQUIRED | ES_DISPLAY_REQUIRED);
- 【应用服务 App Service】App Service 中部署Java应用中文乱码现象
问题情形 有时候部署在 Azure App Service的 Java应用会出现乱码 详细日志 无 问题原因 因为 App Service默认的编码为gbk,所以在显示页面或传递中文字符时就会出现乱 ...
- 前端基础——HTML(二)
HTML标签 标题标签<h1>.<h2>.<h3>.<h4>,标题标签之间是不能嵌套的,下一级标题与上级标题之间通过同级 关于书写,下级标题解释说明的是 ...
- ES6里class杂乱随笔
这是一篇乱七八糟的随笔.class是ES6新增的特性,用于解决JavaScript没有类的困惑. --杂谈 ES5及之前,类都是用函数来替代,包括实例. 如: 1 function Person(na ...