阅读 465

在vscode中打开网页文档,还能存多级书签

Demo

kq2ghD.gif

简介

插件名字叫“open the web page”, github仓库地址

直接在 vscode 中查看文档,打开网页,并支持自定义书签!

项目灵感来源于vue docs.在 vscode 的扩展市场中,原vue-docs 有 4033 个安装量和 6896 个下载量。

然而vue-docs虽然能自定义书签,但是只能是一级书签,光是一个vue生态全家桶就一大堆了,而且有时候我不想存书签,只想直接打开一个网址。

其实这个插件我半年前就写好了,一直没发布,自己用着,平时看文档直接在vscode中打开,内存消耗比在Chrome的小,打开好几个都没有感觉到卡顿,又不用来回切换,还可以分屏!

由于vue-docs一直没有添加这些功能,我就整理发布了。

功能改变

  • 去除了根据语言选项自动选择对应默认书签,改为默认没有书签,需要什么语言的文档只要添加对应网址就行了
  • 递归设置中书签的属性,直到属性不是一个对象,从而实现多级书签,只要写成嵌套对象的形式就行了
  • 增加一个选项,可以直接填入URL,直接打开网页

用法

请按 F1,然后键入 open the web page,然后按 Enter,从下拉列表中选择所需的项。按ESC退出

添加书签

按下面顺序步骤打开 setting.json 文件,参考下面的例子写上配置字段,默认没有任何书签,如果你比较熟悉 vscode,可以不按此顺序

File -> Preferences -> Settings -> open the web page configuration -> "openTheWebPage":{}

Settings template

"openTheWebPage": {
  "Vue/": {
    "Vue": "https://cn.vuejs.org/v2/guide/",
    "Vuex": "https://vuex.vuejs.org/zh/",
    "Vue Router": "https://router.vuejs.org/zh/",
    "Vue SSR": "https://ssr.vuejs.org/zh/",
    "Nuxt.js": "https://zh.nuxtjs.org/",
    "Vue CLI 3": "https://cli.vuejs.org/zh/",
    "VuePress": "https://vuepress.vuejs.org/zh/"
  },
  "React/": {
    "React": "https://react.css88.com/docs/getting-started.html"
  },
  "webpack": "https://webpack.docschina.org/concepts/",
  "sass": "https://www.sass.hk/docs/"
},
复制代码

多级书签

扩展会递归地遍历设置中的所有对象属性,把它们展示成列表选项,直到该属性不是对象为止。

因此,您可以编写像上面这样的嵌套对象来表示多层书签。

一个技巧是在类别后面加上“/”来表示有子书签

example:

"openTheWebPage": {
  "Vue/": {
    "Vue": "https://cn.vuejs.org/v2/guide/",
    "Vuex": "https://vuex.vuejs.org/zh/",
    "Vue Router": "https://router.vuejs.org/zh/",
    "child bookmarks/":{
      "child bookmarks":"url..."
    }
  },
  "React/": {
    "React": "https://react.css88.com/docs/getting-started.html",
    "child bookmarks/":{
      "child bookmarks":"url..."
    },
  },
  "webpack": "https://webpack.docschina.org/concepts/",
},
复制代码

哪些网页不能打开

  • 将“x-frame-options”设置为“deny”或“frame- ancestry:none”。Web 页面就不能嵌套在 iframe 中,例如:MDN、GitHub
  • 这个页面依赖于本地存储或缓存,例如:codelf
  • file://协议开头的本地文件

已知问题

  • vscode 在打开webview中没有鼠标右键菜单,但可以选中文字按Ctrl+c来复制
  • vscode 在webview顶部选项卡附近会鼠标失焦,让鼠标右键打开vscode菜单后会自动关闭,这是vscode的问题,解决方法是不要在webview附近右键,在其他代码页点击右键

如果您觉得这个插件不错,您能给我一个 star 吗?

github: https://github.com/zhhlwd/vscode-open-the-web-page

关注下面的标签,发现更多相似文章
评论