Part 2 - How to Create a VS Code Extension for API Health Checks?

Introduction

Have you ever thought about to build a Visual Studio Code extension as your capstone project? That’s what I did: Part 1 - Develop a VS Code Extension for Your Capstone Project.

I have created a Visual Studio Code Extension, API Guardian, that identifies API endpoints in a project and checks their functionality before deployment. This solution was developed to help developers save time spent fixing issues caused by breaking or non-breaking changes and to alleviate the difficulties in performing maintenance due to unclear or outdated documentation.

Let's build your very own extension!

Now, let’s do it step by step.

Step 1 – Install the NPM package for generator-code

Ensure Node.js is installed before proceeding. Verify by running node -v, which will display the installed version.

Check the node installation in your system.

Once Node.js is verified to be installed, run the following command to install the generator-code, “npm install -g yo generator code”

Yeoman generator is a easy starting tools to build the extension

After installation is complete, run this command, “yo code”, in your desired folder to create the project. For this tutorial, I will choose to create a new extension using JavaScript.

Interactive menu in Yeoman generator

You can then fill in the relevant information.

Provide the project information

Once completed your project has been created.

Continue the development in Visual Code

Step 2 – Customize Command

To customize your command, open "package.json" and modify the relevant text.

Fine tune configuration in the package.json

Output the Hello World message in the console, ensure the setup is correct by make it run.

Keep in mind that if you change the “Command” in "package.json", you'll also need to update it in "extension.js".

Continue with some logic testing by writing simple prompt selection.

Run it.

Step 3 – Adding the logic for your extension

In this section of the tutorial, we will explore and utilize the Quick Pick functionality offered by the Visual Studio Code API. This feature allows us to create interactive menus that let users quickly select from a list of options, streamlining their workflow within the extension. I’ve provided a code snippet as an example: if users select "Say Hello", a "Hello World" message will be displayed, and if they choose "Say Goodbye", a "Goodbye!" message will appear.

Pick the definded action from the list.

You should see the corresponding options you just defined.

Step 4 – Testing the Extension

To test your extension, go to the Run menu and select Start Debugging. This will open a new instance of VS Code, called the Extension Development Host, where you can test your extension.

In the Command Palette of the development host go to Show and Run Command, type the name of your custom command, such as "Say Hello," and select it.

This triggers the extension to run according to the logic in your extension.js file, allowing you to interact with and debug its functionality.

Summary

Congratulations! You've just created your first Visual Studio Code extension. Building your extension for your capstone project can be challenging, as you’ll encounter various obstacles while ensuring everything works as expected. Not only does this strengthen your technical skills, but it also enhances key soft skills such as problem-solving, critical thinking, collaboration, and time management. Overcoming these challenges builds resilience and adaptability, preparing you for real-world software engineering roles and professional teamwork.

Acknowledgement

I would like to express my sincere gratitude to Dr. Peter Yau and Mr. Francis Teo for their invaluable guidance and support throughout this project. I would also like to extend my appreciation to the Singapore Institute of Technology, University of Glasgow, and Wizvision Pte Ltd for their ongoing support and for providing me with the opportunity to work on this project.

API Guardian

https://marketplace.visualstudio.com/items?itemName=APIGuardian-vsc.api 

About the Authors

Main Author - Ms Joy Cheng Yee Shing, BSc (Hon) Computing Science

Academic Supervisor - Dr Peter Yau, Microsoft MVP

Group photo from the Glasgow research team: Dr Peter Yau (left), Ms Joy Cheng (middle), and A/Prof Lawrence Seow (right)