00:05
>> There's a couple of extensions that we can install and settings that we can set within Visual Studio Code to make our lives a lot easier whenever we're working with AdonisJS. So let's go and install those now.
00:13
You'll notice first that I have a new bar over here. You've probably had this all along unless you've explicitly turned it off like I had. This allows us to switch out our File Explorer with various other things.
00:23
There's the search icon, source control, run and debug, and extensions. Extensions is what we care about in this particular lesson. Now, if you did hide this away, you can always show your extensions by doing
00:33
Command or Control Shift X. That will take you into a panel like this, where we can search the extension marketplace. By default though, it will show you a list of what you have installed.
00:42
So first, let's take care of the coloring for our Edge files. So to start out with, let's search for EdgeJS, and there we go. We see the Edge Template Syntax Highlighter right here.
00:51
You want to go ahead and install this package. Once you do, your Edge file should start getting highlighted like mine is. Now, it might be different colors. That's going to vary depending on the theme that you have
01:01
installed within Visual Studio Code. By default, it might be something like this. If you're interested in my particular theme, I'm using a theme called GitHub. I have a lot of them, dark.
01:10
Specifically, I believe it's one of the two default options. So there we go. That particular extension would be from the GitHub theme extension. So if you're interested in that one, you can install it just like so.
01:19
That one's completely optional though. Next, there's a theme specifically for AdonisJS called the AdonisJS extension. This one's by Jillian Raboteau, who is a core member for AdonisJS.
01:28
If we click into this, it'll give us a nice little overview of what exactly this extension does. So it's going to give us a command palette for Ace, which is AdonisJS's command line interface.
01:37
It's going to allow us to use all of the assembler commands, which will allow us to make different files within our project in a nice easy manner. Once we get to it, it will allow us to migrate, seed, and run database commands.
01:46
We can write commands from the activity bar, view routes, open and see documentation, offer validation for Adonis RC file. And another really nice one is the go-to controller,
01:56
which will allow us to command control click into a controller from a route definition. Now some of that verbiage you're probably not going to be familiar with at this point in time. Don't worry about it. That'll all come with time later on.
02:05
Now there's also another one by Jillian Raboteau called the Joppa extension. This is AdonisJS's test runner. And this extension is very nice whenever you're working with tests,
02:13
because it's going to offer its testing API integration directly into our code base. And we'll be able to run a specific test just by clicking a button right above that test declaration.
02:22
We can see snapshot information, have snippets and some other things as well. So you want to make sure to install these three. They'll make your lives a lot easier with AdonisJS.
02:30
But there's a couple of non-AdonisJS things that AdonisJS actually provides configurations for if we want to use them. First, Prettier. So we can type in Prettier within the marketplace extension search,
02:40
and we'll see a couple. We see Prettier right here, which is from the official Prettier team. And then we also see Prettier ESLint. Now ESLint is the second thing that AdonisJS provides a configuration for
02:49
if we decide to use it. Now you don't need to install these extensions if you don't want them. But what Prettier will do is it provides code formatting, which means that it's going to make things aligned.
02:58
It'll make sure that our lines don't get too long and things like that, that help make our code overall more readable and standardized. ESLint provides linting.
03:06
Linting is essentially holding your code to a specific set of rules. Things like always including or omitting semicolons, wrapping code within parentheses,
03:15
so on and so forth, things like that. So if you care about both of those, I would go ahead and install the Prettier ESLint extension. If you just want the code formatting, go ahead and install just the Prettier one.
03:25
And if you did choose the Prettier ESLint, there's also a specific ESLint package from Microsoft that works with as well. So you can go ahead and install that too. All of those are completely optional
03:35
depending on whether or not you care about linting and formatting help. Now, if you do care about linting and formatting help, there's a couple of settings that we can change within our Visual Studio Code configuration
03:44
to make these happen automatically for us whenever we save our files or paste code in. So let's go ahead and head into our settings. Within your menu bar, mine's off screen,
03:53
go ahead and hit code, or if you're in Microsoft, it's probably underneath file, and then find settings. It should open up something like this. What we wanna do is get to the underlying
04:02
JSON configuration file. So you can just type in code actions and this should pop up where we can see edit in JSON right here. Go ahead and give that a click
04:11
and it will open up our JSON file and it will look something like this. Now, I have a lot going on here. I have my Visual Studio Code pretty configured, but it's down at the bottom of my configuration
04:19
where some of the options that we care about are. Primarily, these ones right here. If you installed Prettier or Prettier ESLint, you'll wanna set that as your default formatter.
04:28
So you can set editor.defaultformatter and then provide that extension name as the value. This will auto-complete. So if we just provide strings here, we'll see an option
04:38
of all the different extensions that we have. Should be able to just type in some form of Prettier. That will narrow it down and you can select whichever one you have installed there. Then there's two options that we can have
04:47
to have our formatting happen automatically for us. Format on paste, you can set that to true and format on save, you can set that to true as well. And those do exactly what the name suggests.
04:57
It will run the default formatter for the file whenever you paste code or whenever you save your files. And then lastly for linting, if you have that installed,
05:04
you can set editor.codeactions on save. An example of a code action will be like the linter automatically fixing something for us. So that could be things like adding in a line break
05:13
at the end of our files to make sure that it always ends with a clean line or adding or removing semicolons automatically for us. Those are code action examples. So we can have the linter run that automatically
05:22
for us whenever we save our files by setting this editor.codeactions on save and specifically setting source.fixall.eslint and set it to explicit.
05:31
If we give that a save, jump back into our code which is this top option over here in our activity bar and head back into our routes file. Let's remove line 13, which is that last line.
05:41
You'll see this red squiggly over here now. That's our linter suggesting that we have some kind of an issue. And right here, it's specifically saying that we need a new line break. The configuration that we have says
05:51
that we should always end our files with a clean line break. So without hitting enter, I'm just going to click up here at line nine, hit command or control save,
05:58
and it will automatically add that line break in for us thanks to our configuration set. The same thing here. If we replace this import from single ticks to double ticks,
06:06
you'll see now this is all red and underlined because it's suggesting that we replace those double ticks with single ticks as defined by our linter. So we can give this a save
06:15
and it will automatically swap those back for us. You'll see that happen a lot for us as we get going along. And along the way, it's going to help us keep our code consinged, intact, and the formatter will come along
06:24
to help keep it as legible as possible.
