NetBeans syntax highlighting, VueJS single file components, and pug

Question

Using NetBeans 8.2 to build a VueJS application using single file components. The single file components have an html template section and a script section (and, optionally, a CSS section). Syntax highlighting works fine after associating the .vue extension with the text/html mime type.

VueJS supports the use of templating languages in the template section by specifying the lang attribute (see below). I am using pug as my templating language. The html syntax highlighter does not recognize the template section as pug.

I can switch the mime type to text/jade (pug was formerly jade), and I get proper highlighting in the template section, but then it stops recognizing the script section as JavaScript, breaking THAT syntax highlighting.

Based on my research, it does not appear that there is a way to resolve this (short of writing a custom plugin), but I wanted to confirm.

Optimally, NetBeans would just recognize the lang attribute and highlight appropriately, but I couldn't find anything indicating that was a possibility.

Code sample:

<template lang="pug">
    header(class="navbar navbar-sticky")

    <!-- Site Logo -->
    a(href="index.html", class="site-logo visible-desktop") [ logo ]
    a(href="index.html", class="site-logo visible-mobile") [ logo ]
</template>

export default {
  name: 'Navbar',
  props: {
    msg: String
  }
}

Rodney P. Barbati Rodney P. Barbati · Accepted Answer · 2018-11-13T00:06:50

In netbeans 8.2 you can do the following...

from the main menu, select Tools:Options. Select the Miscellaneous tab.

In the File Associations group, click the new button.

Input vue as the file extension (don't include a dot) - click Ok.

In the associated file type, find "HTML files( text/html).

That's it.

You will now have full syntax highlighting for HTML, CSS and javascript in your vue files.

NetBeans syntax highlighting, VueJS single file components, and pug

1 Answers