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

Demo

简介

插件名字叫“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

转载于:https://juejin.im/post/5c7aec6ee51d457c042d453c