一,安装Live Server插件(不详细说明了)

二,开启Server(服务)

有四种方式:

  1. 在窗口的最底部有Go Live可以点击,一旦点击,就会自动在浏览器中打开HTML文件

  2. 在HTML文件中右键,然后点击open live server

  3. 快捷键 (alt+L, O) 打开服务   (alt+L, C) 关闭服务

  4. 按F1,然后在输入栏中输入 Live Server: Open Live Server to start a server  打开服务,或者 Live Server: Close Live Server to stop a server 关闭服务

三、关于Live Server的配置

 {
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}

四、使用注意事项

1、设置服务根路径的配置,只能设置到文件夹,不能设置到具体的HTML文件,例如 /dist/test.html  结果能打开页面,但是文件里面引用的文件加载出现报错。

2、根目录下会自动打开index.html

vscode-Live Server的使用心得的更多相关文章

  1. vscode Live Server使用

    vscode 的Live Server插件可以开启本地服务器

  2. Windows环境下vscode Live Server插件如何开启https

    0x01 vscode http插件 Live Server如何开启https 在本机端的开发环境下,如果要测试一些需要HTTPS的功能可以使用mkcert给自己颁发凭证 0x02 安装步骤如下: 1 ...

  3. 技巧~向URL地址添加参数

    只是个小技巧,感觉挺有用,拿出来分享一下 功能:在URL地址上添加参数,如果只有一个,会是?userid=1,需要是大于1个,会是&userid=1 实现: private string Ad ...

  4. Express学习(1) ------Express 入门

    Express 是node 第三方框架,大家都知道,框架的意义就在于能大大简化程序地开发.那么我们就看一下Express是怎么简化node程序开发的. 1,用Express写一个hello world ...

  5. 使用Intellij idea新建Java Web项目(servlet) 原理及初步使用

    准备 JDK       (配置JDK_HOME\bin   和 CLASSPATH)   注:JDK8下载已经需要注册了,请使用JDK11(现在是官方长期支持的版本)     对于我们新手来说,JD ...

  6. 再见 FTP/SFTP!是时候拥抱下一代文件传输利器了!

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 两台电脑之间该如何传送档案,其实方法有超多种的,像是 FTP 或透过 SSH 方式来传送档案, ...

  7. sublime,webstrom,vscode的使用感受,以及对于vue和webpack的支持,还有一些快捷键使用心得

    从最开始用sublime3到webstrom再到vscode,我的感觉如下: sublime首次加载项目文件速度较快,每次装插件有点麻烦,插件很丰富,也很好用. webstrom首次加载项目文件速度奇 ...

  8. SQL Server 2008安装过程中的一些问题和心得

    开博客已经好久了,但一直没有用起来,也有很多"老人"劝诫我,好记性不如烂笔头,于是一年后的我重拾博客,打算记录一些我在计算机方面遇到的一些问题和心得. 前几天重装了Win10系统, ...

  9. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库 ...

随机推荐

  1. asp.net core 排序过滤分页组件:sieve(2)表达式树的复习

    在Sieve组件中使用了很多关于表达式树的知识,但在我们日常的工作中写表达式树的机会是非常少的,至少在我的编程生涯中没怎么写过表达式树(可能也就是3,4次).所以,为了能够看懂Sieve里面的源代码, ...

  2. 类String 初识

    String类概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如 "abc" )都可以被看作是实现此类的实例.类 String 中包括用于检 ...

  3. Neutron vxlan network--L2 Population

    L2 Population 是用来提高 VXLAN 网络 Scalability 的.   通常我们说某个系统的 Scalability 好,其意思是: 当系统的规模变大时,仍然能够高效地工作. L2 ...

  4. CRM销售人员针对的客户的权重分配的思想

    巧妙使用权重http://www.ziawang.com/article/52/ Django 项目CRM总结 - Pythia丶陌乐 - 博客园https://www.cnblogs.com/sup ...

  5. ClientValidationEnabled

    ClientValidationEnabled 去掉这个的时候就无效了,前端验证 <add key="ClientValidationEnabled" value=" ...

  6. 一、Subversion服务

    Subversion是优秀的版本控制工具简称SVN,搭建SVN服务器,通过TortoiseSVN进行版本管理. 一.管理SVN服务的VisualSVN和TSVN两种Visual Studio扩展工具 ...

  7. PowerDesigner 批量添加字段

    Option Explicit Dim mdl ' the current model Set mdl = ActiveModel Dim Tab 'running table Dim col_1 D ...

  8. VisualStudio神级插件Resharper技巧基础入门到骨灰玩家使用全教程+Resharper性能优化

    原文地址:https://www.masuit.com/21/resharper 破解地址:https://www.masuit.com/20/resharper 官方文档:https://www.j ...

  9. JavaScript判断是否为微信浏览器或支付宝浏览器

    可以用手机安装的微信和支付宝扫描下方二维码测试 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  10. Ubuntu terminal colors

    Today I run ubuntu docker image on powershell and find the directory color is blue, so I want to cha ...