vs代码中的角度分屏答案

【问题标题】：Angular split screen in vs codevs代码中的角度分屏
【发布时间】：2021-03-24 18:43:01
【问题描述】：

我希望在 vs code 中有一个扩展，当我点击*.ts/*.html 文件时，它可以同时打开 ts 代码和 HTML 模板（最好是分屏）。

你知道这样的扩展吗？（或如何实现此行为的另一种方式）

感谢您的任何回答:)

【问题讨论】：

您可以右键单击打开的文件选项卡，您将看到“向上拆分”、“向下拆分”、“向左拆分”和“向右拆分”选项。这就是你想要做的吗？

标签： angular visual-studio-code

【解决方案1】：

使用扩展名HTML Related Links v0.11.0 和命令htmlRelatedLinks.openFile，您可以构建要打开的文件：

创建以下键绑定：（选择您喜欢的任何组合键）

两个定义的组合键相同：

  {
    "key": "ctrl+i r",
    "command": "htmlRelatedLinks.openFile",
    "args": {
      "file": "${fileDirname}/${fileBasenameNoExtension}.html",
      "method": "vscode.open",
      "viewColumn": "split"
    },
    "when": "editorTextFocus && editorLangId == typescript"
  },
  {
    "key": "ctrl+i r",
    "command": "htmlRelatedLinks.openFile",
    "args": {
      "file": "${fileDirname}/${fileBasenameNoExtension}.ts",
      "method": "vscode.open",
      "viewColumn": "split"
    },
    "when": "editorTextFocus && editorLangId == html"
  }

根据当前文件的languageId，我们选择不同的文件扩展名。

"viewColumn": "split" 使文件在另一列（ 1 或 2 ）中打开，新文件没有获得焦点，也不是预览文件。

【讨论】：