我想创建一个自定义的片段供自己使用,目前我想为@emotioncore制作一个片段。
我总是想 /** @jsx jsx */
在我的jsx文件之上。因此,当我在第9行导入模块时,然后在第9行导入 import {css, jsx} from '@emotion/core
是在第9行和 /** @jsx jsx */
是在第0行.我如何实现这一点?
当前的Snippet。
"Import emotion":{
"prefix":"ime",
"description": "Import emotion",
"body":
[
"/** @jsx jsx */",
"import {css, jsx} from '@emotion/core';"
]
},
你将不得不把这个片段分解成独立的命令,以便在中间步骤中移动光标。 这将需要一个宏扩展,比如 多命令.
把这个放到你的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"
]
}
]
和一些keybinding来触发这个宏。
{
"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
在这里对我不起作用--我想这已经足够了。
如果没有这些新的命令,光标不会回到你开始的地方--也许这对你来说不是问题。 在任何情况下,它们很快就会出现。 一旦你有了它们所包含的版本,只需取消这些命令的注释。 这里是一个使用这些命令的演示。