Working with Github Copilot

How an AI can improve your coding speed drastically

Tom • Tools & Development, Machine Learning •

Fasten your seatbelts

I was recently approved to use Github Copilot with my private Github-account and have been able to use the tool during my day-to-day programming ever since. In this article I want to share my first experience with this powerful code assistent.

What Github Copilot does - and what not

Github Copilot is exceptionally good at understanding the context you’re currently working in and can therefore provide very precise code completion suggestions. This also means that developers will rely less and less on predefined code snippets, for instance to quickly lay out an asynchronous function or React.js-component.

Github Copilot can detect the pattern you’ve been using, for instance by analyzing an array of data points or an interface, and can correctly use this information when it accesses this data in a function call, to provide a simple example.

The tool does not code everything for you. It understands the current context and your intentions, and is able to provide very accurate code suggestions based on this information.

Real-world usages in my hobby projects

Alright, enough of the background information! If you want to learn more about Github Copilot’s implementation, please check out the links in the addendum at the end of the page.

The rest of this article will show my real world experiences with Github Copilot. Overall I can conclude that it’s the most powerful coding assistance I’ve ever seen. Considering this is just the very first version, it’s even more impressive how Github Copilot understands my intentions and can provide the right suggestions.

Javascript

Let's start with some plain Javascript code completions. The suggestions correctly infer the context and understand my intention to write a new route or

React.js and hooks

The following screenshots show my first encounters with suggestions for React's hooks, any they are impressively accurate. The first screenshot shows a tab-handler, which wasn't yet implemented in the component (the tab container itself was implemented).

The other screenshot was taken in the article-component, and as you can see it correctly assumes I also want to load the related translations in this part of the code.

The next examples show how Github Copilot correctly infers other parts when developing React.js-components.

Suggestions for reducer

Probably the most impressive experience I had was when the tool provided basically a complete reducer to use with useReducer.

JSON-files for translations

The following suggestions are also really impressive, as they not provide code completion, but correct translations. All translations are scoped under each locale, and for the german files Github Copilot provided german translations for the english keys. Mind bending stuff!

CSS completions

Also really well are suggestions for Tailwind.css-styles. The provided code completions are spot on and are correctly inferred from context.

Next.js

Beyond React.js, Github Copilot also understands the the context of a Next.js-project and can provide relevant suggestions, for instance when writing the server-side code for static site generation strategies.

Actions

Feedback

Suggested Posts