VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了_Javascript

前言

vscode的下载

通过前言我们已经大致了解到了vscode的强大之处，现在开始步入正题。

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

对于windows下载标绿文本的解释

文本	文本解释
user installer	默认安装在当前计算机帐户目录，如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。vscode默认提供的为user installer
system installer	安装在非用户目录,例如c盘根目录,任何帐户都可以使用。

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

vscode的安装

同意协议

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

选择安装位置

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

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

选择开始菜单文件夹

如需修改，请点击浏览进行设置，无需修改直接单击下一步即可

选择附加任务

按需选择自己需要的附加任务，这里我推荐将其他中的所有选项都勾选上，对于创建桌面方式则按需选择是否勾选，我这里因为不需要所以就不勾选了。

设置完毕最后单击下一步

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

准备安装

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

安装完成

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

vscode基础配置

vscode界面简介

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

区块颜色	区块名称	区块作用
红色	活动栏	位于最左侧，可让您在视图之间切换，并为您提供额外的特定于上下文的指标，例如启用 git 时传出更改的数量。
绿色	侧栏	包含不同的视图，例如资源管理器，可在您处理项目时为您提供帮助。
粉色	状态栏	有关已打开项目和您编辑的文件的信息。
紫色	面板	您可以在编辑器区域下方显示不同的面板，用于输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。
白色	编辑区	编辑文件的主要区域。您可以垂直和水平并排打开任意数量的编辑器。
黄色	菜单栏	进行vscode的各项操作

vscode设置中文界面

因为我们此时安装的vscode还是英文界面，对于英语不是那么好的小伙伴不是十分友好，所以我们此时需要安装一个插件来对vscode进行中文化处理。

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

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

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

vscode个性化设置

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

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

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

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	切换选项卡移动焦点

插件推荐

主题/外观美化区

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