Skip to content

Configuring VS Code for Vue Development

VS Code is one of the most used code editors in the world right now. When you're such a popular editor, people build nice plugins. One of such plugins is an awesome tool that can help us Vue.js developers.

<!-- TOC -->

<!-- /TOC -->


VS Code is one of the most used code editors in the world right now. Editors have, like many software products, a cycle. Once TextMate was the favorite by developers, then it was Sublime Text, now it's VS Code.

The cool thing about being popular is that people dedicate a lot of time to building plugins for everything they imagine.

One of such plugins is an awesome tool that can help us Vue.js developers.

Vetur

It's called Vetur, it's hugely popular, with more than 3 million downloads, and you can find it on the Visual Studio Marketplace.

Vetur marketplace page

Installing Vetur

Clicking the Install button will trigger the installation panel in VS Code:

Install Vetur in VS Code

You can also open the Extensions in VS Code and search for "vetur":

Search vetur in extensions

What does this extension provide?

Syntax highlighting

Vetur provides syntax highlighting for all your Vue source code files.

Without Vetur, a .vue file will be displayed in this way by VS Code:

Vue file without Vetur

with Vetur installed:

Vue file with Vetur

VS Code is able to recognize the type of code contained in a file from its extension.

Using Single File Component, you mix different types of code inside the same file, from CSS to JavaScript to HTML.

VS Code by default cannot recognize this kind of situation, and Vetur allows to provide syntax highlighting for each kind of code you use.

Vetur enables support, among the others, for

  • HTML
  • CSS
  • JavaScript
  • Pug
  • Haml
  • SCSS
  • PostCSS
  • Sass
  • Stylus
  • TypeScript

Snippets

As with syntax highlighting, since VS Code cannot determine the kind of code contained in a part of a .vue file, it cannot provide the snippets we all love: pieces of code we can add to the file, provided by specialized plugins.

Vetur provides VS Code the ability to use your favorite snippets in Single File Components.

IntelliSense

IntelliSense is also enabled bye Vetur, for each different language, with autocomplete:

Autocomplete

Scaffolding

In addition to enabling custom snippets, Vetur provides its own set of snippets. Each one creates a specific tag (template, script or style) with its own language:

  • vue
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

If you type vue, you'll get a starter pack for a single-file component:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

the others are specific and create a single block of code.

Note: (scoped) means that it applies to the current component only

Emmet

Emmet, the popular HTML/CSS abbreviations engine, is supported by default. You can type one of the Emmet abbreviations and by pressing tab VS Code will automatically expand it to the HTML equivalent:

Emmet support

Linting and error checking

Vetur integrates with ESLint, through the VS Code ESLint plugin.

ESLint configuration

ESLint at work

Code Formatting

Vetur provides automatic support for code formatting, to format the whole file upon save (in combination with the "editor.formatOnSave" VS Code setting.

You can choose to disable automatic formatting for some specific language by setting the vetur.format.defaultFormatter.XXXXX to none in the VS Code settings. To change one of those settings, just start searching for the string, and override what you want in the user settings (the right panel).

Most of the languages supported use Prettier for automatic formatting, a tool that's becoming an industry standard.

Uses your Prettier configuration to determine your preferences.

→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about vue: