如何将多行片段的一部分粘贴到特定行，其余部分粘贴到另一行

Question

我想为我自己的用途创建一个自定义代码段，我目前想为@emotion/core 制作一个代码段。

我一直希望 /** @jsx jsx */ 位于我的 jsx 文件之上。因此，当我在第 9 行导入我的模块时，import {css, jsx} from '@emotion/core 在第 9 行，/** @jsx jsx */ 在第 0 行。我该如何实现？

当前片段：

"Import emotion":{
    "prefix":"ime",
    "description": "Import emotion",
    "body": 
    [
        "/** @jsx jsx */",
        "import {css, jsx} from '@emotion/core';"
    ]
},

Answer 1

您必须将代码片段分解成单独的命令才能在中间步骤中移动光标。这将需要像 multi-command.

这样的宏扩展

将此放入您的 settings.json:

"multiCommand.commands": [

  {
    "command": "multiCommand.insertImports",
    "sequence": [
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "import {css, jsx} from '@emotion/core';"
        }
      },
      // "editor.action.setSelectionAnchor",   // see note below
      "cursorTop",
      {
        "command": "editor.action.insertSnippet",
        "args": {
          "snippet": "/** @jsx jsx */\n"
        }
      },
      // "editor.action.goToSelectionAnchor",
      // "editor.action.cancelSelectionAnchor",
      "cursorDown"  
    ]
  }
]

和一些键绑定来触发该宏：

{
  "key": "ctrl+shift+i",             // whatever keybinding you wish
  "command": "extension.multiCommand.execute",
  "args": {
    "command": "multiCommand.insertImports"
  },
   "when": "editorTextFocus"
},

anchor 命令注意事项

editor.action.setSelectionAnchor
editor.action.goToSelectionAnchor
editor.action.cancelSelectionAnchor

这些命令位于 Insiders' Build 中，因此大概在 2020 年 6 月上旬的 v1.46 版本中。它们位于宏中只是为了方便 return 将光标移动到您开始的位置。出于某种原因，命令 workbench.action.navigateToLastEditLocation 在这里对我不起作用 - 我认为这就足够了。

如果没有这些新命令，光标不会 return 到您开始的位置 - 也许这对您来说不是问题。无论如何，他们很快就要来了。一旦你有了版本，它们就包含在取消注释这些命令中。这是使用这些命令的演示：

如何将多行片段的一部分粘贴到特定行，其余部分粘贴到另一行

How to paste part of a multi-line snippet to a specific line and the rest to another line

code-snippets

visual-studio-code

vscode-snippets