如何安装Visual Studio Code编辑器？【应用安装和扩展】

矫情吗；* 2024-04-07 15:33 21阅读 0赞

Visual Studio Code是由微软公司推出的一款免费、开源的代码编辑器，一经推出便受到开发者的欢迎。对于Web前端开发人员，一个强大的编辑器可以使开发变得简单、便捷、高效。

![77c793eecdb8e0519f903507af02ebaf.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官方网站下载软件到本地。

![48bc5a487ab861054904a769853dda77.png][]

双击安装包启动安装程序。

![5ce603de29f19e92166de85264d09ae9.png][]

点击下一步，进入准备安装界面,点击安装开始Visual Studio Code编辑器。

![f5081b50fb0b9eb86e01a569fa4a56d2.png][]

Visual Studio Code编辑器主界面

![f013c82e08af95a1b8e535810fa8759e.png][]

点击设置按钮可以将主界面默认颜色（黑色）设置为"Light +(default light)"。

![dd0d8605da38ea0c7951538ac70f7e4c.png][]

设置后的效果如下：

![746788aa278152c9c399e7a179c77602.png][]

### **安装Chinese扩展** ###

将Visual Studio Code编辑器的语言（默认英文）设置为中文。

实现步骤：单击左边栏中的第5个图标按钮（Extensions扩展按钮）然后在搜索框中输入关键词“Chinese"找到中文语言扩展，最后单击"Install”按钮进行安装。

![0ecb06331cd050e730f98e313c78ef3d.png][]

### **安装Live Server扩展** ###

Live Server扩展可以创建一个本地服务器来预览网页，服务器的默认端口是5500，用户也可以自行设置端口号、默认浏览器等。使用Live Server扩展运行程序时，如果对代码进行了修改，不需要重新刷新浏览器即可更新页面内容。

具体安装步骤：单击左边栏中的第5个图标按钮（Extensions扩展按钮），然后在搜索框中输入关键词“live server”找到该扩展，单击“安装”按钮进行安装。

![b962a2646e177f14c11ea9703ff88d72.png][]

[77c793eecdb8e0519f903507af02ebaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/54b5d2cfa3e84273bb9308b226ee6af2.png
[48bc5a487ab861054904a769853dda77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9d4b65994f4a4c9d9b4312d0bb3aed09.png
[5ce603de29f19e92166de85264d09ae9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2c84f21f6ece4a17b61a77ac20c6ccaa.png
[f5081b50fb0b9eb86e01a569fa4a56d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2eaa357079364e9dbccfbe070488ef51.png
[f013c82e08af95a1b8e535810fa8759e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/a07e22a85a214bfca8c45bce6766f72f.png
[dd0d8605da38ea0c7951538ac70f7e4c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c3f69c8602f8452fab5dd8fcce7efa2c.png
[746788aa278152c9c399e7a179c77602.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3963da5c776e4f8c812b1dc5ba679622.png
[0ecb06331cd050e730f98e313c78ef3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c1684c711e0b4a3c99b1846e580fa917.png
[b962a2646e177f14c11ea9703ff88d72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e58c46af60ba4e958afe903de090dbf6.png