intellij-idea - 在不影响 vue 模板的情况下，使用 intellij 从 HTML 中的标签周围更改 'less than' 和 'greater than' 的颜色

Question

我们通常会查看很多 HTML。

现在，< , >和 </周围的标签到处都是。但是除非有语法错误，否则那些真的没有值(value)。并突出显示语法错误。

所以不要看:

我更喜欢看，注意你可以改变这个

Settings -> Editor -> Color scheme -> HTML -> HTML Code

问题是，如果我这样改变它，vue 模板也会受到影响，所有条件运算符也会像 <> 一样变成灰色。

mycomponent.vue

通知all和 in

有什么不同的方法吗？

Answer 1

这是使用 language injections 的完美案例

如果你没有 explicit vue.js support已经设置(或者如果它不处理它)，您可以定义语言注入(inject)以将该区域突出显示为 javascript 表达式。

https://studgeek.com/2010/08/16/intellijidea-webstorm-knockout-data-bind-attributes/

显示如何为任意 xml 属性设置虚拟 javascript 上下文。

在这个(相当过时的)图像中，您可以看到前缀设置为随机窗口变量对象，后缀结束对象，这只是将代码包装在 xml 属性中，大致类似于正确的上下文javascript.

在这种情况下，data-bind xml 属性将被替换为 v-if v-else 或任何其他 vue 属性采用看起来类似于 javascript 的绑定(bind)。

如果这不起作用，这听起来像是一个应该报告的 IntelliJ 错误。