VSCode

基本概念

VSCode是由微软开发的免费、开源的代码编辑器，支持 Windows、macOS 和Linux 系统。自 2015 年发布以来，VSCode 凭借其轻量、高效和强大的扩展性，迅速成为开发者喜爱的工具

界面介绍

• 顶部的菜单：有常用的代码编译器功能

• 左侧的工具栏：从上往下依次是

  1. 文件管理：管理代码文件夹内部的所有代码文件
  2. 搜索替换：全局查找和替换
  3. 代码库：远程代码仓库
  4. 调试模式：用于代码的调试
  5. 扩展：进行自定义插件的安装
  6. 账户：可以将我们自定义的拓展配置保存到云端，在不同电脑登陆相同账户配置数据可以迁移过来
  7. 设置：设置中有一个常用的功能：命令面板，可以通过Ctrl+Shift+P快捷打开命令面板（就是顶部的搜索栏区域，但是前面有个>表示现在使用的是命令面板），可以在命令面板中进行相关的文件/工具操作
  8. 其他的软件安装后，有的软件也会出现在左侧工具栏中

• 右上角的窗口管理：可以对窗口的布局进行管理，如添加右分栏

• 底部的状态栏：管理插件的运行状态，或者连接远程服务器的状态等等

主题

在VSCode中，系统安装了一些默认的主题，打开命令面板，输入主题，点击颜色主题，可以看到一些系统为我们安装的一些自带的主题，可以选择一个自己合适的主题，也可以通过一些拓展插件来使用其他的主题，如：Monokai Pro等等，安装完这些拓展后，也需要在命令面板中输入主题，进行相关主题的选择

插件拓展

中文语言包

将VSCode的界面语言变成中文

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

Git管理工具

Git Graph是服务于Git分支管理的一种可视化工具，帮助开发者直观地理解 Git仓库的繁杂分支信息

Git Graph

安装好插件后，左下角状态栏点击Git Graph进入该插件界面

其中：

• 每一条线就是一个branch（分支），一般最左侧的是主分支：master，每一个在新的Branch或 Local Repository上的Commit 会衍生一条不同颜色的支线

• 每一个点就是一个commit（提交），可以看到该commit的具体信息

• 每一个往回的拐点就是一个merge（合并）

• 勾选 show remote branches可看见 local（本地） 和 remote（远程） 的 all branches。其中 origin/ 前缀的remote branch；没有 origin/ 前缀的就是 local branch

项目管理工具

Project Manager帮助我们快速的切换项目，项目开发的时候，需要与其他项目进行来回切换，通过打开关闭文件的方式进行切换会比较麻烦

安装好软件后，在左侧工具栏中会出现一个文件夹的图标，我们可以打开一个项目，点击管理图标，点击上方的保存图标，在顶部任务栏中输入回车，就可以将这个项目放到项目管理文件中进行管理

我们可以点击编辑项目对其进行分组编辑：

[
	{
		"name": "Doc",
		"rootPath": "d:\\MyOpenSource\\Doc",
		"paths": [],
		"tags": ["个人开源项目"],
		"enabled": true
	}
]

• name：表示项目的名称
• rootPath：表示项目文件的路径
• tags表示分组标签

将项目放入管理后，我们在切换项目的时候，可以在VSCode中直接进行切换，可以点击左侧工具栏的项目管理软件，再切换项目，也可以在VSCode中按下CTRL+SHIFT+P，输入project，找打这个软件的编辑项目

Prisma

用于和后端数据库的交互，会进行一些代码提示和语法校验

Dyno File Utils

该插件可以更好方便 创建、复制、移动、重命名和删除文件和文件夹，使我们在写代码的时候打开不同的文件可以脱离鼠标操作，系统自带的热键绑定是ALT+N，就可以打开文件系统，选择具体的文件路径，在搜索栏中输入新建的文件名加后缀，回车，就可以在指定的路径下创建该文件

• 删除文件快捷键：Alt + Delete （直接删除当前打开的文件）
• 删除文件夹快捷键：Shift + Alt + Delete （弹出信息框，选择要删除的文件夹）
• 重命名文件快捷键：Alt + F2 （对当前打开的文件进行重命名，弹出信息框，输入新名称即可）
• 复制文件快捷键：Alt + M （复制当前的打开的文件，弹出信息框，选择具体的文件夹进行粘贴）
• 创建文件快捷键：Alt + N （弹出消息框，选择要在哪个文件夹中创建文件，输入文件的名称和类型，回车即可创建新的文件）（也可以创建文件夹，创建文件的同时创建了文件夹，如data/index.ts，在创建index.ts之前创建了data文件夹）

element-ui-helper

可以查看element组件预览效果的插件

Element Plus Snippets

element代码提示的插件，用少量的代码，敲出具体的组件

快捷键

有些系统自带的快捷键，我们在使用的时候可以会不太方便，因此，可以对快捷键进行自定义

可以在菜单栏中的文件-> 首选项->键盘快捷方式（或者直接使用快捷键Ctrl+k+s）中，进行各种快捷的配置，对于需要更改的命令，鼠标右键更改键绑定，输入自定义的键，即可完成修改

通用快捷键：

快捷键	功能
Ctrl + Shift + P	显示命令面板
Ctrl + P	快速打开搜索栏
Ctrl + Shift + N	打开新窗口/实例
Ctrl + Shift + W	关闭窗口/实例

基础快捷键：

快捷键	功能
Ctrl++	放大整体
Ctrl+-	缩小整体
Ctrl+X	剪切行
Ctrl+C	复制行
Alt+ ↑ / ↓	向上/向下移动整行
Shift+Alt + ↓ / ↑	向上/向下复制行
Ctrl+Shift+K	删除行
Ctrl+Enter	在下面插入行，于Enter的区别是，该命令可以在行中间使用
Ctrl+Shift+Enter	在上面插入行
Ctrl+Shift+\	跳到匹配的括号
Ctrl+] / [	增加/减少缩进行（相当于Tab键）
Home	转到行首
End	转到行尾
Ctrl+Home	转到文件开
Ctrl+End	转到文件末尾
Ctrl+↑ / ↓	向上/向下滚动行
Alt+PgUp / PgDown	向上/向下滚动页面
Ctrl+Shift+[	折叠（折叠）区域
Ctrl+Shift+]	展开（未折叠）区域
Ctrl+K Ctrl+[	折叠（未折叠）所有子区域
Ctrl+K Ctrl+]	展开（未折叠）所有子区域
Ctrl+K Ctrl+0	折叠（折叠）所有区域
Ctrl+K Ctrl+J	展开（未折叠）所有区域
Ctrl+K Ctrl+C	添加行注释
Ctrl+K Ctrl+U	删除行注释
Ctrl+/	切换行注释（取消注释和添加注释的切换）
Shift+Alt+A	切换块注释
Alt+Z	切换换行

功能快捷键：

快捷键	功能
Ctrl + F	查找 Find
Ctrl + H	替换 Replace
Alt +单击	插入新光标，可以使用两个光标输入相同的内容
Ctrl + Alt +↑/↓	在上/下插入光标
Ctrl + U	撤消上一个光标操作
Shift + Alt + I	在选定的每一行的末尾插入光标

具体的其他快捷键可以参考：Window中使用VSCode快捷键

使用积累

本章节主要介绍一些在使用VSCode写代码过程中一些提高编程效率的小技巧：

• 有的时候我们不再使用导入的文件，但是其import语句还存在，我们一个个手动删除会比较麻烦，我们可以使用VSCode提供的快捷键命令：整理import语句，将其设置为我们方便快捷键，我这里设置为ALT+Q
• 触发建议：可以查看系统内置的一些命令，方便我们敲代码时，有些系统命名的拼写不会拼了，可以使用这个触发建议，将完整的指令拿出来，我这里设置的热键为ALT+E
• 格式化文档：我们写代码的时候，都会出现代码格式不规范的问题，这时就可以使用格式化文档操作，使用代码格式变得规范，这里设置热键为ALT+U
• 打开跳转文件弹出框，设置自定义热键为ALT+I，弹出最近打开的文件系统弹出框，我们上下选择具体的文件回车即可跳转到具体的文件