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

一：前言

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

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

二：配置步骤

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

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

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

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

 2、新增或删除文件

        创建：

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

         删除：

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

3、代码

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

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

4、使用配置文件 

        在页面内输入之前定义的快捷键就可以了，然后会有提示，按回车则可以生成之前所定义的代码。

三：常用快捷键

        高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。

        PS.以下以Windows为主，windows的 Ctrl，mac下换成Command就行了

1、对于 行 的操作：​​​​​​​

• 重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行
• 删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行
• 移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行
• 复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行
• ctrl + z 回退

2、对于 词 的操作：

• 选中一个词：ctrl + d

3、搜索或者替换：

• ctrl + f ：搜索
• ctrl + alt + f： 替换
• ctrl + shift + f：在项目内搜索
• 通过Ctrl + ` 可以打开或关闭终端
• Ctrl+P 快速打开最近打开的文件
• Ctrl+Shift+N 打开新的编辑器窗口
• Ctrl+Shift+W 关闭编辑器
• Home 光标跳转到行头
• End 光标跳转到行尾
• Ctrl + Home 跳转到页头
• Ctrl + End 跳转到页尾
• Ctrl + Shift + [ 折叠区域代码
• Ctrl + Shift + ] 展开区域代码
• Ctrl + / 添加关闭行注释
• Shift + Alt +A 块区域注释

四：结尾

        合理的使用好配置文件，是提高代码效率的一个很重要的手段。因此各位小伙伴可以根据自己的需求来写属于自己的代码段。可以登录账号来保存，这样在别的电脑进行开发时只需要登录账号，同步一下就可以使用了。

        好啦本文就到此为止，希望能够对各位小伙伴有所帮助哦。