我正在使用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文件类型的模式列表中(设置 - &gt;编辑器) - &gt;文件类型)。
在调整之后一切正常,直到您尝试使用非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样式启用语法高亮显示?
答案 0 :(得分:6)
在WebStorm v11 / PhpStorm v10中无法提供此类支持 - 只有CSS可用作可注射语言。
然而,下一个版本( WebStorm v12 / PhpStorm v11 )already supports it - 只需在rel="stylesheet/less"
上使用适当的<style>
(如果是LESS)属性标签
如果您想使用其他属性或值来确定您的<style>
标记中要使用的语言,或者为另一个(IDE已经支持)启用此语言CSS预处理器(例如Sass / SCSS / etc) ) - 在Settings/Preferences | Editor | Language Injections
创建自定义注入规则。
自2017.1版本开始,我们进行了一些其他改进/更改 - 有关详细信息,请参阅WEB-20921 : Add support for valid HTML syntax for including LESS/SCSS in <style>
tags
票证。