Visual Studio Code Plugin Development Process Blog

After we have done most of the development for images, the next thing we wanted to do was make sure the extension supports video files in a similar way. The first thing we checked was whether HTML and Markdown allow video previews, and it turned out that they do. We began with the webview, as the HTML looked like a solid place to start testing these formats. We tried <video> tag (like here: https://www.w3schools.com/html/html5_video.asp ) but it wasn't showing the video. Then we tried to create a <iframe> tag but faces the same problem. We also tried the <ambed> and <object> tags but neither worked. So, we started looking for a solution to our problem. Sadly, we found a similar question to ours, which was responded by a vscode bot which confirmed that vscode doesn't support video preview of any sort. After further investigation, we also learned that there is a way to load local images in a different way than what we did, u...

Our next step is to provide the option to view images stored locally on the user's computer. Currently, our extension identifies the URL start position by searching for the closest 'HTTP' to the cursor's position. Local paths don't start with 'HTTP', so we needed to extract the path of the image from the text using other methods. One of the problems we encountered was that we do not know where the path starts but only where it ends (checking for the file extension closest to the current position). Another problem was identifying a path of an image when there are 2 paths one after another. And how we dealt with it: After searching for the HTTP we also made sure there were no white spaces from the HTTP to the current cursor position. If there are any white spaces, then there must be 2 (or more) paths in that substring (or the cursor is not standing on a path). So, to extract the last path (the one we currently stand on), we used...

After developing the entire hover panel end connecting it with the webview (via button), the last thing was to make sure that when the cursor changes its position, the hover panel will change accordingly (if necessary). So, the first thing was to google how "onClickChange"/"onSelectionChange" events work in typescript and the vscode developing environment. We found this GitHub page: https://github.com/microsoft/vscode-extension-samples/blob/master/statusbar-sample/src/extension.ts And under the "statusbar-sample" we found an easy example of how to use vscode "onDidChangeTextEditorSelection" function: Using that code, we realized we needed to rearrange our code a little bit. firstly, we moved the new command we made ("newTabCommand") to a new function which is called at the beginning of the "activate" function: The next thing was to move the main condition from the "activate" function to ...

Up until now, we developed : 1. A hover panel that shows the image we are hovering over 2. A webview that shows an image, given the image URL. So the next thing we wanted to do was to connect those two things: create an "Open In A New Tab" button which opens the image in the WebView panel we already developed. We knew that the Markdown string needs to execute the initialization of the panel and the HTML in the panel. Then, We found this documantation: https://code.visualstudio.com/api/extension-guides/command and this code block, which looked a lot like ours: But, the command we need to execute is longer than that and is not a vscode API command. Luckily, we found the next code on the same page: So, we followed those two code blocks and made a new command "newTabCommand" under our  "previewHover" extension command.  **basically, all we did was to replace the: ( name : string = 'world...