VSCode 安装配置(详细教程)

一、简介

VSCode(Visual Studio Code)是一款由微软开发的免费、开源的跨平台代码编辑器。它于 2015 年首次发布,旨在为开发者提供一个轻量级但功能强大的工具,用于编写各种编程语言的代码。它的强大不仅体现在它自身的功能上,也在于它丰富的插件功能,想要添加什么功能,只需要去插件市场中下载即可。

随着时间的推移,VSCode 凭借其不断更新和扩展的功能,在开发领域迅速获得了极高的人气。


二、下载

VSCode 下载链接

进入 VSCode 下载页面,下载自己电脑对应的系统。

在这里插入图片描述


三、安装

3.1 同意许可协议

在这里插入图片描述


3.2 选择安装路径

在这里插入图片描述


3.3 选择开始菜单文件夹

在这里插入图片描述

在电脑的开始菜单中 Visual Studio Code 文件夹会生成 VSCode 快捷方式。


3.4 选择附加目录

在这里插入图片描述

(1)创建桌面快捷方式: 勾选后,会在电脑的桌面上生成 VSCode 的快捷方式。

(2)将“通过code打开”操作添加到windows资源管理器文件\目录上下文菜单: 勾选后,右键让文件或文件夹可以通过 VSCode 的方式打开。

(3)将Code注册为受支持的文件类型的编辑器: 勾选后,一些文件默认以 VSCode 方式打开。

(4)添加到 PATH(重启后生效): 勾选后,可以在任何路径下访问 VSCode,并且可以与其他的一些第三方命令工具集成。


3.5 准备安装

在这里插入图片描述


3.6 安装完成

在这里插入图片描述


四、常用插件

4.1 汉化插件

进入 VSCode 的插件市场,在输入框中搜索 Chines ,点击 install 下载即可。

在这里插入图片描述

在这里插入图片描述

之后会弹出提示,改变语言并重启,点击后 VSCode 就是中文啦。


4.2 图标插件

进入 VSCode 的插件市场,在输入框中搜索 vscode-icons ,点击 install 下载即可。

在这里插入图片描述


4.3 主题插件

进入 VSCode 的插件市场,在输入框中搜索 **One Dark Pro ** ,点击 install 下载即可。

在这里插入图片描述


4.4 Live Server

这个插件可以让你在 VSCode 中通过右键的方式让 HTML 文件运行在浏览器中,新添加的内容会自动更新在浏览器上,浏览器不需要刷新,前提是在 VSCode 中保存了文件。

在这里插入图片描述

在这里插入图片描述


4.5 Auto Rename Tag

这个插件可以让你在 VSCode 中同步修改 HTML/XML 标签,不再需要一个一个地修改标签。

在这里插入图片描述


4.6 Image preview

这个插件可以让你在 VSCode 中通过鼠标悬停的方式预览图片。

在这里插入图片描述
在这里插入图片描述


五、结语

至此,本文结束,如果这篇文章对您有所帮助,希望可以点赞、收藏加关注,感谢

请添加图片描述