visual-studio-code - 如何将多行代码段的一部分粘贴到特定行，将其余部分粘贴到另一行

Question

我想为自己的使用创建一个自定义片段，我目前想为@emotion/core 创建一个片段。

我总是想/** @jsx jsx */在我的 jsx 文件之上。因此，当我在第 9 行导入模块时，在第 9import {css, jsx} from '@emotion/core行和/** @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 版本中。它们在宏中只是为了方便将光标返回到您开始的位置。出于某种原因，workbench.action.navigateToLastEditLocation这里的命令对我不起作用——我认为这就足够了。

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