本文章来源于（意在于备份和收藏）：

https://blog.csdn.net/msdcp/article/details/127033151

软件简介

Visual Studio Code（简称VS Code）是一个由微软开发，同时支持Windows、Linux和Mac等操作系统的免费代码编辑器，它支持调试，并内置了Git版本控制功能，同时也具有开发环境功能，例如代码补全、代码片段和代码重构等。该编辑器支持用户个性化配置，例如改变主题颜色、键盘快捷方式等各种属性和参数，同时还在编辑器中内置了扩展程序管理的功能。

1.VSCode的下载

进入VSCode官方的下载页，根据系统需求选择相对应的下载地址。

官方下载页面—>：VSCode官方下载页面链接，选择自己系统对应的下载链接。

User Installer版：会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。

System Installer版：安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本)

vscode默认提供的User Installer版,大多数人都是用的这个版本。

关于具体下载哪个版本我进行了大量的调研，发现网络上大部分的教程都是选择的VSCode默认提供的User Installer版本。但是对于我们实际和真正的开发，以及我们对于系统文件的管理难易度上来讲我更推荐System Installer版本，它可以自定义安装路径，使其我们后期对于它的管理十分方便。

2.VSCode的安装

此处我选择了System Installer版本，原因无它，因为它可以自定义安装路径，使其我们后期对于它的管理十分方便，我也十分建议你选择此版本安装。

同意协议
选择同意协议，点击下一步

选择安装位置
选择安装位置，单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可

注意：为了后期的稳定性，切勿使用中文路径。

选择开始菜单文件夹
如需修改，请点击浏览进行设置，无需修改直接单击下一步即可

选择附加任务
按需选择自己需要的附加任务，建议将以下4项都勾选上

设置完毕最后单击下一步

注意：添加到PATH一定要勾选，很重要。

准备安装
确认自己前面设置的是否有误，无误则点击安装即可

安装完成
如果你看到如下界面，那么恭喜你，你的VSCode安装完成。

3.VSCode基础配置

VSCode界面简介

VS Code 采用通用的用户界面和左侧的资源管理器布局，显示您可以访问的所有文件和文件夹，右侧的编辑器显示您打开的文件的内容。

关于对上图界面的区域解释：

活动栏简单介绍	作用
	编辑器打开的文件
	全局搜索
	Debug
	插件安装
	用户登录
	VSCode设置

经过如上对VSCode界面基本的了解，我们在活动栏区域找到插件安装这个选项，单击它，在搜索框中搜索Chinese 选择第一个即可，选择Install进行安装。

安装完毕，右下角会弹出如下提示框，单击Restart重启VSCode即可完成。

4.VSCode个性化设置

我们找到设置，选择颜色主题

会弹出如下框选，此时我们根据自己的喜好选择即可，如果你觉得没有，还可以选择浏览其他颜色主题进行预览选择。

其余文件图标主题和产品图标主题的个性化设置同理。

5.VSCode常用设置

打开活动栏的VSCode设置，我们在常用设置，设置字体大小，字体，是否自动保存等常用的设置项目，此处按需选择设置即可。

对于其他的设置也是同理，按需选择设置。

对于常用设置这一项，我的个人建议是将Files：AutoSave选项的off更改为onFocusChange选项（当编辑器失去焦点时，会自动保存具有更改的编辑器）

6.VSCode常用快捷键

常规快捷键

Ctrl+Shift+P, F1 显示命令选项板
Ctrl+P 快速打开，转到文件…
Ctrl+Shift+N 新建窗口/实例
Ctrl+Shift+W 关闭窗口/实例
Ctrl+ 用户设置
Ctrl+K Ctrl+S 键盘快捷键

基本编辑快捷键

Ctrl+X 剪切线(空选区)。
Ctrl+C 复制行(空选择)。
Alt+↑/↓ 向上/向下移动行。
Shift+Alt+↓/↑ 复制行向上/向下。
Ctrl+Shift+K 删除行。
Ctrl+Enter 在下面插入行。
Ctrl+Shift+Enter 在上面插入行。
Ctrl+Shift+\ 跳转到匹配的括号。
Ctrl+]/[ 缩进/凸出行。
Home/End 转到行的开始/结束。
Ctrl+Home 转到文件开头。
Ctrl+End 转到文件末尾。
Ctrl+↑/↓ 向上/向下滚动行。
Alt+PgUp/PgDn 上/下滚动页面。
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+ 切换块注释。
Alt+Z 切换自动换行

导航

Ctrl+T 显示所有符号。
Ctrl+G 转到行…。
Ctrl+P 转到文件…。
Ctrl+Shift+O 转到符号…。
Ctrl+Shift+M 显示问题面板。
F8 转到下一个错误或警告。
Shift+F8 转到上一个错误或警告。
Ctrl+Shift+Tab 导航编辑器组历史记录。
Alt+←/→ 后退/前进
Ctrl+M 切换选项卡移动焦点

6.插件推荐

主题/外观美化区

①Material Icon Theme:

它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面，而且在暗黑模式下使用效果更佳。

②Material Theme:

可以说是与Material Icon Theme师从一脉了

③Rainbow Brackets

彩虹括号插件最新版VSCode已内置，无需安装，如需其他请使用Rainbow Brackets：

④Highlight Matching Tag：

vscode的彩虹括号扩展。

这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使VSCode有一些基本的标签匹配，它也只是——基本的。这个扩展将尝试匹配标签的任何地方:从标签属性，字符串内部，任何文件，同时也提供了广泛的样式选项，自定义标签如何突出显示。

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操作

Markdown语法插件

①Markdown All in One ：

Markdown All in One 是 VSCode 热门的 Markdown 插件，可以在左边书写，右边即时预览。下图替大家展示了常用的快捷键，以供查阅。

Key Command
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键 切换侧边栏目录

学习\摸鱼

①LeetCode:

解决 VS Code 中的 LeetCode 问题

②daily anime:

VSCode追番摸鱼看剧必备，以下展示使用命令行使用此插件方法

ctrl+shift+p 打开命令面板
命令行输入anime 打开番剧页面
命令行输入hitokoto
可随机展示一条句子

③小霸王：

上班玩游戏必备！摸鱼之王必备！

④超越鼓励师：

梦里的超越将在你枯燥乏味的编辑器中鼓励你。

前端插件

①Better Comments：

帮助在代码中创建更人性化的注释，有了这个扩展，你就可以把你的注释分类为:警报、查询、待办事项、突出。注释掉的代码也可以设置样式，以明确代码不应该出现在那里，你想要的任何其他评论样式都可以在设置中指定，不同注释可以显示不同的效果。

②ESLint:

集成ESLint JavaScript到VS Code，一个适用于前端的规范提示插件。

③vetur：

此插件可谓是前端必备，vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。

④Vue VScode Snippets：

构建代码片段的缩写节约开发时间

⑤JavaScript (ES6) code snippets

ES6语法中的JavaScript代码片段

柳ES7+ React/Redux/React-Native snippets：

扩展React, React- native和Redux在JS/TS与ES7+语法

⑦Image preview：

显示图像预览在槽和悬停，图片是否正确引入的显示工具，在链接处按ctrl，鼠标悬浮即可使用，确定是否正确找到路径下的图片。

⑧Auto Rename Tag：

自动重命名成对的HTML/XML标记，与Visual Studio IDE相同。

⑨HTML CSS Support：

HTML的CSS智能感知，支持链接和嵌入式样式表、支持模板继承、支持其他样式表、支持其他HTML之类的语言、根据需要验证CSS选择器。

使用方法：通过Ctrl + space查看id和class属性建议列表。