VSCode安装配置教程（保姆级）

前言

        vscode是一种简化且高效的代码编辑器，同时支持诸如调试，任务执行和版本管理之类的开发操作。它的目标是提供一种快速的编码编译调试工具。然后将其余部分留给IDE。vscode集成了所有一款现代编辑器所应该具备的特性，包括语法高亮、可定制的热键绑定、括号匹配、以及代码片段收集等。

        VisualStudioCode（简称VSCode）是Microsoft开发的代码编辑器，它支持Windows，Linux和macOS等操作系统以及开源代码。它支持测试，并具有内置的Git版本控制功能以及开发环境功能，例如代码完成（类似于IntelliSense），代码段和代码重构等。编辑器支持用户定制的配置，例如仍在编辑器中时，可以更改各种属性和参数，例如主题颜色，键盘快捷键等，内置的扩展程序管理功能。

下载与安装

1. 下载地址

VisualStudioCode官网
点击箭头根据系统需求下载即可，选择Stable的，官网下载较慢推荐使用迅雷

2. 安装

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

自己注意改一下安装路径

二、软件配置

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

1. 安装中文语言包

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

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

2. 切换主题

挑选自己喜欢的主题即可

3. 其他配置

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

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

三、快捷键

基础编辑 Basic editing

导航 Navigation

搜索和替换 Search and replace

多光标和选择 Multi-cursor and selection

丰富的语言编辑 Rich languages editing

编辑器管理 Editor management

文件管理 File management

显示 Display

调试 Debug

集成终端 Integrated terminal

四、常用插件

1. Auto Rename Tag

修改开始标签，结束标签跟着自动变化，比较好用。

2. One Dark Pro 颜色主题

3. open in browser 浏览器预览页面

编写完代码，需要浏览器预览，可以安装这个插件

vscode 浏览器打开页面

4.Live Server 实时预览（推荐）

刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐各位小伙伴安装 live server 这个插件，修改完代码，自动更新浏览器。

小技巧：

刚开始学习前端，基本页面很少，可以左边编辑器，右边浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。

5. vscode-icons 设置文件图标主题

可以很清楚看到文件对用的图标。

6. Easy LESS 编译less文件

我们写的less不能直接引入到html文件中， 通过这个插件可以自动帮我们生成 css文件

7. 会了吧

是的，你没看错，这个插件的名字就是 <会了吧>

你是不是还在为英文单词不认识而发愁，是不是认识不会读而烦心， 这个插件你值得拥有。
里面会有单词介绍，点击还会有发音

8. Path Intellisense

自动路径补全

9. Auto Close Tag

自动闭合HTML/XML标签