VS Code使用总结

VS Code

0. 前言

Visual Studio Code 是一个轻量级功能强大的免费源代码编辑器，支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言和运行时（如 C++、C#、Java、Python、PHP、Go、.NET）提供了丰富的扩展生态系统。

1. VS Code安装

1.1 VSCode的下载

进入VSCode官方的下载页，根据系统需求选择相对应的下载地址。
推荐System Installer版本，它可以自定义安装路径，使其我们后期对于它的管理十分方便。

1.2 安装

安装教程可以在网上搜索。基本一步步安装即可

注意：

(1) 为了后期的稳定性，安装目录切勿使用中文路径。
(2) 选择附加任务，要勾选添加到PATH。

2. VS Code基础配置

2.1 设置中文界面

在活动栏区域找到插件安装这个选项，搜索Chinese (Simplified) 插件，点击Install进行安装。安装后单击Restart重启VSCode即可完成中文化。

2.2 编辑设置

Tab键改为空格

在设置页面搜索Tab，改动如下：

打开Tab Completion

在设置页面搜索Tab Completion，更改为on

打开自动保存

在设置页面搜索AutoSave，更改为onFocusChange选项（当编辑器失去焦点时，会自动保存具有更改的编辑器）

VS Code常用快捷键

• 编辑器管理

  快捷键	动作	vim替代
  Ctrl+Shift+P, F1	显示命令选项板
  Ctrl+,	用户设置
  Ctrl+ =/-	放大/缩小
  F11	切换全屏
  Ctrl+P	快速打开，转到文件	:e <file_name>
  Ctrl+N	新建窗口	:e <file_name>
  Ctrl+W	关闭窗口	ZZ/:wq
  Ctrl+Tab	查找导航编辑器组历史记录	gt
  Ctrl+Shift+Tab	反向查找导航编辑器组历史记录	gT
  Ctrl+\	拆分窗口	:sp/:vsp
  Ctrl+1/2/3	聚焦到第1、2、3编辑组
  Ctrl+0	聚焦到主侧栏
  Ctrl+B	切换侧栏可见性
  Ctrl+Shift+E	显示资源管理器栏
  Ctrl+Shift+F	显示搜索栏
  Alt+C/R/W	搜索时切换区分大小写/正则表达式/整个词
  F3/Shift+F3	搜索下一个/上一个
  Ctrl+Shift+C	打开外部终端
  Ctrl+J	切换底部面板可见性
  Ctrl+Shift+U	显示输出面板
  Ctrl+Shift+M	显示问题面板
  Ctrl+`	显示终端面板	:sh()/映射+t

  动作	命令	备注
  编辑组和终端切换	Ctrl+`打开终端，Ctrl+J切换为隐藏底部面板	Ctrl+`不好按
  	Ctrl+J切换为显示底部面板，Ctrl+J切换为隐藏底部面板	底部面板有可能不在终端选项卡上
  	:sh 打开终端，exit退出终端	每次不记录上次输出的日志
  	映射alt+t聚焦终端和编辑组
  编辑组和资源管理器切换	Ctrl+Shift+E切换聚焦资源管理器栏和编辑组
  	Ctlr+B切换侧边栏的可见性	侧边栏不一定在资源管理器选项卡上

• 基本编辑

  快捷键	动作	vim替代
  Ctrl+G	转到行	<n>+G/gg
  Alt+↑/↓	向上/向下移动行	ddp
  Ctrl+Shift+K	删除行	dd
  Ctrl+X	剪切行	dd
  Ctrl+C	复制行	yy/Y
  Ctrl+Enter	在下面插入行	o
  Ctrl+Shift+Enter	在上面插入行	O
  Ctrl+Shift+\	跳转到匹配的括号	%
  Home	转到行首	0
  End	转到行尾	$
  Ctrl+Home	转到文件开头	gg
  Ctrl+End	转到文件结尾	G
  Ctrl+PgUp/PgDown	向上/向下滚动页面	Ctrl+u/Ctrl+d
  Ctrl+Shift+[	折叠区域
  Ctrl+Shift+]	展开区域
  Ctrl+]/[	缩进/凸出行	>>/<<
  Ctrl+/	切换行注释
  Shift+Alt+A	切换块注释

• 导航

  快捷键	动作	vim替代
  F8	转到下一个错误或警告
  Shift+F8	转到上一个错误或警告
  Alt+←/→	后退/前进	ctrl-o/ctrl-i

3. VS Code常用插件安装

3.1 主题/外观美化

• Material Icon Theme
  它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面，而且在暗黑模式下使用效果更佳。
• Material Theme
  可以说是与Material Icon Theme师从一脉了
• Rainbow Brackets
  vscode的彩虹括号扩展。
• Highlight Matching Tag
  这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使VSCode有一些基本的标签匹配，它也只是——基本的。这个扩展将尝试匹配标签的任何地方:从标签属性，字符串内部，任何文件，同时也提供了广泛的样式选项，自定义标签如何突出显示。

3.2 Git相关插件

• GitHub Pull Requests and Issues：
  允许您在 Visual Studio Code 中检查和管理 GitHub 拉取请求和问题。
• Git History：
  查看Git日志，提交文件历史，比较分支或提交
• GitLens — Git supercharged：
  通过Git Under注解和CodeLens使你可以直截了当的显示代码作者，无缝导航和探索Git存储库，通过丰富的可视化和强大的比较命令获得有价值的见解等
• Git Graph：
  查看存储库的Git Graph，并从该图轻松执行Git操作

3.3 C/C++相关插件

• C/C++
• C/C++ Extension Pack
• C/C++ Themes

3.4 配置keil开发环境

（1）需要安装Keil5软件
（2）在VSCode中安装Keil Assistant 插件
（3）配置Keil Assistant
进入设置，搜索框里输入“Keil Assistant”，并在指定位置，输入【keil5可执行文件的绝对路径】。上面那个是C51的，下面那个是MDK的。

3.5 Markdown语法插件

• Markdown All in One ：
  Markdown All in One 是 VSCode 热门的 Markdown 插件，可以在左边书写，右边即时预览。

  快捷键	说明
  Ctrl + B	粗体
  Ctrl + I	斜体
  Alt + S	删除线
  Ctrl + Shift + ]	标题(uplevel)
  Ctrl + Shift + [	标题(downlevel)
  Ctrl + M	切换数学环境
  Alt + C	选中/取消选中任务列表项

• Markdown Preview Enhanced：
  Markdown预览增强，自动滚动同步、数学排版、PlantUML、pandoc、PDF 导出、代码块、演示文稿编写器等。
  Markdown Preview Enhanced常用快捷键：

  快捷键	说明
  cmd-k v 或 ctrl-k v	打开预览到侧面
  cmd-shift-v 或 ctrl-shift-v	打开预览
  ctrl-shift-s	同步预览/同步源
  shift-enter	运行代码块
  ctrl-shift-enter	运行所有代码块
  cmd-= 或 cmd-shift-=	预览放大
  cmd-- 或 cmd-shift-_	预览缩小
  cmd-0	预览重置缩放
  Esc	切换侧边栏目录

• Markdown PDF
  用于将Markdown转换为PDF，但是此插件不能成功转换markdown中的plantuml，只是转换为pdf功能完善，不必要安装。
• Markdown Image
  Hexo + VSCode 插入 Markdown 图片解决办法 - Yumine - 博客园 (cnblogs.com)
• Markdownlint
  可提供实时的Markdown语法格式检查，但其对语法格式过于严格，可根据自身情况选择安装
• Markmap
  能将Markdown文件预览为思维导图形式，十分推荐
• Markdown Preview Mermaid Support
  能在Markdown文件中书写Mermaid格式的文本
• Mermaid Markdown Syntax Highlighting
  可以将Mermaid格式的文本高亮显示，方便易读

3.6 PlantUml插件

（1）Windows安装JAVA，用于预览
（2）安装PlantUml插件
（3）配置PlantUml插件

PlantUml使用的渲染方式比较：

• 使用Local方式，在本地安装GraphViz，配置好环境变量。优点是可以不联网，部署较为简单，但不支持直接转换为PDF，且渲染较慢。PlantUML环境部署(VScode+PlantUML插件+Graphviz+jre)，VSCODE+PLANTUML环境配置
• 使用官方的Plantuml服务器，优点是渲染快，配置方便，只需要将网址添加进去即可，但需要联网，不支持直接转换为PDF，可以使用在线工具转换。
• 在自己的电脑部署PlantUml Server，优点是可以不联网，渲染快，且能导出PDF，但部署相对复杂。[没必要，不建议]

【VSCode插件】Plantuml和Markdown搭配使用

3.7 编辑用的插件

• Vim
  • MultiCommand：能让多个指令合成一个指令调用，提高 vim 快捷键的泛用性
  • Vim
    设定 vscode 的 settings.json 和 keybindings.json ：
    Vscode：使用 Vim 提升生产力进阶指南 - 知乎 (zhihu.com)
    设置相对行号：
    vim 和 vscode 的 “ 智能 ” 相对行号-优快云博客