Productivity tools

VS Code already provides a number of built-in functions for navigating our code and performing basic refactoring. However, the one thing it can't do out of the box, which we'll need, is understand Vue's single-file components. These are files with a .vue extension, and as we've already seen, it contains HTML, JavaScript, and CSS all in a single file. This makes it difficult for text editors to know what type of file to treat them as, so we'll install a VS Code extension to help out.

Installing VS Code extensions

There are a number of VS Code extensions that we could choose, but Vetur is by far the most advanced. It provides some very useful features for building Vue applications...