NetBeans 语法高亮、VueJS 单文件组件和 pug答案

【问题标题】：NetBeans syntax highlighting, VueJS single file components, and pugNetBeans 语法高亮、VueJS 单文件组件和 pug
【发布时间】：2019-03-24 23:58:00
【问题描述】：

使用 NetBeans 8.2 构建使用单个文件组件的 VueJS 应用程序。单个文件组件有一个 html 模板部分和一个脚本部分（以及可选的 CSS 部分）。将 .vue 扩展名与 text/html mime 类型关联后，语法突出显示效果很好。

VueJS 通过指定 lang 属性支持在模板部分使用模板语言（见下文）。我使用 pug 作为我的模板语言。 html 语法荧光笔无法将模板部分识别为 pug。

我可以将 mime 类型切换为 text/jade（pug 以前是jade），并且我在模板部分得到了适当的突出显示，但随后它停止将脚本部分识别为 JavaScript，从而破坏了语法突出显示。

根据我的研究，似乎没有办法解决这个问题（没有编写自定义插件），但我想确认一下。

最理想的情况是，NetBeans 只会识别 lang 属性并适当地突出显示，但我找不到任何表明这是可能的东西。

代码示例：

<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
  }
}

【问题讨论】：

标签： javascript html vue.js netbeans syntax-highlighting

【解决方案1】：

在 netbeans 8.2 中，您可以执行以下操作...

从主菜单中，选择工具：选项。选择其他选项卡。

在文件关联组中，单击新建按钮。

输入 vue 作为文件扩展名（不要包含点） - 点击确定。

在关联的文件类型中，找到“HTML 文件(text/html)。

就是这样。

您现在将在您的 vue 文件中对 HTML、CSS 和 javascript 进行完整的语法高亮显示。

【讨论】：

如问题中所述，“[t] html 语法荧光笔无法将模板部分识别为哈巴狗。”
我不敢相信直到现在还没有针对 netbeans 的 vuejs 扩展。没有其他 IDE 像 netbeans 一样支持 php 和 JavaScript。