How to Use GitHub Copilot Labs to improve your Code Quality and Productivity

[kevin_comba]

I am a computer science student at Kenya's Kirinyaga University and a Microsoft Learn Student Ambassador. As a student, I am committed to gaining new skills and knowledge in the field of computer science, and I am always looking for opportunities to apply my knowledge and make a difference. More about me 
.
As a student new to coding, you will face numerous challenges with software development in general these include things like:

- Code quality
- Productivity
- Debugging code

- Fixing bugs in code

- Explaining code

- Commenting Code

These are just a few of the issues you may encounter. Out of curiosity, you might write a simple calculator program in JavaScript and then try to find its code equivalent in Python or C#. Visual Studio Code GitHub Copilot Labs will make your life easier, and your learning curve will be less steep.

 

What is GitHub Copilot Labs?

GitHub Copilot is a groundbreaking AI pair programer for developers, but we’re just beginning to explore the future of coding. GitHub Copilot Labs is a companion VS Code extension it is separate from (and dependent on) the GitHub Copilot extension. Labs provides ground for experimental applications of machine learning that improve the developer experience.

 

Getting started GitHub Copilot Labs

We will ve showcase the power of GitHub Copilot and Copilot labs with a JavaScript example.

 

Requirements:

1. An active GitHub Copilot subscription. Visit the Copilot QuickStart to learn more.

2. You must have the main extension of GitHub Copilot installed alongside Labs.

3. Install node.js. Get it here, for our test case will require it.

4. Click on GitHub Copilot Labs to install the VS Code extension else open your VS Code and search for GitHub copilot labs as shown below.

Search for Copilot Labs

5. Click install, after installation you should see a GitHub copilot labs icon on your left side menu.

Verify your installation.

Let’s create a sample project.

Suppose we have a simple function called isPalindrone (A palindrome is a word, phrase, number, or other sequence of characters which reads the same backward or forward. Example eye, level, radar).

Let’s setup our example.

1. Create a folder name it test folder and drag it on to VS Code or right click on the folder and open with VS Code.

create a folder

2. Create a file.
3. Name it explaining.js.

4. Write the below code snippet on explaining.js file.

   function isPalindrome(s) {
       s = s.toLowerCase();
       let i = 0;
       let j = s.length - 1;
       while (i < j) {
           if (s[i] !== s[j]) {
               return false;
           }
           i++;
           j--;
       }
       return true;
   }
   
   isPalindrome("deified");

What can Copilot Labs do?

1. Explain what the code does. 

Explain what the code does

•  Highlight all code.
•  Select code does the following.
•  Click ask copilot.

The results show five points explaining what the code above does.

2. Explain code - GitHub Copilot Labs can assist us in understanding our sample code by providing a step-by-step explanation.

Explain code - GitHub Copilot Labs can assist us in understanding our sample code by providing a step-by-step explanation

•  Click on the GitHub copilot labs icon.
•  Click on explain.
•  Highlight all you code.

As you can see, we have 4 points explaining our code auto generated by copilot labs.

•  Show code example – This option lets copilot give you several instances of our function being called with different inputs and expected results.

3. Language translation - converting code from one language to another.

• Select language translation.
•  Highlight all code you want to be translated.
•  Select any language. I choose to select python.
•  Click ask copilot.

JavaScript to Python

• Moment of magic. Python code is auto generated for you, equivalent of the JavaScript on your right-hand side.
•  The same case if Select Java, Our JavaScript code will be converted to Java.

JavaScript to Java

•  The same case if Select typescript. Our JavaScript code will be converted to typescript.

JavaScript to TypeScript

4. Debugging code – Copilot Labs injects output functions (console.log) to enable you to track how your valuables are changing during iterations. This is helpful during debugging your code.

•  select Brushes category.
•  highlight all your code you want to debug.
•  Click Debug.

•  Injected code which helps you to track the values I and j as they change in the program.
•  Let’s run our function using this command ‘node explaining.js’ on the terminal (to open terminal on windows use ctrl + ` )

Our console is filled with pair of values tracking I and j while the program is looping.

5. Fix Bug – assuming you have made a typo on your variable names example instead of s[i] !== s[j], you make a typo and have this instead s[k] !== s[u].
   •  Our error. Highlight all code.
   •  Click fix bug.

Fix Bug

Copilot labs fixed the typo and just like that your bug free with a click of button.

6. List steps – this feature will document your code explaining every step your code is doing. Simply highlight your code and press List steps button.

7. Code Formatting - Clean formatting your code by removing unnecessary comments which might make your code look dirty. Simply highlight your code and press clear button.         

before

after

Summary

This is just some of the features which are currently available now. New features are always being added to this library. GitHub Copilot Labs is trying to solve the challenges faced by developers in writing and collaborating on code by providing real-time feedback, suggestions, and best practices to help improve their coding experience and skills. To learn more about GitHub Copilot Labs, read their official site.