Skip to content
On this page

Creating VS Code Themes

Use editor tokens and scope inspector built-in VS Code to see the syntax information.

Scope Inspector

Additional Metadata

The TextMate grammar is defined in extensions/vscode-vue/syntaxes/markdown-vue-html.tmLanguage.yml. This grammar definition follows TextMate guidelines and naming conventions. Additional metadata is provided using tokens named meta.*.vue-html.

Additional metadata in Tokens

Element Metadata

  • meta.element.<tag name>.vue-html - Element tag, e.g., <div>...</div>
  • meta.tag.self-closing.vue-html - Self-closing tag, e.g., <img />
  • - Opening tag, e.g., <div>
  • meta.tag.close.vue-html - Closing tag, e.g., </div>

Attribute Metadata

  • meta.attribute.<attribute name>.vue-html - Attribute, e.g., id="..."

Directive Metadata

  • meta.directive.<directive name>.vue-html - Directive, e.g., v-for="..."
  • meta.directive.<directive name>.shorthand.vue-html - Directive attribute, e.g., @click="...", :class="...", or #default="..."
  • meta.directive-argument.vue-html - Directive attribute, e.g., class in v-bind:class="...", or eventName in v-on:[eventName]="..."
  • meta.directive-modifier.vue-html - Directive modifier, e.g., prevent in v-on:click.prevent="..."

Interpolation Metadata

  • meta.interpolation.vue-html - Interpolation, e.g., {{ ... }}
  • meta.embedded.source.expression.ts - Any javascript/typescript expression

Theme Previews

Dark+/Light+ Theme

Screenshot of VS Code editor using Dark+ themeScreenshot of VS Code editor using Light+ theme

Night Owl Theme

Screenshot of VS Code editor using NightOwl themeScreenshot of VS Code editor using LightOwl theme

Released under the MIT License.