VSCode编写第一个html

本文介绍如何使用VSCode及LiveServer插件快速搭建本地HTML开发环境,包括下载VSCode,安装并配置LiveServer插件,以及创建并预览HTML文件的全过程。

下载VSCode https://code.visualstudio.com/

在本地创建一个目录,然后从VSCode打开这个文件夹

 

需要安装两个插件 ,在Extensions查找两个插件 Live Server 和 Open in browser

插件生效是需要重启VSCode 的哦。。。

 

 

需要说明下  Live Server 是需要配置的 

在这个窗口 按ctrl+shift+P 进入命令面板(小白真的没找到。。。。)

然后再里面输入settings 找到 preference open settings

或者 直接点击下面的齿轮就好。

在搜索框输入 live server 就会进入到live server 的配置中,然后对live server的配置进行修改即可。

 

 

或者 点击 edit in settings.json 把下面这个复制过去就好。不用自己配置喽。。。

{

    "editor.suggestSelection": "first",

    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

    "liveServer.settings.donotVerifyTags": true,

    "liveServer.settings.donotShowInfoMsg": true,

    "liveServer.settings.NoBrowser": true,

    "liveServer.settings.CustomBrowser": "chrome", #默认chrome浏览器哦  

    "liveServer.settings.port": 5500

}

 

创建  一个html 模板 

先要创建一个文件,默认为 Untitled-1 ,按ctrl +s 保存到第一步创建文件夹下 命名为 1.html

打开是个空文档 ,输入英文 !  点击tab键盘,会自动生成html 模板 

在1.html 点击右键,Open with Live server, 就会在chrome浏览器中打开这个网页

如图:

在VSCode 把 <title>Document</title> 改为  <title>Document123456</title>

直接点击保存,然后去浏览器看下,神奇的事情发生喽,居然网页标题也变成Document123456 

这个就是Live server插件的妙用哦。。。。

觉得我写的还有用,请持续关注我的博客哦。。。(*^▽^*)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值