Working with Github Copilot

How an AI can improve your coding speed drastically

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

Image 3a745b6b4325

Image 1b10f916ba56

Image fce20a54bd33

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.

Image 2349c4814bb3

Image b0b4e779d117

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

Image ee9960a38080

Image 8a25c744f100

Image 811cfdc2ad44

Image afa67dbd0151

Suggestions for reducer

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

Image 60c212ca3a8e

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!

Image 527d8f89f516

Image 2862682d35a2

Image e733d5a797ca

CSS completions

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

Image 4835f6a1a839

Image 10bd8559f56a

Image 9d593d7bd6c9

Image fbfcc0b75a5c

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.

Image db94b45feb59

Image 202c014c2cad

Suggestions

Related

Addendum

Languages