Question

我在Sublime 3上使用TypeScript。如何在模板属性中添加HTML高亮显示：[注意：我已经在使用Microsoft TypeScript包]

看看它现在没有突出显示：

Answer 1

这是一个快速修复，仍然使用您安装的TypeScript包及其现有语法高亮定义：

打开TypeScript文件（使用已安装的TypeScript语法突出显示）
选择工具＆gt;开发人员＆gt;来自Typescript.tmLanguage 的新语法创建一个新的语法定义文件基于现有

为template找到string.template.ts上下文（ ctrl + f ）并为'scope:text.html.basic'添加一个包含下面评论行中显示的push：

%YAML 1.2
---
# http://www.sublimetext.com/docs/3/syntax.html
name: TypeScript + HTML  # <-- renaming is optional

  # ...

  template:
    - match: "([_$[:alpha:]][_$[:alnum:]]*)?(`)"
      captures:
        1: entity.name.function.tagged-template.ts
        2: punctuation.definition.string.template.begin.ts
      push:
        - meta_scope: string.template.ts
        - match: "`"
          captures:
            0: punctuation.definition.string.template.end.ts
          pop: true
        - include: template-substitution-element
        - include: string-character-escape
        - include: 'scope:text.html.basic'  # <-- !! only add this line !!
  template-substitution-element:

  # ...

可选步骤：
将文件开头的name属性更改为TypeScript + HTML，以便在以后的语法列表中轻松找到并选择它

使用.sublime-syntax文件结尾
重新启动Sublime Text并将新语法高亮显示应用于打字稿文件：

Answer 2

你可以在这里阅读如何实现这个目标：

https://forum.sublimetext.com/t/javascript-es6-template-literals-syntax-for-html/18242

转载于此：

打开工具＆gt;开发人员＆gt;新语法

添加：

%YAML1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html
name: JavaScript NG
file_extensions:
  - js
  - ng.js
scope: source.js.ng
contexts:
  main:
    - match: ""
      push: scope:source.js
      with_prototype:
      - match: '`'
        push:
          - meta_content_scope: text.html.basic.embedded.js
          - include: 'scope:text.html.basic'
          - match: '`'
          pop: true

并保存它有JavaScript-NG.sublime-syntax

还有一个开放的github问题：

https://github.com/sublimehq/Packages/issues/179

HTML语法高亮显示sublime 3 Typescript

2 个答案: