Beta test of Github Copilot X : The GodMode for developer 💪
Tags: github, chatgpt, githubcopilot, vscode
Published: 2023-05-17 12:38:53

Today, I received the long-awaited email: “You now have access to Copilot Chat.”
So let’s see how to install it and what it can do!

### Table of Contents:

* Installation

* Discovery

## Installation :

First, you’ll need to wait to receive an email from GitHub notifying you that you’re on the waitlist.
If you haven’t signed up yet: :
[https://github.com/features/preview/copilot-x](https://github.com/features/preview/copilot-x)

So once you receive the email:

![email of github for waitlist](https://cdn-images-1.medium.com/max/2256/1*gPoXc9M9VtrDCpRYE6MnUw.png)

You’ll need to install VSCode Insider (which is VSCode but in Beta) using this link:
[https://code.visualstudio.com/insiders/](https://code.visualstudio.com/insiders/)

Next, once VSCode Insider is open, go to the extensions marketplace and install:

![github copilot nightly](https://cdn-images-1.medium.com/max/2000/1*tOmf5GomKN41Md1_rswv9A.png)


And after that:


![github copilot chat](https://cdn-images-1.medium.com/max/2656/1*izwZmBTMWs5UnaXjduDLhw.png)


Now you have the Copilot tab on the left side:


![copilot tab on left side of vscode](https://cdn-images-1.medium.com/max/3500/1*fQsej10-9ustpWqFMZSp0w.png)
>  Congratulations, you have just accessed one of the tools that will take you to GodMode 💪

## Discovery :

Now we will ask some simple questions.

First, let’s start with a simple test in React: Write a login form. It took some time for Copilot to generate the code. I’m not sure why, but it didn’t understand that I was asking for React-specific code.

![question to copilot](https://cdn-images-1.medium.com/max/2000/1*hK_u5PX6UVTFDS8G3FLPeA.png)


So I asked again, this time selecting my code:

    

```javascript
import React from 'react';
   
    const Index = () => {
        return (
            <div>
               
            </div>
        );
    }
   
    export default Index;
```

Copilot responds:
“GitHub Copilot: Sure! Here’s an example login form using HTML and CSS that you can add to your Index component:"
[CODE]
"This is just a basic example, but you can customize it to fit your needs. Let me know if you have any questions!"

   

```javascript
 import React from 'react';
   
    const Index = () => {
        return (
            <div>
                <form>
                    <label htmlFor="username">Username:</label>
                    <input type="text" id="username" name="username" required />
   
                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" name="password" required />
   
                    <button type="submit">Login</button>
                </form>
   
                <style jsx>{`
                    form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
   
                    label {
                        margin-top: 1rem;
                    }
   
                    input {
                        padding: 0.5rem;
                        margin: 0.5rem;
                        border-radius: 0.25rem;
                        border: none;
                        box-shadow: 0 0 0 1px #ccc;
                    }
   
                    button {
                        padding: 0.5rem 1rem;
                        margin-top: 1rem;
                        border-radius: 0.25rem;
                        border: none;
                        background-color: #0077cc;
                        color: white;
                        font-weight: bold;
                        cursor: pointer;
                    }
   
                    button:hover {
                        background-color: #005fa3;
                    }
                `}</style>
            </div>
        );
    }
   
    export default Index;
```

By the way,
I forgot to show you, but there are some handy buttons for the generated code:
The first one allows you to copy, the second one to insert where your cursor is, and the last one to insert into a terminal or a new file.


![copilot button](https://cdn-images-1.medium.com/max/2000/1*jYuDt9GzVN1Ke8o2-tYm_A.png)


That’s great! Now let’s interact with the generated code by making a request, for example, to not create a style tag and to use styled-components instead:

“Sure! Here’s an example login form using styled-components in your Index component:”

   

```javascript
 import React from 'react';
    import styled from 'styled-components';
   
    const Form = styled.form`
      display: flex;
      flex-direction: column;
      align-items: center;
    `;
   
    const Label = styled.label`
      margin-top: 1rem;
    `;
   
    const Input = styled.input`
      padding: 0.5rem;
      margin: 0.5rem;
      border-radius: 0.25rem;
      border: none;
      box-shadow: 0 0 0 1px #ccc;
    `;
   
    const Button = styled.button`
      padding: 0.5rem 1rem;
      margin-top: 1rem;
      border-radius: 0.25rem;
      border: none;
      background-color: #0077cc;
      color: white;
      font-weight: bold;
      cursor: pointer;
   
      &:hover {
        background-color: #005fa3;
      }
    `;
   
    const Index = () => {
      return (
        <div>
          <Form>
            <Label htmlFor="username">Username:</Label>
            <Input type="text" id="username" name="username" required />
   
            <Label htmlFor="password">Password:</Label>
            <Input type="password" id="password" name="password" required />
   
            <Button type="submit">Login</Button>
          </Form>
        </div>
      );
    };
   
    export default Index;
```

Wow… impressive! Let’s do another test. I’ll add a useState hook and ask Copilot to continue the code by selecting it.

I'll simply ask the question:
"Continue my code, add the useState and display 'Hi' when you submit the form."

The real power here is that since I’m selecting my code, there’s no need to copy and paste it for Copilot to understand.


![select of my code](https://cdn-images-1.medium.com/max/2244/1*gYlxMDyv8J04DDZGpUyTwg.png)


Here’s the generated code:

   

```javascript
 const Index = () => {
      const [formData, setFormData] = useState({
        username: '',
        password: '',
      });
   
      const handleChange = (e) => {
        setFormData({
          ...formData,
          [e.target.name]: e.target.value,
        });
      };
   
      const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);
      };
   
      return (
        <div>
          <Form onSubmit={handleSubmit}>
            <Label htmlFor="username">Username:</Label>
            <Input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleChange}
              required
            />
   
            <Label htmlFor="password">Password:</Label>
            <Input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              required
            />
   
            <Button type="submit">Login</Button>
          </Form>
        </div>
      );
    };
   
    export default Index;
```

Indeed, it’s noticeable that Copilot continued your logic and even improved it by grouping the states into an object.

## Conclusion

And there you have it, we’ve come to the end of this test. It’s truly impressive to witness the capabilities of this tool and the incredible time savings it offers.
I believe that in the future, these tools will become indispensable for producing rapid and high-quality work.
Don’t let yourself fall behind!

This is my first article on this website, so please don’t hesitate to give me your feedback. Feel free to point out any errors as well!