I am using Vue.js for one of my frontend projects.
As you know, Vue comes with special syntax for components - each component can be declared in a single .vue file . This means that you can define all related things in one file as follows:
<tamplate> ...component template goes here... </template> <script> ...component code goes here... </script> <style> ...component style goes here... </style>
Of course, vue support in different IDEs is not perfect yet. Vue is a relatively young structure, but I think it will be very popular very soon. After Angular, it looks so simple and predictable that I even decided to use it in all future frontend projects, but this, of course, is another story.
Well, WebStorm knows nothing about .vue files, but vue looks like html, so you can easily solve this problem - just add the * .vue template to the list of templates for the HTML file type (settings -> editor -> file types).
After that, everything works fine until you try to use non-css styles - for some reason WebStorm cannot highlight inline styles of type text / less and so on. I tried to solve it differently:
<style type="text/css></style>
or
<style rel="stylesheet/less"></style>
... but without any success.
Fortunately, vue-loader (which I use with WebPack to create my project) supports another syntax of .vue files, which allows to declare template, code and style in a separate files . This is fine, but I think one file per component is better (at least it's easier to manage). And now I have to declare my styles separately, because I cannot let WebStorm highlight the LESS inline styles.
I tried using WebStorm language injections , but without any success (or just missed something in my WebStorm configuration).
So, the last question: how to enable syntax highlighting for LESS inline styles in WebStorm 11?