如何在 vscode 中使用一个（或两个）快捷方式在 TypeScript 和 HTML 之间切换？

Question

使用 Angular2，我经常有带有html模板的打字稿 。@Components

Atom 支持同时高亮两者的语法，而 VSCode 不支持。

现在你必须使用快捷键CTRL+K M并键入"typescript"or"html"才能在两者之间切换，这很好，但在开发新组件时有点乏味。

我想使用"workbench.action.editor.changeLanguageMode"命令将快捷方式绑定到keybindings.json文件中，即时更改语言。理想情况下是这样的：

{ "key": "ctrl+win+h", "command": "workbench.action.editor.changeLanguageMode", **toggle="html,typescript"**  }

但也可以这样：

{ "key": "ctrl+win+h", "command": "workbench.action.editor.changeLanguageMode", **value="html"**  }

{ "key": "ctrl+win+t", "command": "workbench.action.editor.changeLanguageMode", **value="typescript"**  }

显然，关键是keybindings.json不支持该"value"领域。

有没有办法实现这一目标？

Answer 1

我已经从我的 Visual Studio Code 扩展安装了Angular Switcher。这个扩展提供了两个命令如下：

• extension.ionSwitchHTML 用于切换到对应的 .html 文件
• extension.ionSwitchTS 用于切换到对应的.ts文件

然后我使用快捷键打开键盘快捷键：[ Ctrl+k, Ctrl+S ]

或文件 > 首选项 > 键盘快捷键。之后，我通过关键字搜索：ionSwitch显示了上述两个命令。

然后我点击每个按键绑定命令，因为我感觉很舒服：分别是 Ctrl+Shift+H和Ctrl+Shift+T。

对于angular-2 切换器扩展，步骤与上述相同。

这使得编码更容易。

谢谢

Answer 2

如果我理解正确，那么您想在 html 模板和打字稿代码之间切换。有一个可用的扩展名为 angular2-switcher。

可在此处获得：https : //marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher

Answer 3

像您的"value"字段之类的东西确实存在于键绑定中，即"args". 这里提到了该命令的示例insertSnippet。

不幸的是，该changeLanguageMode命令目前似乎不支持任何args. 这个未解决的功能请求中对此进行了讨论：#1800

正如上一期所述，使用 VSCode 扩展 API 也不可能做到这一点。TextDocument#languageId是readonly。

关于 TypeScript 文件中的 HTML 支持，这里有一个相关问题：#2000

总之，您似乎必须等待这两个功能请求之一得到实现。

我能想到的唯一选择是编写自己的扩展，包括修改后的 TypeScript 语法。您必须调整它才能在正确的位置注入 HTML 突出显示。如果您有兴趣这样做：

• TS 语法文件的源代码可以在这里找到。
• 以下是有关如何将一种语法注入另一种语法的一些信息。