Configuring VS Code for Vue Development

• Vue - Official
• Installing Vue - Official
• Syntax highlighting
• IntelliSense
• Snippets and scaffolding
• Emmet
• Linting and error checking
• Code Formatting

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.

Vue - Official

The recommended extension today is Vue - Official (formerly Volar). You can find it on the Visual Studio Marketplace.

It is the official Vue language support for VS Code. Vue’s own docs recommend it for Vue 3 projects.

Older posts (and older screenshots) talked about Vetur (octref.vetur). Vetur was the go-to extension for Vue 2. It is legacy now. For modern Vue 3 work, install Vue - Official and disable or uninstall Vetur so the two do not fight over .vue files.

Installing Vue - Official

Clicking the Install button on the marketplace page opens the install panel in VS Code:

You can also open Extensions in VS Code and search for “Vue - Official” or “Volar”:

If Vetur is still installed, disable or uninstall it first.

What does this extension provide?

Syntax highlighting

Vue - Official provides syntax highlighting for your Vue Single File Components.

Without it, a .vue file looks like plain text to VS Code:

With Vue - Official installed:

VS Code recognizes code from a file extension. In a Single File Component you mix CSS, JavaScript, and HTML in one file. The extension teaches VS Code how to highlight each block.

It supports the common pieces you put in SFCs, including:

• HTML
• CSS
• JavaScript
• TypeScript
• SCSS / Sass / Less / Stylus (depending on your setup)
• Pug (with the related language plugin when you need it)

IntelliSense

IntelliSense works across the template, script, and style blocks. You get autocomplete for components, props, and template expressions:

TypeScript-aware projects get go-to-definition, peek, and type info in .vue files as well.

Snippets and scaffolding

Vue - Official focuses on language support. For starter snippets that drop a full SFC scaffold, many people add a community snippet extension such as Vue VS Code Snippets.

A basic single-file component still looks like this:

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

Use <script setup> when you want the Composition API style Vue 3 encourages.

Note: scoped on a <style> block means those styles apply to the current component only.

Emmet

Emmet, the popular HTML/CSS abbreviations engine, works in Vue templates. Type an Emmet abbreviation and press tab to expand it:

Linting and error checking

Vue - Official works well with ESLint through the VS Code ESLint plugin.

Use eslint-plugin-vue in the project so ESLint understands Vue SFCs.

Code Formatting

Vue - Official can format Vue SFCs. Turn on "editor.formatOnSave" in VS Code if you want the file formatted when you save.

Formatting options live under the vue.format.* settings. Search for vue.format in VS Code Settings and tweak what you need, for example:

• vue.format.template.initialIndent
• vue.format.script.initialIndent
• vue.format.style.initialIndent
• vue.format.wrapAttributes

Many teams still use Prettier for formatting. Prettier has built-in Vue SFC support. If you use Prettier, set it as the default formatter for Vue and let Vue - Official handle language features.

That combo (Vue - Official + ESLint + Prettier) is the setup I recommend for Vue 3 in VS Code today.

Want me to talk about your product? You can sponsor this site.