How to Use AI (Artificial Intelligence) for Coding

Max Hammond – Senior Frontend Developer at PushON

As you might expect, there is almost always controversy about AI and its uses. GitHub Copilot is no stranger to this, as in November 2022, a lawsuit was filed against GitHub claiming that “Copilot ignores, violates, and removes the Licenses offered by thousands — possibly millions — of software developers, thereby accomplishing software piracy on an unprecedented scale.”. However, the suit was dismissed in June 2024 by a San Francisco judge. While GitHub Copilot remains in the clear, albeit legally, for now, it’s important to use it with caution and remain aware of the ethical concerns, as with many other AIs.

Introduction to GitHub Copilot

So, how does GitHub Copilot actually work? In short, it is installed in your coding software, or IDE (Integrated Development Environment), as a plugin. It will read your files, and what you’re typing, giving you live code snippets back in the form of a suggestion, similar to how auto-correct works on your phone as you type.

This is, in a nutshell, how I use GitHub Copilot. I type – it gives suggestions as I go. If I want to accept the suggestion, I simply hit ‘tab’ on my keyboard, and the suggestion is filled out. Next I will show you how to set up and use it in your work environment.

Getting Started

As you might expect, you need a GitHub account. Once you’ve registered, and then bought a plan (or activated the free trial), you can start using it. The easiest way is to install it as a plugin in your IDE. My IDE of choice is Microsoft’s popular IDE, Visual Studio Code (now known as just Code), so I’ll be going with that as our use case.

Step 1:

Click the ‘extensions’ icon

Step 2:

Search for ‘copilot’

Step 3:

Click ‘Install’

Step 4:

After installing, you will be prompted to log in to GitHub. Use the same account you used before.

Step 5:

Once installed, make sure the extension is enabled. (The enable/disable button is next to the install button).

Step 6:

For good measure, restart your IDE. Then you should be up and running!

Step 7:

You can confirm the extension’s status by clicking the GitHub Copilot icon at the bottom right of Code.

Writing Code With Your AI Pair-Programmer

Now we’re up and running and ready to code. From here, GitHub Copilot will automatically suggest things as you type. It can intercept your current line of code, or suggest one or more new lines of code after a line break. We already covered a simple inline suggestion in the introduction, so let’s try some other things.

A Larger Suggestion

Let’s try some JavaScript. I’m working on a React project and have created a JS file with the comment “Track Google Analytics events here.” I am purposely giving the AI some additional context as to what I wanted to do. Here, it’s given me a whole function as a suggestion. Wow!

GitHub Copilot has understood that I’m working in React, and also considered the comment I’ve just written, giving me a syntax-correct code that uses React’s native useEffect function to run some code. First, it checks if the window object is present, then invokes the gtag function, specifically firing the ‘page_view’ event and passing in some information about our current page as parameters. So it knows we want to use JavaScript to interface with Google Analytics, and has given us a suitable suggestion. Great!

Can You Fix This, Please?

Okay, so we’ve seen a couple examples of GitHub Copilot giving us code suggestions. Let’s finish up by trying another cool feature, Fix This. Here we can directly give the AI a code snippet or entire file, then ask it to do certain things with it. Here we have my CSS class .nav-overlay, which will style some HTML to apply a dark, semi-transparent overlay that appears behind your average popup or modal.

The above shows the process of right-clicking a CSS selector and its properties, and asking GitHib Copilot to “Fix This”. Let’s try it.

GitHub Copilot has gone ahead and tried to fix it automatically, without a prompt. It’s definitely confused itself by jumping the gun here, as it thinks this CSS is missing a curly brace, which it isn’t.

The line highlighted in green is the suggestion, and it has explained its reasoning in the prompt box. We can accept or discard it, but let’s keep going and try a prompt. I like my CSS nice and alphabetical for readability, so let’s try asking for it.

Now we’re getting somewhere. Once again, the suggested code is here in green, and it looks correct. The CSS properties are now alphabetical, and all the values and syntax remain intact. I’m happy with this response, so I’m going to accept it.

Writing Good Prompts

I’ve found the best way to get useful results out of GitHub Copilot is to be brief and precise with your prompts. Use keywords, such as “alphabetical”, or name a specific coding standard you have in mind when refactoring something that may not be up to scruff. Be technical with your language by including words like “sort”, “refactor” and “format”.

Conclusion…

GitHub Copilot has proven to be a valuable tool for me in my day-to-day work, offering numerous benefits that enhance productivity and streamline development workflows. I get the most use out of using its suggestions to write simple code quickly, such as CSS, or easy JavaScript and HTML. When writing more complex features, I’ve found the code suggestions to often be of little help, typically skipping them in such cases. For larger files, I find it to be most useful at the start, suggesting lines of code that can be used as boilerplate and structure, instead of more in-depth logical solutions.

I often get good use out of the Fix This tool, especially for reformatting code to a certain standard. It’s particularly nifty with JSON and CSS, even when giving it large payloads of code at once.

I think the best use of GitHub Copilot is to “speed up” the typical tasks you do, and take some of the grunt work out of your hands. Don’t let it do the thinking for you, and be mindful of the potential drawbacks and ethical considerations.

By balancing the advantages of generative AI with a thoughtful approach to its limitations and flaws, I think developers can start to harness its full potential, while keeping a watchful eye over their AI partner and maintaining high standards of code quality and integrity.

Do you have an eCommerce development challenge for us?

Contact us on 0161 820 7628 or email us today