VSCode配置用户代码段以及常用快捷键汇总

暴怒的代码

已于 2023-11-22 11:38:42 修改

阅读量1.2k

点赞数 4

分类专栏： # JavaScript 文章标签： vscode ide 编辑器

于 2023-11-22 11:32:20 首次发布

本文链接：https://blog.csdn.net/c18559787293/article/details/134549209

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一：前言

VSCode 是一款由微软开发的轻量级编辑器，可以安装插件和兼容多种语言。其本身已经是目前前端开发所使用的主流软件。那么在开发过程中，我们经常要写很多重复性的代码，比如当你去新建一个 .vue 页面的时候，往往是空白的，需要去手动敲各种标签等进行初始化。这将在一定程度上占用我们的有效开发时间。

因此，在VSCode中，我们可以配置自己的用户代码段，给一些相同的模板起一个名字，我们只需要在页面中输入名字按回车，则可以自动生成该代码段。这样的简洁性将会有一个很大的提高，接下来让我们来看看如何去定义用户代码段吧。

二：配置步骤

1、打开用户代码段的三种方式

第一种：进入 VSCode 编辑器，然后点击左上角的文件 - 首选项 - 配置用户代码段

第二种：编辑器的左下角可以直接打开

第三种：快捷键 ctrl + shift + p 输入 configure User

2、新增或删除文件

创建：

这里可以直接输入你想要的文件名，当不存在的时候会自动创建

删除：

在左侧目录右键文件，点击在文件资源管理器中显示。进入目录删除或者重命名即可。

3、代码

在新增的页面中输入代码即可，比如以下代码就是配置一个初始化 vue3

	"vue3模板": { //快捷输入的时候显示的提示
		"prefix": "vue3",//输入的前缀，就是输入这个会有提示
		"description": "vue3模板",//描述
		"body": [//这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup>",
			"",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"</style>",
			""
		]
	},