Visual Studio Code（简称 VSCode）是微软开发的一款免费、开源的跨平台代码编辑器。支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。
VSCode 适用于 Windows、macOS 和 Linux，它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言和运行时（如 C++、C#、Java、Python、PHP、Go、.NET）提供了丰富的扩展生态系统。
与同领域软件相比，VSCode 优势突出：
JetBrains 系列如 WebStorm、PyCharm 功能全面但体积庞大、启动缓慢且需付费订阅；
Sublime Text 虽轻量快速，但插件生态较弱且长期未完全开源。
VSCode的下载
这里为大家准备好了 VSCode 最新版的安装包，适用于 Windows、Linux 和 Mac OS 平台：
下载地址：https://pan.quark.cn/s/aec9dda8fb9
VSCode的安装
此处我选择了 exe 版本，原因无它，因为它可以自定义安装路径，使其我们后期对于它的管理十分方便，我也十分建议你选择此版本安装。
1 选择同意协议，点击下一步
2) 选择安装位置，单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可
注意：为了后期的稳定性，切勿使用中文路径。
3) 如需修改，请点击浏览进行设置，无需修改直接单击下一步即可
4) 按需选择自己需要的附加任务，这里我推荐将其他中的所有选项都勾选上，对于创建桌面方式则按需选择是否勾选，我这里因为不需要所以就不勾选了。
设置完毕最后单击下一步
注意：添加到PATH一定要勾选，很重要。
5) 确认自己前面设置的是否有误，无误则点击安装即可
6) 如果你看到如下界面，那么恭喜你，你的VSCode安装完成。
VSCode基础配置
1、VSCode界面简介
VS Code 采用通用的用户界面和左侧的资源管理器布局，显示您可以访问的所有文件和文件夹，右侧的编辑器显示您打开的文件的内容。
关于对上图界面的区域解释：
区块颜色区块名称区块作用
红色
活动栏
位于最左侧，可让您在视图之间切换，并为您提供额外的特定于上下文的指标，例如启用 Git 时传出更改的数量。
绿色
侧栏
包含不同的视图，例如资源管理器，可在您处理项目时为您提供帮助。
粉色
状态栏
有关已打开项目和您编辑的文件的信息。
紫色
面板
您可以在编辑器区域下方显示不同的面板，用于输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。
白色
编辑区
编辑文件的主要区域。您可以垂直和水平并排打开任意数量的编辑器。
黄色
菜单栏
进行VSCode的各项操作
2、VSCode设置中文界面
因为我们此时安装的VSCode还是英文界面，对于英语不是那么好的小伙伴不是十分友好，所以我们此时需要安装一个插件来对VSCode进行中文化处理。
活动栏简单介绍作用
编辑器打开的文件
全局搜索
Git管理
Debug
插件安装
用户登录
VSCode设置
经过如上对VSCode界面基本的了解，我们在活动栏区域找到插件安装这个选项，单击它，在搜索框中搜索Chinese 选择第一个即可，选择Install进行安装。
安装完毕，右下角会弹出如下提示框，单击Restart重启VSCode即可完成。
3、VSCode个性化设置
我们找到设置，选择颜色主题
会弹出如下框选，此时我们根据自己的喜好选择即可，如果你觉得没有，还可以选择浏览其他颜色主题进行预览选择。
其余文件图标主题和产品图标主题的个性化设置同理。
4、VSCode常用设置
打开活动栏的VSCode设置，我们在常用设置，设置字体大小，字体，是否自动保存等常用的设置项目，此处按需选择设置即可。
对于其他的设置也是同理，按需选择设置。
对于常用设置这一项，我的个人建议是将Files：AutoSave选项的off更改为onFocusChange选项（当编辑器失去焦点时，会自动保存具有更改的编辑器）
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
切换选项卡移动焦点
VSCode插件推荐
主题/外观美化区
Material Icon Theme:
它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面，而且在暗黑模式下使用效果更佳。
Material Theme:
可以说是与Material Icon Theme师从一脉了
彩虹括号插件最新版VSCode已内置，无需安装，如需其他请使用Rainbow Brackets：
vscode的彩虹括号扩展。
Highlight Matching Tag：
这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使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属性建议列表。