logo标签列表

如何在vscode中通过一个或两个快捷键在TypeScript和HTML之间切换？

angulartypescriptvisual-studio-codesyntax-highlighting
13

在使用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
@Zze angular2-inline扩展是答案。 - RayX
6个回答
11

我从 Visual Studio Code 的扩展程序中安装了 Angular Switcher 。 该扩展程序提供了以下两个命令：

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

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

或选择 “文件 > 首选项 > 键盘快捷方式”。 然后，我通过关键字搜索：ionSwitch ，找到了上述两个命令。

接着，我为每个命令设置了自己喜欢的快捷键，如： Ctrl+Shift+H 和 Ctrl+Shift+T 。

Angular Switcher Shortcuts

对于 angular-2 switcher 扩展程序，步骤与上述相同。

angular-2 switcher

这使得编码更加容易。

谢谢

9
4

像你的"value"字段一样，针对键绑定确实存在"args"。在此提到了insertSnippet命令的示例here。

不幸的是，目前看来changeLanguageMode命令不支持任何args。这在这个未解决的功能请求中已经讨论过：#1800

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

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

总之，看起来您将不得不等待这两个功能请求之一被实现。

我能想到的唯一替代方法是编写自己的扩展，其中包括修改的TypeScript语法。您需要调整它以在正确的位置注入HTML突出显示。如果您有兴趣这样做：

  • TS语法文件的源代码可以在此处找到。
  • 这里提供了一些关于如何将一种语法注入到另一种语法中的信息。
感谢您提供的链接，我已经找到了“angular2-inline”这个vscode扩展程序，它正好符合我的需求。这是扩展程序的链接：https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline非常感谢！ - RayX
2

现在，Vscode的Angular扩展原生支持两个命令：

  • 转到组件
  • 转到模板

只需分配热键（Ctrl-K Ctrl-S），就可以完成：）

enter image description here

1
1
我在 vscode 中找到了这个名为“file-ext-switch”的扩展程序。以下是我在 Mac 上的配置，位于 ~/Library/Application Support/Code/User/keybindings.json：
...

    {
        "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"
    }
...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接