首页 > 其他分享 >VSCode 自定义代码片段

VSCode 自定义代码片段

时间:2023-02-01 20:13:50浏览次数:42  
标签:body 片段 自定义 VSCode 代码 snippet prefix Vue3

Ctrl+Shift+P 输入“代码片段:配置用户代码片段”:

image

搜索你想要设置的语言代码片段,比如,我设置 .vue 文件的代码片段,选择 vue.json:

image

可以配置多个代码片段,一个片段通过一个 prefix 快速生成:

{
  "Vue3 snippet for TypeScript & Scss": {
    "prefix": "v3ts",
    "body": ["<script setup lang='ts'>\n", "</script>\n", "<template>\n", "</template>\n", "<style scoped lang='scss'>", "</style>"],
    "description": "Vue3 snippet"
  },
  "Vue3 snippet for JavaScript & Scss": {
    "prefix": "v3js",
    "body": ["<script setup lang='js'>\n", "</script>\n", "<template>\n", "</template>\n", "<style scoped lang='scss'>", "</style>"]
  },
  "Vue3 snippet for TypeScript & CSS": {
    "prefix": "v3t",
    "body": ["<script setup lang='ts'>\n", "</script>\n", "<template>\n", "</template>\n", "<style scoped lang='css'>", "</style>"],
    "description": "Vue3 snippet"
  },
  "Vue3 snippet for JavaScript & CSS": {
    "prefix": "v3j",
    "body": ["<script setup lang='js'>\n", "</script>\n", "<template>\n", "</template>\n", "<style scoped lang='css'>", "</style>"]
  }
}

上面定义了四个 prefix,在 .vue 文件中输入 prefix 快速生成代码片段:

image

标签:body,片段,自定义,VSCode,代码,snippet,prefix,Vue3
From: https://www.cnblogs.com/Enziandom/p/17084017.html

相关文章

  • flutter:安装使用自定义的字体(flutter 3.7.0)
    一,在flutter项目中引入字体文件在项目中创建存放字体的文件夹fonts,并把要使用到的字体文件复制到此文件夹下:如图:说明:刘宏缔的架构森林是一个专注架构的博客,地址:htt......
  • 使用validation自定义注解
    第一步在pom中引入<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId><version......
  • 【Java】自定义mybatis
    处理sqlin多条件搜索时单引号双引号问题StringBuilderpidNoZeroIds=newStringBuilder();IntegernumTmp=0;for(ShequLsDatingTypepidNoZero:pidNoZeroLis......
  • cra react18 ts 自定义hooks 单元测试
    首先创建cra项目如果报错说最新的create-react-app版本是5.x,而你的是4.x的话需要先卸载,再重新安装sudonpmuninstall-gcreate-react-appsudonpminst......
  • vscode 配置
    {"window.zoomLevel":2,"[go]":{"editor.insertSpaces":false,"editor.formatOnSave":true,"editor.codeActionsOnSave":{......
  • android自定义adapter之简单写法
      自定义adapter比较常用,很多人还在使用extendsBaseAdapter,然后写一大堆重复的代码,这里是提供一个封装的工具类,把重复的代码都省略掉,让adapter变的简洁一些。  给......
  • 自定义 CircleView - 继承 View 重写 onDraw
    一、画一个圆形的View如图,该圆形控件的宽为match_parent,高150dp,为了看到控件的整体宽高效果,为控件加了背景色即浅绿色:#3300aa00该页面的布局<?xmlversion="1.0"encodi......
  • CompletableFuture使用IOC容器中自定义线程池
    CompletableFuture使用IOC容器中自定义线程池创建自定义线程池,并交给ioc容器管理@ConfigurationpublicclassThreadPoolConfig{@BeanpublicExecutora......
  • mybatisplus test标签 调用自定义或者其他依赖方法进行判空
      @包路径@方法<iftest="@org.apache.commons.lang3.StringUtils@isNotBlank(rulePageRequest.nameOrNumber)">AND(......
  • 自定义上传图片(自定义上传input样式)
    ##1.Html文件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docum......