Visual Studio Code Plugin Development Process Blog

To complete the launch of the project as an open source, we have left to include some more documentation (Contributing guidelines and Code of conduct). We have decided to leave this at the moment and come back to it later (this is about documentation so the writing can be split between the two of us) So, we preferred to continue developing the next feature. As we mentioned, we want to support preview display of CSS file by opening it in a new tab (when clicking on "open new tab" button). We saw that CSS file can be referenced with a full (web page) URL or with a path relative to the current web page (learned this from HERE ). Examples:   A full URL link : < link  rel ="stylesheet"  href ="https://www.w3schools.com/html/styles.css" > A CSS file located in the HTML folder on the current web site:   <link rel="stylesheet" href="/html/styles.css"> A CSS file located in the same folder as the current page:...

After successful progress last time, we decided to try and expand our extension to support another feature that adds the option to display the contents of a collapsed text (another idea that resulted from the previous meeting with our workshop lecturer). We thought that it could be very useful to have that option, especially when all you want is to quickly check something. Since the hover receives Markdown string, we can display the content as text and not as a code display. So, we started looking for creating a new window or another view option. We discovered that in visual studio code we can’t create new UI elements (learned this from this StackOverflow question ). Also, we saw that once you over the line of the collapsed text, by right-click >Peek > Peek Call Hierarchy, it shows the “Call Hierarchy”. Example: We thought about implementing the CallHierarchyProvider (a vscode interface) , but we realized that it missed the goal and it would be ea...

After the "dead end" from the previous post, we decided that a meeting with the workshop lecturer would be a good place to get solutions and new ideas. That meeting gave us some good ideas. The first one we wanted to try and implement was to open the youtube videos in a simple chrome (or other default browsers) window. A quick search brought it can be done similarly to the same option in images. But before implementing this feature we wanted to make a logical design, so it will be easier to add more similar features in the future without making code duplications and a lot of conditions. After reviewing and examining our code so far, we decided it would be a good idea to make an interface with 2 functions to implement: 1. a function that makes the HTML string for the webview. 2. a function that makes the Markdown string for the hover. The main reason we chose these two functions is that they both create different outcomes depending on the file f...