如何安装Visual Studio Code编辑器？

╰半橙微兮° 2023-10-07 19:06 52阅读 0赞

**Visual Studio Code**是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于Web前端开发人员，一个强大的编辑器可以使开发变得简单、便捷、高效。  
![在这里插入图片描述][8265440ec8ae4c698343cf1790c6abf6.png]  
**Visual Studio Code编辑器特点：**  
1.轻巧、极速，占用系统资源较少。

2.具备智能代码补全、语法高亮显示、自定义快捷键和代码匹配等功能。

3.跨平台，可用于macOS、Windows和Linux系统。

4.主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色（默认为黑色），也可以快速查看最近打开的项目文件和查看项目文件结构。

5.提供丰富的扩展（extension），用户可根据需要自行下载和安装扩展。常用的扩展有Chinese和Live Server等。

**Visual Studio Code的下载安装**  
下载Visual Studio Code编辑器首先要到Visual Studio Code官方网站下载软件到本地。  
![在这里插入图片描述][07972200be4e494f966ada2f6a77548b.png]  
双击安装包启动安装程序。  
![在这里插入图片描述][dd02b090ad4d4abdbf5e3489bc6da921.png]  
点击下一步，进入准备安装界面,点击安装开始Visual Studio Code编辑器。  
![在这里插入图片描述][90f2085d942649bfbf830f8657d37fbe.png]

Visual Studio Code编辑器主界面  
![在这里插入图片描述][3a7fb304038347f888f2ab8d37982442.png]  
点击设置按钮可以将主界面默认颜色（黑色）设置为"Light +(default light)"。  
![在这里插入图片描述][b746ade2b0d6476cb9b767b0679334fc.png]  
设置后的效果如下：  
![在这里插入图片描述][ef342e66f57c45dcb914ad2bb9bf7302.png]  
**安装Chinese扩展**  
将Visual Studio Code编辑器的语言（默认英文）设置为中文。

实现步骤：单击左边栏中的第5个图标按钮（Extensions扩展按钮）然后在搜索框中输入关键词“Chinese"找到中文语言扩展，最后单击"Install”按钮进行安装。  
![在这里插入图片描述][2594dc603b3f40d89f9cb48891346ed6.png]  
**安装Live Server扩展**  
Live Server扩展可以创建一个本地服务器来预览网页，服务器的默认端口是5500，用户也可以自行设置端口号、默认浏览器等。使用Live Server扩展运行程序时，如果对代码进行了修改，不需要重新刷新浏览器即可更新页面内容。

具体安装步骤：单击左边栏中的第5个图标按钮（Extensions扩展按钮），然后在搜索框中输入关键词“live server”找到该扩展，单击“安装”按钮进行安装。  
![在这里插入图片描述][8965a0b990d649bb8f18aa02e518bc02.png]

### 前端开发入门教程 ###

[**web前端零基础html5 +css3+前端项目视频教程**][web_html5 _css3]

### JavaScript全套教程 ###

[Web前端必学的JS入门教程，零基础JavaScript入门][Web_JS_JavaScript]

[8265440ec8ae4c698343cf1790c6abf6.png]: https://img-blog.csdnimg.cn/8265440ec8ae4c698343cf1790c6abf6.png
[07972200be4e494f966ada2f6a77548b.png]: https://img-blog.csdnimg.cn/07972200be4e494f966ada2f6a77548b.png
[dd02b090ad4d4abdbf5e3489bc6da921.png]: https://img-blog.csdnimg.cn/dd02b090ad4d4abdbf5e3489bc6da921.png
[90f2085d942649bfbf830f8657d37fbe.png]: https://img-blog.csdnimg.cn/90f2085d942649bfbf830f8657d37fbe.png
[3a7fb304038347f888f2ab8d37982442.png]: https://img-blog.csdnimg.cn/3a7fb304038347f888f2ab8d37982442.png
[b746ade2b0d6476cb9b767b0679334fc.png]: https://img-blog.csdnimg.cn/b746ade2b0d6476cb9b767b0679334fc.png
[ef342e66f57c45dcb914ad2bb9bf7302.png]: https://img-blog.csdnimg.cn/ef342e66f57c45dcb914ad2bb9bf7302.png
[2594dc603b3f40d89f9cb48891346ed6.png]: https://img-blog.csdnimg.cn/2594dc603b3f40d89f9cb48891346ed6.png
[8965a0b990d649bb8f18aa02e518bc02.png]: https://img-blog.csdnimg.cn/8965a0b990d649bb8f18aa02e518bc02.png
[web_html5 _css3]: https://www.bilibili.com/video/BV1Kg411T7t9?spm_id_from=333.999.0.0&vd_source=36d687ece6545eefcda2731026b8d90d
[Web_JS_JavaScript]: https://www.bilibili.com/video/BV1ux411d75J