【前端】VS Code 前端环境搭建教程

一、VS Code下载和安装

我们可以直接在VS Code官网上下载。链接如下：

https://code.visualstudio.com/

进入网站之后，点击右上角的Download。

进入下载界面之后，可以根据自己电脑的系统进行选择。我的电脑是windows系统。

选择好之后，电脑就会自动下载了，下载好之后我们开始安装。

注意：来到这个页面时，这几个选项都选上

点击安装

二、中文插件的安装

进入VS Code，可以看到当前为英文界面，我们可以先下载一个中文插件。点击左边的按钮。

在左上角搜索Chinese，选择第一个，点击Install

下载好之后，右下角会弹出对话框，我们选择更换语言并重启。

重启之后可以看到，我们的中文插件已经安装成功了。

三、前端插件的安装

现在可以开始安装前端所需要的插件了，和安装中文插件的方法一样，首先搜索HTML CSS Suport选择安装。此插件是在HTML中编写CSS的快捷神器。

安装好之后，搜索Live Server，选择安装。

有了Live Server，我们就可以在浏览器中实时预览编写好的界面。

最后一个是Auto Rename Tag，它可以辅助我们修改html标签时同步修改另一个标签。

选择安装

现在，我们就可以编写html程序并且可以实时查看网页效果。

右键点击，选择“Open with Live Server”

这样就可以看到网页界面了。

四、Live Server无法实时显示的问题

有些电脑在下载了Live Server之后，发现写代码的过程中网页没有实时更新，针对这种问题，我们也可以下载“Preview on Web Server”插件，效果是一样的。

右键点击，选择“vscode-preview-server:Launch on browser”

这样我们就可以开始前端程序的编写了。