Vue (Angular2+) HTML 语法用于 SublimeText

基于官方 sublime html 语法

功能

这样，即使有

• [input]
• [@animation]
• (输出)
• (@animation.event)
• #引用
• *模板
• [(bananaBox)]

在标签上的属性

此外

将 JS 部分突出显示为 JS。因此，

• 在 [myBinding]="myVar" 中，你应该看到 myVar 作为 JS 变量而不是字符串内容进行突出显示
  • 即 myVar 应该与 "s》进行不同的突出显示
• 在 *ngFor="let column of columns" 中，你应该看到关键字 let 和 of 被突出显示
• 在 (change)="update()" 中，你应该看到函数名 update
• 在 Angular 表达式中的 a && b 中，你应该正确突出显示为 JS 运算符，而不是正常 HTML 语法中会看到的错误。
• 在插值 {{1 + 2}} 中，你应该看到 JS 语法突出显示

并且…

现在它支持 Angular 控制流。

@let myVar = myObservable | async;

@for (item of items) {
  <a [href]="item.link">{{item.title}}</a>
} @empty {
  <p>No Items</p>
}

@if (users$ | async; as users) {
  {{ users.length }}
}

@if (a > b) {
  {{a}} is greater than {{b}}
} @else if (b > a) {
  {{a}} is less than {{b}}
} @else {
  {{a}} is equal to {{b}}
}

@switch (condition) {
  @case (caseA) {
    Case A.
  }
  @case (caseB) {
    Case B.
  }
  @default {
    Default case.
  }
}

如何使用

语法在 Sublime 语法选择列表中列出为 Ngx HTML。

我个人使用 ApplySyntax 插件，具有以下设置

"syntaxes": [
    {
        "syntax": "Ngx HTML/NgxHTML",
        "extensions": ["component.html"],
    },
]

您可以使用它以其他方式…例如，将其设置为所有 html 文件的默认语法，因为它本质上已经包含了 html 语法。