Syntax Highlighting

Vetur supports syntax highlighting for the following languages:

syntaxlangrequired extension
<template lang="pug">pug
<template lang="jade">pug
<template lang="haml">hamlBetter Haml or Ruby Haml
<template lang="slm">slmSlm Syntax
<template lang="liquid">liquidLiquid Language Support
<style lang="postcss">postcss
<style lang="scss">scss
<style lang="sass">sassSass
<style lang="less">less
<style lang="stylus">styluslanguage-stylus
<script lang="ts">ts
<script lang="coffee">coffee

Vetur supports syntax highlighting for vue directives (e.g. v-if or :attribute=) and vue interpolations (e.g. ). The supported attribute string literals are ' and ". Vetur does not support the ` backtick literal, as it makes things more complex and there is no observed benefit of using it.

Custom Block

Vetur provides a setting vetur.grammar.customBlocks that defaults to:

  "vetur.grammar.customBlocks": {
    "docs": "md",
    "i18n": "json"

You can

  • change vetur.grammar.customBlocks
  • run the command "Vetur: Generate grammar from vetur.grammar.customBlocks
  • restart VS Code to get syntax highlighting for custom blocks.

Valid language value for custom blocks:

  • All lang values in the support table.
  • md | yaml | json | php | graphql