自定义用户代码块是可以给我们的开发带来更高的开发效率的

1.首先找到Vscode左下角的设置图标，选择用户代码片段，此时会让你选择各种类型的代码片段，这里我就拿Vue举个例子，下拉框往下拉，找到 Vue 点击去配配置，点击后会跳转到一个vue.json文件

{// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:"create construct default for Vue3 and scss": {"prefix": "v3scss","body": ["<template>","<div class='$1'>","</div>","</template>","\n","<script setup>","</script>","\n","<style lang='scss' scoped>","</style>","$2"],"description": "这个是Vue3基本结构，同时使用scss预处理"},"create construct default for Vue3 and less": {"prefix": "v3less","body": ["<template>","<div class='$1'>","</div>","</template>","\n","<script setup>","</script>","\n","<style lang='less' scoped>","</style>","$2"],"description": "这个是Vue3基本结构，同时使用less预处理"}
}

注意：这里我是配置了两个代码块，分别是 create construct default for Vue3 and scss 和 create construct default for Vue3 and less 如果你们需要添加多个代码块按照格式添加即可。

那我们要怎么样使用自定义代码块呢，也是非常的简单，在我们的.Vue文件里面，输入我们的关键词 v3scss 和 v3less ，在这里可以看出我们配置的代码块中的 prefix字段就是这只我们的关键词，的确没错！！！

当我们在 vue文件里面输入v3的时候就会出现v3less和v3scss两个提示，同时大家可以观察右边的提示可以知道，这个也是我们代码块中的配置的内容
当我们选择第一个的时候
当我们选择第二个的时候

ok到此配置就结束了...

怎么删除代码快配置呢？
也是非常的简单 And then look down!!!
找到刚刚配置的文件，用户代码片段 -> vue.json文件，即可看到文件路径
如果您不想要使用这个代码块了直接删除（delete）这个文件即可

OVER THINKS EVEYONE!!!!!!!!!!!!!

vscode自定义代码块相关推荐

VSCode生成自定义代码块
关于 VSCode生成自定义代码块如何新建代码片段中的内置变量如何新建第一步: 文件 >> 首选项 >> 用户代码片段,新建一个全局的代码段,以下是本人新建的仅供参考 ...
vscode自定义代码片段（新手交流）
一.为什么要用js代码片段运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
Xcode12.5的自定义代码块的使用和函数注释(学会事半功倍)
Xcode12.5的自定义代码块的使用和函数注释(学会事半功倍) 第一篇快捷键的定义 @property (nonatomic , strong) <#type#> <#name# ...
xcode10 自定义代码块
xcode10 之后自定义代码块已经不是10之前,直接将代码拖拽到代码块列表进行编辑了,10之后自定义代码块的方法,选择代码右键Create Code Snippet 在这里查看代码块然后选中想要自 ...
VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
Xcode自定义代码块
代码块在iOS开发过程中,使用频率相当高,每个人都是用过,比如UIView的初始化方法之一: - (instancetype)init {self = [super init];if (self) { ...
vs2015常用代码块与自定义代码块
常用代码块代码段名描述 #if 该代码段用#if和#endif命令围绕代码 #region 该代码段用#region和#endregion命令围绕代码 ~ 该代码段插入一个析构函数 att ...
VS_Code快捷自定义代码块，助你一臂之力
VS_Code快捷自定义代码块,助你一臂之力作用详情话不多说,上图输入你的代码块文件名(无要求) 编辑文件效果展现作用详情很多时候我们在开发时,经常会用到一些常用的代码块,使得我们需要手打 ...
iOS备忘录之自定义代码块
关键点:<#任意#> 例子: @property (nonatomic, strong) <#Class#> *<#object#>; 一.自定义代码块: 1.将 ...

vscode自定义代码块

自定义用户代码块是可以给我们的开发带来更高的开发效率的

vscode自定义代码块相关推荐

最新文章

热门文章