Home » Technology Trends » Never code alone, introduce Copilot

Never code alone, introduce Copilot

JSLancer Blog - Sharing knowledge on technology trends & software development

The Alpha version of Github Copilot is released recently, and it made a bang on HN. As a huge fan of Github and code completion, I am eager to see what can help me code faster.

From day one, it makes me really excited. Believe me or not, I think it is the best code completion tool at this time.

What is Github Copilot, and how does it help us?

GitHub Copilot is a product of the partnership between Microsoft and OpenAI company.

OpenAI is already a famous AI and machine learning company; they are the author of DeepMind – the famous AI engine that beats several competitive StartCraft 2 and Dota 2 players!

“OpenAI Codex was trained on publicly available source code and natural language, so it understands both programming and human languages.”

copilot.github.com

Copilot collects data from the open-source repositories on GitHub or public forums. It can read what you are writing in the code editor, like a variable name, an uncompleted function, and then the AI will bring some solutions to complete what you are doing faster. As a result, you will save a lot of time looking, which means code faster, less work, and more productivity for us.

How good are the suggestions?

First example

Let’s get started with some simple functions to see how good are those suggestions. Suppose that you are creating a signup form, and you are going to write some input validation functions. So I make a file called validationHelper.ts and write a function to validate an email address.

Let’s write the first line.

export default function validateEmail(input: string) {

And then I wait for 3 secs, it shows a suggestion, and I just need to press the “tab” or “enter” to apply this suggestion to my code.

The suggested regex pattern is correct. It is also tested against my variable name “input,” which is exactly what I want.

I also write another function: validateWebsite, and it also works well. It also suggests a function: validatePhoneNumber. Is this a mind reader?

Second example

Trigger file download in the browser is a reasonably common frontend task. We usually create a hyperlink element, set the href to the download URL, insert the element into the document, and then simulate clicking on that element.

The first suggestion is not really what I want because the hyperlink element is not removed from the document after the downloading has been triggered. Fortunately, Copilot can provide some other suggestions if the first of suggestions doesn’t match your goal.

It looks great! Honestly, although I am a senior developer, I always find myself on Google to find these snippets.

Third example: Create Login Form

Let’s create a login form using react-hook-form. This is my favorite form library due to its popularity, ease of use, and performance.

So I started by writing these 2 lines:

import { useForm } from 'react-hook-form

export default function LoginForm() {

This time, the suggestions are NOT correct anymore since Copilot fails to recognize the react-hook-form and shows hints of formik instead. So I cannot use any of these suggestions.

Maybe in the future version, Copilot should evaluate the coding context better.

Conclusion

Currently, GitHub Copilot supports five languages such as Python, TypeScript, JavaScript, Ruby, and Go. 

Suppose you are developing an app with one of those coding languages; you should try it right now. If not, you have to wait for a new update. As a ReactJS front-end developer, I will continue to use it as much as possible.

The commercial product of Copilot may be launched soon. I am really excited to see what they will bring in the commercial product. Right now, I hope they can improve Copilot, and it should understand our code better.

Thanks for reading, and happy coding.

Copywriter: Felix Le & David Tran

Any comments, please send to: hello@jslancer.com.