Master Github Copilot AI for React in VS Code
Is AI Pair Programming the Future?
A few weeks ago Github announced a state-of-the-art, AI-based pair programmer beta extension for VSCode which shook considerably the software development industry. While many were concerned this AI tool will take our jobs this is definitely not the case yet. This past month I’ve been testing Github Copilot in many projects mainly JS and both on the frontend, backend, and also for other more uncanny tasks.
1. How It Works
Once you have registered for the beta program, you will get a notification you are eligible to test the extension and gain access to it via the VSCode Extension Marketplace after that you are pretty much good to go. Now, whenever we write some code the extension will give a suggestion on how to complete the line in a light gray tint and we can press `Tab` to accept it.
Another way to use the extension is by writing comments and having the GPT-3 powered mammoth hog your resources to generate a common interview question solution such as how to invert a binary tree😋.
But what if we don’t like the suggestion, by pressing `CTRL + Enter` a tab with 10 complete suggestions (not one-liners) appears on the right side.
It’s incredible how fast you are able to generate lines of code to solve simple tasks such as fundamental algorithms or even more specialised tasks.
2. What It Can Do
We saw in the previous examples that it’s pretty great at responding to interview questions hopefully making them obsolete in the future since I still haven’t reversed a linked-list nor inverted a tree in production.
Answer interview questions & solve simple algorithms
Let’s test it with some LeetCode (an amazing platform for learning algorithms and getting ready for interviews) questions such as
Merge two sorted lists (Easy)
Add two numbers (Medium)
For hard difficulty questions, the copilot doesn’t always hit the home run but it does give some decent suggestions.
We can say Github Copilot is great at algorithms
This may seem pretty hilarious but one use-case I found copilot really good at is at adding the final parentheses and brackets for map functions in JSX. Everyone loves React and all but the amount of brackets you have to handle sometimes is awful.
Who would have thought we would have an AI save us from bracket hell 👿.
We can say Github Copilot is acceptable at ending lines
Create API endpoints
One thing to note is that Github Copilot like other AI-powered tools for code auto-completion (Tabnine & Kite) benefits from a larger codebase as it learns from it.
If we want a brand new server in GO, (I always promised myself to learn this incredible performance and future proof language) we get this suggestion:
I have no knowledge of GO yet but this looks like a good start for a simple server.
Let’s try this on a Realworld implementation using Nest.js and Prisma as ORM.
Copilot knows to use a deleteAll method from TagService (although it doesn’t exist). Let’s see if it suggest it if we go to TagService.ts
Not really but still a valid guess.
We can say Github Copilot is decent at backend
I want to create an array with all states of the US to use in a dropdown. I’m very bad at geography and not native to the US and our AI friend comes to the rescue:
Honestly, I have no idea if those are correct or not which is a general downside of Github Copilot as it doesn’t validate whether the code works or not or its source.
I have to write some placeholder values for a list of place cards since the API endpoint isn’t ready yet:
We can say Github Copilot is decent at generating values
SQL is really tedious to write and designing a database sometimes requires a bit of imagination, what if we ask Github Copilot to design a database for a CryptoTrading platform since AI and blockchain should become friends as the top technologies of 2021.
This is a great first suggestion from Github Copilot. What if we ask him to add a Wallet and User tables to see if it uses a foreign key with the previous code.
Although it’s not finished it’s an unbelievable amount of decently well-designed fields in a crazy short span of time.
We can say Github Copilot is great at simple SQL
Write ‘good’ copy
What if we want to write a blog post every day and we are really really bad or slow at writing.
Damn this AI is really narcissistic but unfortunately not great at writing markdown, but it’s not at all what it was designed to do.
We can say Github Copilot is not great at Blogging
3. Should You Use It
In my opinion, Github Copilot is a great tool to add to your productivity workflow although is far from complete and requires some performance improvements.
Many consider AI to be the bane of developer existence but it’s a long way until that even becomes a possibility, in the years to come even if AI becomes more and more competent at writing code this will not cause our jobs to become extinct but to evolve and change.
Right now it’s nothing more than a glorified autocompletion tool with extra ‘StackOverflow integration’ capabilities so there’s nothing to worry about.
My final advice is to use it as a fun tool not to depend on it, also there may be some legal issues due to the AI being trained on all public repositories no matter the license which is a rather sensible topic, so using it for production may be undesirable for the long term.
I hope you enjoyed this tutorial of what Github Copilot can do and would love if you put a 💜 on it!
Subscribe to my newsletter
Get email from me about my ideas, frontend development resources and tips as well as exclusive previews of upcoming articles.
Ideas are hard to come by, great ideas are rare but it doesn’t have to be like that. AI, the utterly abstract black box of endless creativity and wisdom can sometimes be of great aid at building the…Read more
April Fool’s is a time where companies like Stack Overflow pull out all the stops to show off their ‘latest and greatest’ features. But it’s also a time where we can look back and see some of the funniest, and most clever, April Fool’s Day jokes from tech giants. Let’s admire a decade of unicorns and tech pranks on Stack Overflow.Read more
Blog images are essential in driving traffic to your blog and increasing your articles reach and performance. However, it’s not always easy to find blog images that are both engaging, unique and…Read more