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

标签 intellij-idea vue.js

我们通常会查看很多 HTML。

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

所以不要看:

enter image description here

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

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

enter image description here

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

mycomponent.vue

enter image description here

通知allin

有什么不同的方法吗?

最佳答案

这是使用 language injections 的完美案例

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

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

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

enter image description here

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

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

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

关于intellij-idea - 在不影响 vue 模板的情况下,使用 intellij 从 HTML 中的标签周围更改 'less than' 和 'greater than' 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50689591/

相关文章:

maven - IntelliJ 将本地 Maven 存储库中的所有 jar 下载到 system/jars 文件夹

javascript - 未解析的函数或方法 on()

maven - 如何在 Intellij 12 中下载/附加源代码

javascript - 如何在 Vue.js 中调用 android 函数?

vue.js - 如何预渲染多个 Vue 应用页面?

android-studio - 如何禁用 IntelliJ IDEA 中的参数提示?

intellij-idea - IntelliJ IDEA-Kotlin : Unresolved reference: eq method

javascript - 如何将呈现的 HTML 传递给 vue 属性?

javascript - libphonenumber-js : 'Uncaught TypeError: A text for parsing must be a string'

javascript - Vue.js 按小数排序