Vue.js,Visual Studio 2015和.less样式语法高亮显示

Question

我正在使用Visual Studio 2015和vue.js来实现我的Web应用程序的前端.

众所周知,vue.js提供了一种非常特殊的声明组件方法 - 每个组件都应该在一个.vue文件中声明,包含所有必需的代码(模板,脚本和样式),如下所示:

<template>
    <!-- Component template goes here. -->
</template>

<script>
    <!-- Component code goes here. -->
</script>

<style>
    <!-- Component style goes here. -->
</style>

目前MSVS中没有官方支持.vue文件,所以我只使用HTML编辑器编辑这些文件,它对我来说很好.

那么,回到问题......

Vue文件允许您为脚本或样式设置所需的语言(只需添加lang属性script或style标签,此处就可以了).所以,因为我使用较少,我的样式标签看起来像这样:

<style lang="less">...</style>

当然,Visual Studio对特殊的lang属性一无所知,所以我添加了一些众所周知的属性,以便减少语法高亮,现在样式标记如下所示:

<style lang="less" rel="stylesheet/less" type="text/less">...</style>

不幸的是,Visual Studio不明白我打算使用less并突出显示我的代码,如简单的css :-(

所以,我的问题是:如何让Visual Studio理解无格式,嵌入到html文档中？

---

PS允许引用.vue组件的任何部分的单独文件,如下所示...

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

...但我真的想将所有内容存储在单个文件中.

当然,我想在前端和后端使用单个IDE,所以像"只使用Visual Studio Code,SublimeText或WebStorm"这样的建议并不是很有用.

Answer 1

Visual Studio 有一个 vue.js 包，它为 Visual Studio 2015 提供 IntelliSense。

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack