如何在WebStorm中为嵌入式LESS样式启用语法高亮显示？

Question

我正在使用我Vue.js的一个前端项目.

如您所知,Vue附带了特殊的组件语法 - each component can be declared in a single .vue file.这意味着,您可以在单个文件中定义所有相关内容,如下所示:

<tamplate>
    ...component template goes here...
</template>

<script>
    ...component code goes here...
</script>

<style>
    ...component style goes here...
</style>

当然,各种IDE中的vue支持还不完善.Vue是一个相对年轻的框架,但我认为它很快就会流行起来.在Angular之后它看起来如此简单和可预测,我甚至决定在所有即将到来的前端项目中使用它,但它当然是另一个故事.

好吧,WebStorm对.vue文件一无所知,但是vue看起来像html,所以你可以轻松地解决这个问题 - 只需将*.vue模式添加到HTML文件类型的模式列表中(设置 - >编辑器 - >文件类型).

在调整之后一切正常,直到您尝试使用非CSS样式 - 由于某些原因,WebStorm无法突出显示类型为text/less的嵌入样式等等.我尝试以不同的方式解决它:

<style type="text/css></style>

要么

<style rel="stylesheet/less"></style>

......但没有任何成功.

幸运的是vue-loader(我正在使用WebPack来构建我的项目)supports another syntax of .vue files, which allows to declare template, code and style in a separate files.没关系,但我认为每个组件的单个文件更好(至少它更容易管理).现在我被迫单独声明我的样式,因为我不能让WebStorm突出显示嵌入的LESS样式.

我试图使用WebStorm language injections,但也没有任何成功(或者我只是错过了我的WebStorm配置中的一些东西).

那么,最后一个问题是:如何在WebStorm 11中为嵌入式LESS样式启用语法高亮？

Answer 1

在WebStorm v11/PhpStorm v10中无法提供此类支持 - 只有CSS可用作可注入语言.

但是下一个版本(WebStorm v12/PhpStorm v11)已经支持它 - 只需rel="stylesheet/less"在<style>标签上使用适当的(如果是LESS)属性.

如果要使用其他属性或值来标识要在<style>标记中使用的语言,或者为另一个(IDE已经支持)CSS-preprocessor(例如Sass/SCSS/etc)启用此语言,请在以下位置创建自定义注入规则Settings/Preferences | Editor | Language Injections.

自2017.1版本开始,我们进行了一些其他改进/更改 - 请参阅WEB-20921:添加对有效HTML语法的支持,以便在<style>标签 票证中包含LESS/SCSS以获取详细信息.