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

作者主页：ephemerals__

目录

一、VS Code下载和安装

二、中文插件的安装

三、前端插件的安装

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

      今天来跟大家分享一下关于在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”

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

相关知识

快速上手web前端开发（超详细教程）
【Web前端】彼岸の花——网上花店
VS Code中code runner运行Python程序[Done] exited with code=null
Node.js毕业设计基于的鲜花预定管理系统（Express+附源码）
Node.js毕业设计花店订花管理系统（Express+附源码）
从前端到后端——完整的Web开发指南
前端程序员如何浪漫求婚
老树新花：旧有项目的简易前端资源缓存处理
云南花卉物流之前端物流
米花同城社区小程序前端安装更新教程

网址: 【前端】VS Code 前端环境搭建教程 https://www.huajiangbk.com/newsview849343.html