前端入门（一）环境搭建

一、安装vscode

二、安装插件

1、HTML CSS Support

写前端代码的快捷神器

作用：

（1）提高编码效率：

可以自动补全、插入片段、实时预览等

（2）及时显示错误：

有语法高亮和错误检查功能

（3）增强代码可读性

有格式化和语法高亮

2、Live Server

可以实时预览编写的页面的变化

3、Auto Rename Tag

修改一个标签时，可以自动同步修改与之匹配的另一个标签

三、创建文件

示例：1、在桌面新建一个文件夹（eg: front_end_practice）

2、将文件夹拖进vscode中进行打开

3、在该文件夹目录中新建一个demo.html文件

4、输入一个英文感叹号，按提示按下Tab键，即可立即生成HTML文档框架

5、鼠标右键点击Open with Live Server

6、若不能实时更新，则可能是因为没有把设置里的“自动保存”功能打开

（左下小齿轮->设置->搜索Auto Save->选择afterDelay）