【vscode】 VsCode 代码片段

2023-10-31

1.打开Vscode: 文件->首选项->用户片段(或用快捷键ctrl+shift+p输入snip)
在这里插入图片描述
2.点击用户片段,选择html.json或者新建全局代码片段文件
在这里插入图片描述
3.随后会打开一个json文件设置,可直接将以下代码粘贴复制到自己的文件中(步骤:ctrl+A->ctrl+C->ctrl+V),代码写在最下面了,可直接复制
在这里插入图片描述
4.代码

// react
  "react": {
    "prefix": "react",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "<title>amoureux555</title>",
      "<meta charset=\"UTF-8\">",
      "</head>",
      "<body>",
      "<div id=\"app\">",
      "</div>",
      "<script crossorigin src=\"./react.js\"></script>",
      "<script crossorigin src=\"./reactdom.js\"></script>",
      "<script crossorigin src=\"./babel.js\"></script>",
      "<script type=\"text/babel\">",
      "//1.定义组件",
      "",
      "//2.渲染数据",
      "ReactDOM.render(<组件名/>, document.querySelector('#app'))",
      "</script>",
      "</body>",
      "</html>"
    ],
    "description": ""
  },
  // vue
  "vue": {
    "prefix": "vue",
    "body": [
      "<div id=\"root\">",
      "</div>",
      "<script src=\"http://unpkg.zhimg.com/vue\"></script>",
      "<script>",
      "const vm = new Vue({",
      "    el: \"#root\",",
      "    data: {",
      "    },",
      "    methods: {",
      "    },",
      "})",
      "</script>"
    ],
    "description": ""
  },
  // vue2
  "vue2": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "<div>hello!</div>",
      "</template>",
      "<script>",
      "export default {",
      "    ",
      "}",
      "</script>",
      "<style lang=\"scss\" scoped>",
      "    ",
      "</style>"
    ],
    "description": ""
  }

5.新建一个html文件,输入vue或者react就会有代码提示,回车就可以快速生成代码
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【vscode】 VsCode 代码片段 的相关文章

随机推荐

  • Spring Boot + Vue3前后端分离实战wiki知识库系统<十一>--文档管理功能开发三

    文档内容的显示 在上一次Spring Boot Vue3前后端分离实战wiki知识库系统 十 文档管理功能开发二文档管理模块还差文档的显示木有完成 所以接下来先将这块模块给收尾了 增加单独获取内容的接口 概述 在前端页面文档查询时 只查询了
  • javaMail 使用SMTP邮箱服务器发送邮件

    POP3 SMTP协议 smtp默认端口是 25 接收邮件服务器 pop exmail qq com 使用SSL 端口号995 发送邮件服务器 smtp exmail qq com 使用SSL 端口号465 海外用户可使用以下服务器 接收邮
  • java 用redis如何处理电商平台,秒杀、抢购超卖

    原地址 http blog csdn net u012116196 article details 51782934 一 刚来公司时间不长 看到公司原来的同事写了这样一段代码 下面贴出来 1 这是在一个方法调用下面代码的部分 java vi
  • AutoCAD二次开发_从入门到放弃

    在建筑与设计行业中 CAD有着非常广泛的应用 而其中的很多基本操作无法满足实际需求 容易产生大量的重复性的操作 这种重复性的操作违背了程序设计的思维 因此诞生了入门CAD二次开发的想法 跟大多数程序设计语言一样 在了解CAD二次开发所应用的
  • Kruskal算法&Prim算法的区别

    贪心算法 Kruskal Prim算法的区别 贪心算法是一种对某些求最优解问题的更简单 更迅速的设计技术 贪心算法的特点是一步一步地进行 常以当前情况为基础根据某个优化测度作最优选择 而不考虑各种可能的整体情况 省去了为找最优解要穷尽所有可
  • Linux下搭建Webdav(apache)

    环境 RHEL 5 4 x86 64 创建webdav 1 安装apache yum install httpd y 2 配置webdav vim etc httpd conf httpd conf
  • Ubuntu下用Lean源码编译openwrt及一行命令u盘启动openwrt安装x86硬盘上

    Ubuntu下用Lean源码编译openwrt 源码地址 https github com coolsnowwolf lede 1 首先微软云服务器装好 Ubuntu 64bit 推荐 Ubuntu 20 04 LTS x64 免费一年 i
  • ftell函数的用法(用于获取指针位置)

    ftell函数用于得到文件位置指针当前位置相对于文件首的偏移字节数 下面给出一个简单的例子 cpp view plain copy include
  • 【CKEditor5】CKEditor5相关问题

    问题解决 如图 这个样式没效果 解决方法 因为没有导入css 导入css后 配置style插件就生效了 问 你的css哪来的 答 所有的样式与插件CXEditor5官网都可以找到 配置的css ck ck content font fami
  • 春招Java后端开发面试 2021-10-8

    春招Java后端开发面试 春招Java后端开发面试总结包含了JavaOOP Java集合容器 Java异常 并发编程 Java反射 Java序列化 JVM Redis Spring MVC MyBatis MySQL数据库 消息中间件MQ
  • 常用linux命令记录

    常用linux命令记录 1 常用linux命令基本使用列表 序号 命令 英文 作用 01 ls list 查看当前文件夹的内容 02 pwd print work directory 查看当前所在文件夹 03 cd 目录名 change d
  • 高云FPGA系列教程(5):ARM点灯工程设计

    文章目录 toc 1 ARM核定制 2 ARM核程序设计 3 ARM程序烧写 4 工程下载 本文是高云FPGA系列教程的第5篇文章 前面几篇笔记都是介绍的高云GW1NSR 4C FPGA部分的使用 本篇文章介绍片上ARM Cortex M3
  • MES解决方案 附下载地址

    MES Manufacturing Execution System 即制造企业生产过程执行系统 是一套面向制造企业车间执行层的生产信息化管理系统 是美国AMR公司在90年代初提出的 旨在加强MRP计划的执行功能 把MRP计划同车间作业现场
  • 从源码角度看R语言的format函数

    先提一个问题 请问下面最后的两个逻辑语句的判断 结果是什么 x lt c 1234567 8 12 12345 x11 lt format x scientific FALSE x12 lt format x scientific TRUE
  • 安装多版本node

    一 安装多版本node的原因 在项目开发过程中 不同项目使用的nodejs版本不同 有时会因为node版本过高或太低 导致报错 解决方式 利用nvm进行管理 本文使用此种方式 配置环境变量 如理解环境变量可自行配置 二 利用nvm进行管理
  • router-link标签Cannot read property '$route' of undefined"报错解决方法

    报错代码 div class card mb 3 px 3 div
  • vue渲染页面的流程_Vue中DOM渲染的过程

    vue中dom渲染过程 1 响应式 监听data属性的getter setter 2 模板编译 模板到render函数再到vnode 模板不是html 有指令 插值 js表达式 能够实现循环 判断 html是标签语言 只有js才能实现循环判
  • vision transformer

    一 网络构建 import torch from torch import nn from functools import partial 1 patch embedding img size 224 输入图像的宽高 patch size
  • win10进入安全模式的方法(F8不管用/开不开机)

    win10默认不能进入安全模式 这时候开机黑屏怎么办 下面介绍强制进入安全模式的方法 1 关机情况下 按开机键开机 等到出现徽标 下图 这时候长按开机键强制关机 2 再次开机 出现徽标 再次强制强制关机 重复三次 直到出现 正在准备自动修复
  • 【vscode】 VsCode 代码片段

    1 打开Vscode 文件 gt 首选项 gt 用户片段 或用快捷键ctrl shift p输入snip 2 点击用户片段 选择html json或者新建全局代码片段文件 3 随后会打开一个json文件设置 可直接将以下代码粘贴复制到自己的