vscode用户代码片段

628 阅读2分钟
前言

代码片段也叫snippets,在使用VsCode开发中我们安装过各种插件来提升我们的工作效率,比如react开发者比较熟悉的rcc命令,直接生成class组件格式代码,方便我们跳过写这些重复格式的工作。

假如我们想根据自己的开发习惯编写自己的代码片段要如何做?VsCode当然也是支持的。

创建代码片段
code(文件) => 首选项 => 用户代码片段 => 选择相应文件或者自己新建全局文件

image-20210420105953938.png

  • 类型一:全局作用域 这种类型的代码块是创建在vscode软件内部的文件。是跟随这当前安装的vscode这个软件的,不会随着项目的关闭而失效,会一直存在。
  • 类型二:文件夹作用域 这种类型的代码块是创建在某个文件下.vscode这个隐藏文件夹中的,这个代码块只适用于当前文件夹,出了这个文件夹就不能使用这个代码块了
  • 类型三:特定文件类型作用域 这种类型的代码块跟全局作用域的文件路径是一致的,都是创建在了vscode中,会一直存在。但是这种代码块只适合于你指定的文件类型。比如:如果你创建的是JavaScript类型,那这个代码块就不能再vue文件中使用。 注:三种类型的代码块书写规范都是一致的
文件参数说明

scope:该代码片段的使用范围,如果为空或省略,则该代码片段将适用于所有语言

prefix:命令使用快捷键

body:代码片段内容

description:对于代码片段的描述

0为代码段生成后光标所在位置,0 为代码段生成后光标所在位置,1 $2为占位符

  • 创建新文件-全局作用域

11111.png

如何增加我们自己的代码片段呢?按照Example格式,我们在最末行增加自己的代码

"import from":{
		"prefix": "imp",
		"body": [
			"import $1 from '$2';"
		],
		"description": "import from"
	}

保存之后在我们文件空白处使用就可以生成我们自己的代码片段了。

222.png

删除

当我们想要删除我们新建的全局文件怎么办!

首先找到文件的路径,根据路径找到文件,然后删除就好了。

333.png