Github Copilot - AI Programming in Your Editor
In this post you will learn such artificial interlligence tool which is called Copilot. So what is Copilot at all?
As you can see I opened Github website and here we have an additional feature which can help us while coding.
You must know that Copilot is not a free tool and at the time of writing this post subscription costs $10 per month
When we are talking nowadays about AI tools mostly people are talking about ChatGPT. But Copilot tool was release half of a year before in June 2022 for personal use. And the main point is that it is a focused product. This is already a product which is being used by a lot of people and is being successfully sold.
If we compare ChatGPT with Copilot they are completely different. Inside ChatGPT you simply type something in the chat and get answers for any question.
Copilot is completely different. It is just a product for programmers. Which means that we are writing code or comments and Copilot using AI tries to help us and generate some code that we can directly use.
Copilot won't answer your questions and help you in anything. It will only try and suggest the best possible code for you.
The last thing that you must remember before we start coding is that this is a proprietary tool. Which actually means that it's not open source, nobody knows what is inside and if you are working for some company and have a legal contract you must read your contract before you use Copilot.
Why? Because you will send your code to Github. They are writing inside their FAQ that everything will remain private but it doesn't matter. If your contract says that you can't publish anything to the internet then your are violating the rules of your contract.
This is why in lots of companies you simply can't use it because it is not approved inside a company.
Real example
In one of the previous posts we built a table inside React with sorting and filtering. Inside we fetched data from API and splitted code in different components like Header, HeaderCell, Content and so on. But here I don't want to talk about the code inside this project but I want to try and write exactly the same code with the help of Copilot so you can see on the real example how it works and where it shines.
Here I'm in the empty file of UsersTable and we can directly see the autocomplete of Copilot that I can apply by hitting tab. I didn't even type anything but from my file extension Copilot can guess what I want to write.
As you can see Copilot suggests lots of code that we can just paste. It suggests that we create state for our users, added data fetch and wrote markup for the whole table.
The question is from where Copilot got this code. Typically Copilot can suggest the whole code from public repositories of Github or from history of working with other developers if they allowed to use their code in Copilot.
This is why as you can see it can help us tremendously. Yes the fields inside the table is a bit wrong but the whole thing with state, fetching data and rendering the table is exactly what we wanted.
Now I change API url and remove markup completely as I want to split it in different component. I also added a columns property which is just an array of our columns and Copilot can't help with defining them.
This is how I defined what component I want to create next. This is enough for Copilot to understand correctly what I want to do.
As you can see Copilot guessed correctly the whole code that we wanted to write inside our Header component. We didn't write even a single symbol.
Now we do a definition of our Content and let's see what Copilot does.
It generated correctly content rendering in efficient way. As we defined users and columns as props it understood that we want to render rows and even did it without columns duplication.
Sorting
Now we need to implement sorting in our header cells. In order to do that I again defined what properties I want to pass to HeaderCell component and Copilot guessed 90% of logic inside correctly.
There are small adjustments that are needed but almost all code is exactly how we need it.
Filtering
Exactly the same happens with filtering. Buy defining correct props we got a correct autocomplete from Copilot which allowed us to save lots of time.
As you can see there is an inner state and a handle with all markup that we need.
With Copilot suggestions is it much easier and faster to write your code.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
