Now that I can stand to look at my editor, let's also make our single file components nice to look at. The way we do that is by installing the official Vue language extension for VS Code. This extension used to be called volar, so if you ever hear that term, this is the extension that's being talked about. In fact, I'll probably even use the term once or twice in this course.
To find it in the extensions panel, we can search for Vue official. Notice the little verified symbol here next to the word Vue. This lets us know that this is the official extension. Next, you'll need to hit this button right here, which for you will probably say install.
For me, it just says enable since I already have the extension installed. You might also be prompted to reload the IDE in order to activate it. If so, just go ahead and follow that prompt. view, things are looking a lot nicer.
The syntax highlighting works for each of the three sections, script, template, and style. This is really only the beginning though. vue files easier. The other things aren't quite as obvious though, so let's see if we can track down what all of the LAR is giving us.
If you look under the source and then components directory, you'll see a component called the welcome. vue. As I start typing the import, Notice that VS Code is able to autocomplete the import for me, suggesting the welcome view as what I want to import. So let's just hit enter to do that.
Now the carrot is positioned right after the welcome view. Now I don't personally like how it appends view on the end of the component name, so I can just backspace a few times. I assume the reason that it appends view to the end is because you could import a JS file here of the same name. and you wouldn't want the variable names to clash.
But that's not an issue for our case. Also notice that our import statement is grayed out a bit. That's because Volar is smart enough to know that we haven't used this component yet. Okay, so let's put it to use.
And sure enough, once it's being used in the template, the import line is no longer grayed out. Another way to go about using an external component. would be to let the extension automatically import it for you when you use it inside of the template. For instance, inside of Source, Components, Icons, there's a component called IconCommunity.
Let's try using that directly inside of the template. VS Code is able to auto-suggest the IconCommunity component, and when I select that option from the dropdown, the component is automatically imported for me. Now I'll just finish off the closing tag. Awesome.
The next feature that I want to demonstrate will only work once we've actually installed all of our npm dependencies. I failed to do that in the lesson where we actually set up our project, so let's go ahead and run npm install real quick. Now if I put my cursor anywhere inside of the import of icon community and then press F2, I get a little dialog where I can rename this component. If you're looking for the function keys on a Mac, you'll need to press down the FN key in the bottom left-hand corner of the keyboard, and then they'll appear in the touch bar.
Now, I can update icon community to, let's say, icon community changed, and I'll press Enter to commit my changes. It didn't work as I expected it to, so let me do command Z real quick. And then in the command palette, I'll search for reload and choose developer reload window. This will reload VS code and just make sure that it's picking up on our node modules directory.
Awesome. Now let's try it one more time. I'll press F2 and change it to icon community changed. Perfect.
This time you'll see there on line 14 that where we actually use the component updated as well. This is the extension in action. Another cool thing that Boiler can do is give us autocomplete suggestions in the template for data and functions that are defined in the script section. For instance, if I define a reactive ref called test by first importing ref from view and then defining the variable, we'll say test equals the reactive ref of a string value test.
Once we go to render something in the template, that starts with a T. The first result is that test variable. Nice. Another thing we could do is access the test reactive ref in the script section.
When we do, you can see that the extension is smart enough to know that this is a reactive reference. Because after we typed the dot, we get the proper autocomplete suggestion dot value. If we wanted to, We could even configure volar to automatically add the dot value for us for all of our reactive refs. Let's open up our VS code settings by opening the command palette with command shift p and typing settings.
A little later on, I'll show you how to configure your settings for VS code with JSON. But for now, let's use the built-in UI. In the search box here, we'll type view in order to find the view extension-related settings. All those can be found right here.
If I scroll down just a bit, you'll notice this setting right here, auto insert dot value. Let's turn that on. view, I'll backspace test on line 8 here and start typing it again. This time, as soon as I get to the last T, Volar automatically adds dot value to the end.
But if for some reason you don't want it, you could just type over it as it's currently selected or press the right arrow key to move to the end of it. Cool. This covers the basics of what the Vue extension is doing for us. In the next lesson, let's take a look at a few of the extra goodies that the extension provides.
Now that I can stand to look at my editor, let's also make our single file components nice to look at. The way we do that is by installing the official Vue language extension for VS Code. This extension used to be called volar, so if you ever hear that term, this is the extension that's being talked about. In fact, I'll probably even use the term once or twice in this course.
To find it in the extensions panel, we can search for Vue official. Notice the little verified symbol here next to the word Vue. This lets us know that this is the official extension. Next, you'll need to hit this button right here, which for you will probably say install.
For me, it just says enable since I already have the extension installed. You might also be prompted to reload the IDE in order to activate it. If so, just go ahead and follow that prompt. view, things are looking a lot nicer.
The syntax highlighting works for each of the three sections, script, template, and style. This is really only the beginning though. vue files easier. The other things aren't quite as obvious though, so let's see if we can track down what all of the LAR is giving us.
If you look under the source and then components directory, you'll see a component called the welcome. vue. As I start typing the import, Notice that VS Code is able to autocomplete the import for me, suggesting the welcome view as what I want to import. So let's just hit enter to do that.
Now the carrot is positioned right after the welcome view. Now I don't personally like how it appends view on the end of the component name, so I can just backspace a few times. I assume the reason that it appends view to the end is because you could import a JS file here of the same name. and you wouldn't want the variable names to clash.
But that's not an issue for our case. Also notice that our import statement is grayed out a bit. That's because Volar is smart enough to know that we haven't used this component yet. Okay, so let's put it to use.
And sure enough, once it's being used in the template, the import line is no longer grayed out. Another way to go about using an external component. would be to let the extension automatically import it for you when you use it inside of the template. For instance, inside of Source, Components, Icons, there's a component called IconCommunity.
Let's try using that directly inside of the template. VS Code is able to auto-suggest the IconCommunity component, and when I select that option from the dropdown, the component is automatically imported for me. Now I'll just finish off the closing tag. Awesome.
The next feature that I want to demonstrate will only work once we've actually installed all of our npm dependencies. I failed to do that in the lesson where we actually set up our project, so let's go ahead and run npm install real quick. Now if I put my cursor anywhere inside of the import of icon community and then press F2, I get a little dialog where I can rename this component. If you're looking for the function keys on a Mac, you'll need to press down the FN key in the bottom left-hand corner of the keyboard, and then they'll appear in the touch bar.
Now, I can update icon community to, let's say, icon community changed, and I'll press Enter to commit my changes. It didn't work as I expected it to, so let me do command Z real quick. And then in the command palette, I'll search for reload and choose developer reload window. This will reload VS code and just make sure that it's picking up on our node modules directory.
Awesome. Now let's try it one more time. I'll press F2 and change it to icon community changed. Perfect.
This time you'll see there on line 14 that where we actually use the component updated as well. This is the extension in action. Another cool thing that Boiler can do is give us autocomplete suggestions in the template for data and functions that are defined in the script section. For instance, if I define a reactive ref called test by first importing ref from view and then defining the variable, we'll say test equals the reactive ref of a string value test.
Once we go to render something in the template, that starts with a T. The first result is that test variable. Nice. Another thing we could do is access the test reactive ref in the script section.
When we do, you can see that the extension is smart enough to know that this is a reactive reference. Because after we typed the dot, we get the proper autocomplete suggestion dot value. If we wanted to, We could even configure volar to automatically add the dot value for us for all of our reactive refs. Let's open up our VS code settings by opening the command palette with command shift p and typing settings.
A little later on, I'll show you how to configure your settings for VS code with JSON. But for now, let's use the built-in UI. In the search box here, we'll type view in order to find the view extension-related settings. All those can be found right here.
If I scroll down just a bit, you'll notice this setting right here, auto insert dot value. Let's turn that on. view, I'll backspace test on line 8 here and start typing it again. This time, as soon as I get to the last T, Volar automatically adds dot value to the end.
But if for some reason you don't want it, you could just type over it as it's currently selected or press the right arrow key to move to the end of it. Cool. This covers the basics of what the Vue extension is doing for us. In the next lesson, let's take a look at a few of the extra goodies that the extension provides.