VsCode插件之Live Serve探秘.(上)

时间:2022-07-28
本文章向大家介绍VsCode插件之Live Serve探秘.(上),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

设定值

  • liveServer.settings.port:自定义Live Server的端口号。如果需要随机端口号,请将其设置为0

  • 默认值为5500
  • liveServer.settings.root注意:要在工作空间文件夹结构之间更改服务器的根目录,请使用/和来自工作空间的绝对路径。

  • 范例:/sub_folder1/sub_folder2。现在sub_folder2将是服务器的根目录。
  • 默认值为“ /”。(工作区根目录)
  • liveServer.settings.CustomBrowser:更改系统的默认浏览器。 不够?需要更多?在github上打开一个issue / pull请求。现在,使用liveServer.settings.AdvanceCustomBrowserCmdLine设置(请参阅下文)。

  • chrome:私人模式
  • 火狐
  • firefox:私人模式
  • 微软边缘
  • 大盘
  • 默认值为 null [字符串,不是null]。(它将打开系统的默认浏览器。)
  • 可用选项 :
  • liveServer.settings.AdvanceCustomBrowserCmdLine: 使用高级命令行设置任何喜欢的浏览器(例如Chrome Canary,Firefox Nightly)。(您可以指定自己喜欢的自定义浏览器的完整路径)。 注意:请使用AdvanceCustomBrowserCmdLineCustomBrowser。如果同时使用,AdvanceCustomBrowserCmdLine则优先级更高。

  • chrome --incognito --headless --remote-debugging-port = 9222
  • C: Program Files Firefox开发人员版 firefox.exe --private-window
  • 此设置将覆盖CustomBrowserChromeDebuggingAttachment设置。
  • 默认值为 null
  • 例子:
  • liveServer.settings.ChromeDebuggingAttachment:启用Chrome调试到Live Server的附件。[快速Gif演示]。

  • 注意:您必须安装 Debugger for Chrome.
  • 如果值为true,请启动Live Server并从“调试窗口”中选择“附加到Chrome”以开始调试。Debugger for Chrome扩展程序将调试功能注入到浏览器窗口的运行实例中。
  • 默认值为false
  • liveServer.settings.NoBrowser:如果为真,则实时服务器将在没有打开浏览器的情况下启动。

  • 默认值为 false
  • liveServer.settings.ignoreFiles:忽略特定的文件更改。 [ “ .vscode / ** ”, “ ** / *。SCSS ”, “ ** / *。SASS ”, “ ** / *。TS ” ] 现在,默认情况下,Live Server将不会跟踪您.scss.sass文件的更改。

  • 默认值为:
  • liveServer.settings.donotShowInfoMsg:要关闭信息弹出消息,例如“服务器以端口xxxx启动”或类似的消息。若要将其关闭,可以将值设置为true,也可以在弹出信息消息时单击“不再显示”

  • 默认值为: false
  • liveServer.settings.host:在localhost和之间切换主机名127.0.0.1

  • 默认值为127.0.0.1
  • liveServer.settings.additionalTagsForLiveReload:( 实验功能-测试版) [此设置已删除,此功能可以用Live Server Web Extension代替]

  • liveServer.settings.donotVerifyTags:如果HTML中缺少正文,头部或其他支持标签,则关闭提示警告消息。

  • 如果是默认值 false
  • liveServer.settings.https:启用https协议。 “ liveServer.settings.https”:{ “ enable”:false , //将其设置为true以启用该功能。 “ cert”:“ C:\ https \ server.cert” , //完整路径 “ key”:“ C:\ https \ server.key” , //完整路径 “ passphrase”:“ 12345” } ,

  • 特性:
  • liveServer.settings.proxy:启用代理。 / * 简单来说,这意味着您要将真实的URL(实际的PHP URL) 转移到另一个URL(LiveSever将开始)。 * / “ liveServer.settings.proxy”:{ “ enable”:false , //将其设置为true以启用该功能。 “ baseUri”:“ /” , //您要代理的位置。 “ proxyUri”:“ http:// localhost / php /” //实际的网址。 } ,

  • 特性:
  • liveServer.settings.useWebExt::如果是这样true,Live Reload将由Live Server Web Extension完全控制。而且,无论您的HTML是否带有<body>标签都没有关系,Live Reload将适用于每个文件。?

  • 默认是 false
  • liveServer.settings.fullReload::默认情况下,Live Server会在不完全重新加载浏览器的情况下注入CSS更改。您可以通过将此设置设置为来更改此行为true

  • 默认: false
  • liveServer.settings.wait::在实时重新加载之前延迟。以毫秒为单位的值。

  • 默认: 100
  • liveServer.settings.mount: :将目录安装到路由。 { “ liveServer.settings.mount:” [ [ “ /” , “ / path1” ] , [ “ /” , “ / path2” ] , [ “ / root” , “ / dist” ] ] }

  • 默认: []
  • 例:
  • liveServer.settings.useLocalIp: :使用本地IP作为主机。

  • 默认: false
  • liveServer.settings.file::入口点文件的路径。对SPA有用

  • 默认: ""
  • liveServer.settings.multiRootWorkspaceName: :这是您在多根工作区中时服务器的入口点。
    • 默认: null
    • 您可以使用“命令面板ctrl+shift+p”进行更改并输入Live Server: Change Live Server workspace
    • 提示:您不需要设置此设置,Live Server足够聪明,它将通过询问任何HTML文件来自动询问正确的工作空间或自动设置正确的工作空间。

看着其实不小了

我们克隆了一个库,这个是打开的样子

我们先看倒数第一的文件,写了什么.

从名字看是格式化工具,格式化ts代码用的?

规则目录

规则:箭头返回简写

可调用类型

类名

注释格式等

json的可读性是很好的了,基本是见名知其义.自己研究一下

可以这样辅助的看一下,就是有一些非人类

ts配置文件,也是json文件.同上.

编译选项

模块

目标

输出目录

库?(lib)

资源映射

根目录

执行选项,看不懂了...

md文档,可以一看

这个里面是一些描述性的配置?我其实现在还没有看官方的插件编写规范

有一些我看不懂.

但是这个东西应该是上架一个插件的基本信息

你看.有名字版本作者

键值绑定

不知道这么翻译,直译看不了

必须写的东西

版本变更日志

构建脚手架

忽略目录,看不懂

还是一个构建文件,看上去编译的话.推荐unix平台

GitHub忽略目录

测试目录,数字是变更点.有九个

我们打开一个ts文件,虽然没有学过但是还是可以理解个大概

这个文件时扩展文件的测试文件

这没有什么好说的

这边这个东西,在vscode的文档里面也有

看官方文档去吧,很详细了

三个文件概览

我翻译了一个少的

这个是作者做这个好用的插件的初心

这个是构建的时候用的一些api很有研究的意思

这个文章就到这里了.下篇继续