js app development with GitHub Copilot. We'll start with a simple utility function and then see how we can progress to more complicated scenarios. ts file where we want to create a slugify function. This is very common in a lot of apps, but I just...

can't write it off the top of my head. So, I'll create a little comment here saying what we want to create, hit enter, and then immediately GitHub Copilot gives me something that looks pretty accurate. Okay, so it takes in a string, some text, it normalizes it, replaces some things in there, makes it a lowercase, trims it, replaces certain characters. That looks...

pretty nice, but I'm not sure if it actually works yet. Let me select the function, hit command I, and then ask GitHub Copilot to write some unit tests for me with the slash tests command. I could provide more direction here as to what I want to test, but let's just see what Copilot comes up with on its own. So I'll hit enter again.

And now over on the right hand side, it looks like a pretty solid unit test. I'll accept this just to get rid of the green. And then it says that we should convert the text to lowercase, or rather the slugify function should do this. This test case looks accurate.

This test case also looks accurate. We've got special characters in here, removing those trim white space, so on and so forth. So you should... Obviously read through these test cases to make sure they fit your need, but at first glance this looks pretty nice.

So I'm gonna hit command s to save these tests and I will save them in a underscore tests underscore directory just right alongside my utils. Then I'll call the file index dot spec dot ts. We do have a red squiggly line because our import statement Is it quite correct based on where we saved the file? So this is just a simple manual update.

Now comes the moment of truth. Will these tests actually run? Call npm run test unit in the terminal and it doesn't look like it picked up on our tests. Did I name the fall correctly?

No, I did not. Rename that and perfect. All of our test cases have passed. That's how easy it is to create a utility function and test it with GitHub Copilot.

But what about a view component? Can Copilot handle view components? view. Then I'll press command I and tell GitHub Copilot exactly what I want.

That is an image carousel component that takes an images prop and then rotates automatically through those images at an interval of three seconds. Hit enter, and let's see what it comes up with. Great. It looks like a valid view file.

We have a template section, a script section, and a style section. However, it unfortunately uses the Option API for the component definition. I prefer the Composition API myself, but... That's not a problem.

We can direct Copilot to use the Composition API directly inside of this inline chat again if we wanted to. But because this is something I want to happen time and time again throughout the project, what would be better is to set it as a global instruction. md file. Here, we can write instructions in plain English or whatever your language is, and GitHub Copilot will pick up on them in every request to the Copilot.

vue files. Do not use the Options API. And since this is my preference to use TypeScript, I've provided instructions for that as well. Back over in the Image Carousel component.

Let's try our same exact prompt again. This is looking a lot better. I do see script setup and lang equals to yes. So let me accept that.

And then let's try to put this to use and see if it works. vue file, I'll get rid of all the boilerplate code here. And just to save myself a little bit of time, let's get Copilot to import it and use it for us. All right.

I'll accept that, and it looks like we have correctly imported the image carousel. We've used it up inside of the template. And then the images are passed in, which are an array of images from Lorem Pixum, which is what I specified in the prompt. Over in the browser, the result we get is astounding.

Look at there, an image carousel that auto rotates every three seconds with placeholder images to boot. Finally, let's try to get a little crazy and see if Copilot can do something beyond just a single file. Let's try getting Copilot to install Tailwind CSS for us and then style the image carousel component using Tailwind CSS. Now, since I'm not working at a particular spot inside of my app, I'll hit command shift I to open up the Copilot edits pane.

Here I can tell it with a hashtag and the keyword code base that I want my following prompt to have the context of the entire code base. It needs to know that I'm working in a Vue project, that I'm working with Vite, and so on and so forth. And it needs to be able to create files in multiple folders throughout my project. So now let's see what happens if I tell it to install and set up Tailwind.

json file here. What it did is add tailwind-css, post-css, and autoprefixer, which I'm pretty sure is the exact same thing the official docs would tell you to do. Awesome, I'll accept that change. js file.

exports. We're in a more modern project, so really we should be using es-modules. That's a simple enough fix. we can accept that now.

js file. This also looks great. It has the source code being looked for in the source directory. vue files, js files, ts files, and so on.

Once again, we will update this to export default and then accept that. css and added the needed import statements for Tailwind. css. And that's it.

I'll close out these open files, making sure to save the ones that I forgot to hit command S on. That is a little trick you have to remember after you accept the change, you do have to make sure to save the file. Now let's use an h1 in here and we'll just give the text image carousel and then let's use a couple tailwind css classes just to confirm that we're good to go. It says no such file or directory open tailwind css slash base.

json file was updated it didn't actually install those dependencies. That fix is easy enough I'll stop the dev server, run npm install, and then start up that dev server again. Look at that. We now have a Tailwind CSS properly installed in our project, all thanks to GitHub Copilot.

Finally, let's try to use Tailwind CSS to style the image carousel. With the image carousel component open, I'm going to do shift command I to open up the Copilot edits again. This time I want to start a brand new session since we're working with something else now. Notice that the working set does contain my image carousel file since it's open in the editor.

Now let's tell Copilot to style this image carousel in a modern format using Tailwind CSS and also add a nice previous and next button to manually select images in the carousel. After just a few seconds, GitHub Copilot does finish. And what have we got? It looks like we've got some functions to move to the previous image or the next image.

It has removed all of the styles within the style section because I expressly told it to do so. And then it has used tailwind CSS on the different elements within the template. Awesome. Let's accept that, hit save.

And over in the browser, this doesn't look too bad. Here we have an arrow on each side. When I click the arrows, it does advance to the next image. Clicking the previous arrow also moves the images backwards.

So there you have it. js applications. Do you have other ways that you like to use GitHub Copilot? When you develop your view apps, definitely let me know in the comments section below.