Vue.js、Visual Studio 2015 和 .less 样式语法高亮

Posted 2023-02-22

【中文标题】Vue.js、Visual Studio 2015 和 .less 样式语法高亮

【英文标题】：Vue.js, Visual Studio 2015 and .less styles syntax highlighting

【发布时间】：2016-05-05 18:02:57

【问题描述】：

我正在使用 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-files 允许您为脚本或样式设置所需的语言（只需将lang 属性添加到script 或style 标签，然后就可以了）。因此，由于我使用较少，我的样式标签如下所示：

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

Visual Studio 当然对特殊的 lang 属性一无所知，所以我添加了一些众所周知的属性以减少语法高亮，现在样式标签看起来像这样：

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

不幸的是，Visual Studio 不理解我使用 less 的意图并突出显示我的 less 代码，例如简单的 css :-(

那么，我的问题是：如何让 Visual Studio 理解嵌入到 html 文档中的 .less 样式？

---

附注.vue 组件的任何部分都可以像这样引用单独的文件...

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

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

当然，我想在前端和后端都使用单个 IDE，所以像“只使用 Visual Studio Code、SublimeText 或 WebStorm”这样的建议并不是很有用。

【问题讨论】：

遇到同样的问题！

嗨，我非常了解你，但毕竟我决定将 WebStorm 用于我的前端项目。首先，我对 WebStorm 有类似的问题感到沮丧，但至少它是可以解决的——这是我的问题：***.com/questions/35333641/…。请仔细阅读问题和答案，您会对单文件 .vue 组件感到满意 :-) 更多 - WebStorm 具有更好的 JS 支持以及所有新的 ES6 功能等等 - 如果你问我，我强烈推荐它。

【参考方案1】：

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

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

【讨论】：

这将是解决方案，但是 vue.js 包中缺乏对 ES6 的支持使得这个扩展对我来说无法使用

这个扩展并没有解决内联样式 lang='less' 的问题