【前端学习】vs code的使用

 

 安装Visual Studio Code

官网:https://code.visualstudio.com/

【前端学习】vs code的使用

 到官网下载,直接安装。

添加中文插件和Live Service

打开VS Code,点击左侧栏四个方框的图片

【前端学习】vs code的使用

 找到Live Service和Chinese两个插件,点击install的绿色按钮。如果不能在列表中找到,可以搜索一下。

【前端学习】vs code的使用

安装完后重启即可。

编写一个html文件 

这里我们先新建一个空文件夹,然后在VS Code里打开文件夹,作为项目的一个工作区。

【前端学习】vs code的使用

【前端学习】vs code的使用 点击文件夹名旁边的新建文件按钮,创建一个index.html文件。【前端学习】vs code的使用

【前端学习】vs code的使用 打开index.html,在右边编辑区域输入感叹号!,点击第一个或按Tab键可快速生成HTML代码。

 【前端学习】vs code的使用

 【前端学习】vs code的使用

 右键点击Open with Live Server,会自动帮我们打开页面。却html代码发生改变并保存时,页面信息会根据改动发生变化,无需手动刷新网页。

【前端学习】vs code的使用

【前端学习】vs code的使用