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很有研究的意思

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

(0)

相关推荐

  • url/href/src区别

    url/href/src区别

  • 博物馆探秘 ▏上博幽蓝神采—元代青花瓷器大展

    博物馆探秘 ▏上博幽蓝神采 元代青花瓷器大展 "幽蓝神采--元代青花瓷器大展"来自伊朗.英国.美国.日本.俄罗斯等国内外30余家参展单位的90件元青花集体亮相,如此大规模的元青花展 ...

  • 玩转VSCode插件之Remote

    前言 每当更换电脑就要从新搭建一遍开发环境... 每当拉完最新代码程序在本地跑不起来的时候就要检查服务器和开发电脑的环境... 每当服务器上出Bug的时候就想如果可以能够调试服务器代码多好啊.. 你是 ...

  • 景德镇御窑博物馆探秘·上(100多张官窑器美图)

    景德镇御窑博物馆,位于前年瓷都--江西景德镇的市中心御窑厂遗址旁. 这是一座能够纵观古代御窑发展的博物馆,一个世界各国爱好中华陶瓷文化.收藏爱好者必到的网红博物馆.御窑博物馆是景德镇市陶瓷考古研究所4 ...

  • 苹果电脑ps插件怎么安装,Mac上的ps插件安装教程

    Mac上的ps插件如何安装? 很多朋友习惯了PC平台的PS使用,一旦转到Mac平台就变成了小白一个,其中很多ps插件完全不知道如何安装. 不要着急,小编今天就给大家带来Mac上的PS插件安装教程分享. ...

  • 【利器篇】前端40 精选VSCode插件,总有几个你未拥有!

    有句话,事半功倍,其必然是借助了某些思想和工具. VSCode是我们前端开发的武器,本文40+精选插件,让其更加锋利,无坚不摧!! 必备的 下面这些必备的我就不说了 代码段 JavaScript \( ...

  • 15 个必备的 VSCode 插件(前端类)

    精选!15 个必备的 VSCode 插件(前端类) IT程序狮子烨已关注1,165 人赞同了该文章Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰 ...

  • 为了摸鱼,一定不要错过这些VSCode插件!

    VSCode 之所以强大,很大一部分原因就是它通过扩展插件来丰富功能的设计. 再加上 VSCode 早早的就拥抱了开源,各路大神一个个下场分享自己开发的插件. 别的不说,单单想想现在插件市场里上万的插 ...

  • 同家理论深层提示之二:民间“字碰字”绝招原理篇探秘上

    前言 生克.旺衰.平衡.用神.忌神,是子平术的入门基础,非透视吉凶祸福的途径和手段.子平术吉凶祸福的判断依据为民间秘传"字碰字"绝招. "吃饭为了活着,但活着并不是为了吃 ...

  • VsCode插件使用

    这个按钮打开插件管理器 安装扩展# 要安装扩展,请单击"安装"按钮.安装完成后,"安装"按钮将变为"管理齿轮"按钮. 扩展详细信息# 在扩展 ...