VS Code Extensions

What does every developer need to be efficient? A good code editor.

Visual Studio Code (VS Code) is one of the most popular code editors currently available on the market. It is fast, feature-rich, has built-in git support, and is free. It is also recommended to use it for the development of the Vue application. Firstly, VS Code has excellent out-of-the-box support for TypeScript. Secondly, we can use the Vetur extension, a must-have plugin for Vue development. It provides many great features when working with Single File Components, such as syntax highlighting, snippets, linting, error checking, and more.

Useful extensions

Let’s start with VScode extensions that should improve project maintenance and consistency as well as coding experience. The Vetur plugin is a must-have when it comes to developing full-blown Vue applications. Still, there are other Vue specific extensions that are quite useful:

• Vue 3 Snippets
• Vue VSCode Snippets
• Vue Peek - Show or jump to the component definition

The first one provides many ready-made snippets for Vue 3, whilst the second one for Vue 2. We can always create your own snippets in VS Code by going to “Preferences”> “User Snippets”.

Two other Vue-specific tooling projects have recently started to gain traction: Volar and VueDX. Both projects aim to provide Vue language features, better type-hinting, TypeScript support, etc., so we might consider checking them out. However, note that VueDX is still in the alpha ...