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

Posted 2023-03-13

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

【英文标题】：How to switch between TypeScript and HTML with one (or two) shortcuts in vscode?

【发布时间】：2017-06-28 01:13:09

【问题描述】：

使用 Angular2，我经常有 typescript @Components 里面有 html 模板。

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

现在您必须使用快捷键 CTRL+K M 并输入 "typescript" 或 "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" 字段。

有什么办法可以做到吗？

【问题讨论】：

我所有的 html 都在他们自己的 component.html 文件中，只是来回切换.. 但很想知道这个问题的答案！

@Zze angular2-inline 扩展是答案

【参考方案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 switcher扩展，步骤同上。

这使编码更容易。

谢谢

【参考方案2】：

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

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

【参考方案3】：

类似于您的"value" 字段确实 存在用于键绑定，即"args"。在insertSnippet 命令的示例中提到了here。

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

使用 VSCode 扩展 API 也无法做到这一点，如上述问题中所述。 TextDocument#languageId 是 readonly。

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

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

我能想到的唯一选择是write your own extension，包括修改后的 TypeScript 语法。您必须对其进行调整以在正确的位置注入 HTML 突出显示。如果您有兴趣这样做：

TS语法文件的来源可以在here找到。 Here's 一些关于如何将一种语法注入另一种语法的信息。

【讨论】：

感谢您的链接，我能够找到完全符合我要求的 vscode 扩展“angular2-inline”。这是扩展链接marketplace.visualstudio.com/…谢谢！！！

【参考方案4】：

我发现这个非常方便的通用文件切换器扩展文件切换器。它循环浏览相关文件。

默认键绑定是 alt+[ 和 alt+] 去上一个和下一个文件。然而，只需使用一个键绑定在文件之间旋转。为了自己的方便，我只是将alt+[ 重新映射到alt+q。

https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.simple-switcher

【参考方案5】：

我在 vscode 中找到了这个扩展名“file-ext-switch”。 这是我的配置 ~/Library/Application Support/Code/User/keybindings.json 用于 mac

...

    
        "key": "ctrl+shift+j",
        "command": "fileextswitch",
        "args":  "extensions": [".wxml",".html"], "useOtherColumn": true , 
        "when": "editorTextFocus"
    ,
    
        "key": "ctrl+shift+k",
        "command": "fileextswitch",
        "args":  "extensions": [".js", ".ts"], "useOtherColumn": true , 
        "when": "editorTextFocus"
    ,
    
        "key": "ctrl+shift+l",
        "command": "fileextswitch",
        "args":  "extensions": [ ".less",".css", ".scss"], "useOtherColumn": true , 
        "when": "editorTextFocus"
    ,
    
        "key": "ctrl+shift+;",
        "command": "fileextswitch",
        "args":  "extensions": [".json",".spec.ts"], "useOtherColumn": true , 
        "when": "editorTextFocus"
    
...