A Few Tips for React Developers Using Github Copilot

Like most developers these days I am very interested in AI and the potential it can have on our workflow. I don’t believe for a second it will take our jobs anytime soon but I do believe it can really help us be more efficient as developers and help us focus on the more interesting tasks in development. (It will also make the business side of companies more greedy for features and increase their expectations of what can be delivered but that’s a whole other topic!)

I spend most of my programming days working with React. I just love building dynamic UIs! There is something deeply satisfying about being able to visually see your work that really resonates with me. I also have loads of ideas for web apps that I would like to build and features I want to implement. So much to do and so little time!

Therefore tools such as Github Copilot and ChatGPT really appeal to me. I wanted to share how I am currently using them and how I would like them to evolve in the future.

Github Copilot in VSCode

First and foremost I use Github Copilot in VSCode. When it originally came out and it cost $10/month I was agast at the fact we had to pay so much for a VSCode extension. However, now I am more than happy to pay this much each month. The benefit it brings my workflow is more than worth it.

How I use Github Copilot Extension

There are a few ways to access Github Copilot in VSCode. You can click the chat extension icon in the extension panel or you can access it quickly via the shortcut cmd + shift + I I prefer the keyboard shortcut because it opens the chat window above your coding window so you don’t lose any screen real estate space.

Github Copilot chat opening via the cmd + shift + I keyboard shortcut

This is great for asking questions to copilot like explaining some code or asking it to write tests for the selected code.

Inline Github Copilot

There is also the option to use the keyboard shortcut cmd + I in a file which brings up a smaller window where you can ask copilot about some selected code or to suggest some code to implement.

Using Github Copilot with Alfred

I also use a tool on my mac called Alfred. Alfred is labelled as a productivity app and it has a whole tonne of features. The one I use along with copilot is the “Snippets” functionality. This allows me to access a library of custom snippets I wrote anywhere on my mac.

So when I am in VSCode I can press my global keyboard shortcut ctrl + shift + S and it brings up my snippets library where I can search for text snippets. I have started adding prompts into my snippets library such as:

Create a React Component with Props and use type instead of interface with a string prop of `example`

Add the following:

import { useForm } from 'react-hook-form';
import { handleUnknownError } from 'utils';
import ControlledTextField from '@/components/common/controlled-text-field';

const [formError, setFormError] = useState<string | null>(null);

const onSubmit = (formData: FormTypes) => {
    setFormError(null);
    console.log('formData:', formData)
  };

in the return statement is a form element like <form onSubmit={handleSubmit(onSubmit)}> 

In the form element include a Stack component from mui - direction column

Include in the Stack component two ControlledTextField components. something like <ControlledTextField name="field1" label="Field 1" control={control} />

Include a Primary button like:

<PrimaryButton type="submit">
          Sign In
        </PrimaryButton>

Include this code also
      {formError && (
        <CenterDiv>
          <ErrorText>{formError}</ErrorText>
        </CenterDiv>
      )}

include this line: import { CenterDiv, ErrorText, PrimaryButton } from 'ui';

By splitting the prompts down into concise requests you can chain them together. For me this is better than hardcoding snippets because its composable (I am thinking Unix functionality here) and easier to write in the first place.

Using this in combination with Github Copilot chat enables me to quickly create a new React component file with boiler plate to implement some form using react-hook-library. I use this library quite a bit and implement quite a few forms so this is super useful for me. The above prompts give me this code:

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { Stack } from '@mui/material';
import { CenterDiv, ErrorText, PrimaryButton } from 'ui';
import ControlledTextField from '@/components/common/controlled-text-field';
import { handleUnknownError } from 'utils';

type MyComponentProps = {
  example: string;
};

type FormTypes = {
  field1: string;
  field2: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ example }) => {
  const { control, handleSubmit } = useForm<FormTypes>();
  const [formError, setFormError] = useState<string | null>(null);

  const onSubmit = (formData: FormTypes) => {
    setFormError(null);
    console.log('formData:', formData);
    // handle form submission...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Stack direction="column">
        <ControlledTextField name="field1" label="Field 1" control={control} />
        <ControlledTextField name="field2" label="Field 2" control={control} />
      </Stack>
      <PrimaryButton type="submit">Sign In</PrimaryButton>
      {formError && (
        <CenterDiv>
          <ErrorText>{formError}</ErrorText>
        </CenterDiv>
      )}
    </form>
  );
};

export default MyComponent;

This saves me a tonne of time on initial boilerplate. By splitting the prompts down into concise requests you can chain them together. For me this is better than hardcoding snippets because its composable (I am thinking Unix functionality here) and easier to write in the first place. I could add another prompt to import react-query for example and Github Copilot would collate all my prompts together and output a file that imports everything in the right place and puts all the hooks in the right place etc. A very powerful way of creating dynamic boilerplate code.

VSCode Speech Extension

There is another extension I am playing around with which is a VSCode Speech extension. This is relatively new and I am just experimenting with it at the moment but by implementing the below keybindings:

{
    "key": "cmd+u",
    "command": "workbench.action.chat.startVoiceChat",
    "when": "!voiceChatInProgress"
},
{
    "key": "cmd+u",
    "command": "workbench.action.chat.stopListeningAndSubmit",
    "when": "voiceChatInProgress"
}

This allows you to press cmd + u in VScode and it takes you directly to Github Copilot chat and you can speak the prompt instead of typing it. Very nice!

I have tried this out and sometimes the listening event ends too soon. This means you are mid-sentence and maybe thinking exactly how to phrase your prompt but the extension thinks you have finished speaking and makes the request to Copilot. Therefore only half of your actual prompt is sent to Copilot. So you have to be clear what you want to say before starting this speech request!

Github Colipot now using GPT-4

As a side note, I recently unsubscribed from ChatGPT. The reason being is I was using the in browser application predominantly for coding questions/inquiries. Now I know Github Copilot utilises GPT-4 I see no reason to pay for two subscriptions. ChatGPT costs $20 a month and Github Copilot costs $10 a month. Seems like a no brainer especially now you have the chat window in VSCode.

I want to tell Copilot to make a react component file with certain boiler plate and I want it to actually create the file, name it and put the boiler plate code in the file.

My hopes for evolution

Our evolutionary path as developers

Here is a short list of features I would like in the future with Github Copilot (they may already be available as this is moving oh so fast so apologies if this list is out of date or just wrong)

Copilot to actually create files — I want to tell Copilot to make a react component file with certain boiler plate and I want it to actually create the file, name it and put the boiler plate code in the file. I want this to happen in seconds. This would really increase my speed.
I want to ask Github Copilot to take a holistic view of my app and suggest improvements in terms of code structure, test coverage and just general improvements.
I want to ask Github Copilot to refactor certain code and do it quickly, show me the result and then go through it together. Ultimately pair programming with Copilot.
I want Copilot to bring up the documentation in VSCode at the specific relevant part and be able to explain it to me well.
I want Copilot to provide many examples of a specific library. For example when learning RxJS copilot wasn’t that great and I could see it getting confused (whatever that means for AI) and it started spouting nonsensical things.

Conclusion

AI is here to stay and it’s a really useful tool if you are happy to embrace it. The innovation happening at the moment is really opening doors for so many developers who recently just faced to many barriers to progress. Taking a bit of time to understand how these tools can work for you can really increase your workflow and enable you to do more with your time and work on more interesting things. I think its a great time to be a developer!

About me

I am a Frontend Developer working mainly with React and Typescript in my day to day professional life. I love exploring new tools and libraries and love the Javascript Ecosystem.

I like to write blog posts that share exciting new tools I’ve discovered, how-to articles and also the occasional opinion post.

I live in Prague in the Czech Republic with my family.

Check out the original blog post on my blog.

Frontend Development with Adam Drake