vscode-open-the-web-page: A JavaScript repository from udplus

Demo

Introduction

Viewing documents directly in vscode, open web pages, and support custom bookmarks!

The project was inspired by vue docs.In vscode's extended market, vue-docs has 4,033 installations and 6,896 downloads

usage

To use, press F1 then type open the web page then press Enter, select the desired item from the drop-down list.Press ESC to exit。

Add a bookmark

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/"
},

Multi-level bookmark

The extension recursively iterates through all the object properties in the setting until the property is not an object.

So you can write a nested object like the one above to represent a multi-level bookmark.

One trick is to put a "/" after the category to indicate that there are child bookmarks

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/",
},

Which web pages cannot be opened

Set 'x-frame-options' to 'deny' or 'frame-ancestors:none'. Web pages cannot be nested in an iframe, for example: MDN, GitHub
This page relies on localStorage or cache, for example: codelf
File://protocol local file

If you think this plugin is good, can you give me a star?

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

中文文档

简介

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

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

用法

请按 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/"
},

多级书签

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

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

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