HTML5开发环境搭建 VSCODE安装与配置

VSCODE 安装步骤

Vscode是一款轻量级html编码工具。

  1. 下载、安装、启动

  • 打开下载网页

  https://code.visualstudio.com/updates/v1_48

HTML5开发环境搭建 VSCODE安装与配置

  • 根据操作系统选择相应安装程序

HTML5开发环境搭建 VSCODE安装与配置

 

  • 解压zip文件

解压到D盘根目录下(也可是其他盘,建议在根目录下方便查找)

  • 启动程序

HTML5开发环境搭建 VSCODE安装与配置

如上图所示,到解压目录下,双击code.exe启动程序。打开界面如下

HTML5开发环境搭建 VSCODE安装与配置

    2.配置

  • 界面字体大小设置

HTML5开发环境搭建 VSCODE安装与配置

 

  • 界面汉化插件安装

点击【install】,安装完成后重启。下面就是汉化之后的界面

HTML5开发环境搭建 VSCODE安装与配置

HTML5开发环境搭建 VSCODE安装与配置

HTML5开发环境搭建 VSCODE安装与配置

 

  • View in browser 插件安装

该插件可以帮助我们在vscode中启动浏览器查看网页

HTML5开发环境搭建 VSCODE安装与配置

在插件商店中选择一个评分较高的插件进行安装

HTML5开发环境搭建 VSCODE安装与配置HTML5开发环境搭建 VSCODE安装与配置

              安装插件前                                                               安装插件后

 

  • View in browser 默认浏览器的设置

  1. 点击菜单 文件 -> 首选项 -> 设置

HTML5开发环境搭建 VSCODE安装与配置

2.在搜索框中输入 “view in browser”

HTML5开发环境搭建 VSCODE安装与配置

 

  • 界面风格设置

点击菜单 文件->首选项->颜色主题

HTML5开发环境搭建 VSCODE安装与配置

点击你喜欢的主题

HTML5开发环境搭建 VSCODE安装与配置

  • 使用

    1. 打开工作文件夹

HTML5开发环境搭建 VSCODE安装与配置

 

HTML5开发环境搭建 VSCODE安装与配置

 

  • 创建网页文件

HTML5开发环境搭建 VSCODE安装与配置

HTML5开发环境搭建 VSCODE安装与配置

在文件中输入“!”后点击回车键,就可以创建一个简单html页面了(注意一定要是英文输入法情况下)

HTML5开发环境搭建 VSCODE安装与配置

生成的基本网页如下所示

HTML5开发环境搭建 VSCODE安装与配置

HTML5开发环境搭建 VSCODE安装与配置

 

  • 打开网页

HTML5开发环境搭建 VSCODE安装与配置

 

  • 修改和刷新页面

HTML5开发环境搭建 VSCODE安装与配置