VSCode之集成终端-用户自定义代码片段

原文链接

集成终端

VSCode集成了自带的终端,可以实现各种复杂的功能和操作,比用系统自带的终端强太多了,还可以和编辑器的各种功能进行互动可以说是非常强大了。这里介绍一下VSCode的集成终端的使用命令,和常见的使用小技巧。

Ctrl + ` 打开终端和隐藏终端

Ctrl + Shift + ` 打开新的终端 命令面板里搜索 “新建集成终端”

切换集成终端 可以快速调出终端显示的面板

Focus Next Terminal或者Focus Previous Terminal进行终端之间的切换

拆分终端”就能够将当前的终端一分为二；

命令面板里的“聚焦于下一个窗格” (Focus Next Pane)、“聚焦于上一个窗格” (Focus Previous Pane)用于切分终端之间的切换。

集成终端里面 Ctrl + F 调出搜索框

Windows10默认的终端是PowerShell而其它的windows系统默认的shell是Cmd

terminal.integrated.shell.windows

terminal.integrated.shell.osx

terminal.integrated.shell.linux，

这三个配置用来配置不同系统下的shell工具

terminal.integrated.shellArgs.linux配置 参数可以设置shell启动的时候的传入参数

terminal.integrated.env.osx

terminal.integrated.env.linux

terminal.integrated.env.windows

来控制集成终端创建 Shell 时，该使用哪些特殊的环境变量。

terminal.integrated.cwd 用于控制 Shell 启动时的初始目录；terminal.integrated.rightClickBehavior 控制鼠标右键点击时的行为；terminal.integrated.enableBell 可以控制当脚本出错时是否要发出响声。

terminal.integrated.scrollback 保存历史的输出的行数,

Cmd + K 来清除所有的输出结果

在集成终端中Ctrl+鼠标左键点击文件可以快速在编辑器中打开对应的文件

在活动终端中运行活动文件(Run Active File In Active Terminal)可以快速执行脚本文件

在活动终端中运行所选文本(Run Selected Text In Active Terminal),可以快速执行选中的文本

资源管理器中右击文件夹选择在终端中打开,便可以在终端中浏览对应的文件夹。

VSCode目前还不支持终端操作持久化到本地,需要记录之前的终端状态可以考虑使用Tmux.

下面我把常用的Terminal指令总结成了表格,并附上了我绑定的快捷键,不过要注意配置快捷键生效的时机防止快捷键和默认的快捷键发生冲突。

命令	对应的功能	快捷键
terminal.toggleTerminal	切换到终端面板	Ctrl + G
terminal.new	创建新的集成终端	Ctrl + Shift + `
terminal.split	拆分终端	Ctrl + \
terminal.unsplit	取消拆分终端	Ctrl + Shift + \
terminal.focusPreviousPane	聚焦终端组中上一个终端	Alt + Left
terminal.focusNextPane	聚焦终端组中下一个终端	Alt + Right
terminal.focusPrevious	聚焦上一个终端组	Alt + Up
terminal.focusNext	聚焦下一个终端组	Alt + Down
terminal.runSelectedText	在活动终端中运行所选文本	Ctrl + Alt + Insert
erminal.moveToEditor	将终端移动到编辑器中	**
terminal.moveToTerminalPanel	将终端移动到面板中	**
toggleMaximizedPanel	最大化面板	Ctrl + Alt + Up
action.terminal.kill	关闭活动终端	Ctrl + W
terminal.rename	终端重命名	Ctrl + Shift + N
terminal.focus	聚焦到终端	Ctrl + Shift + <
terminal.focusTabs	聚焦到终端选项卡视图	Ctrl + Shift + >

用户自定义代码

命令工具中搜索“配置用户代码片段”(Configure User Snippets)并且执行。我们可以根据需要选择创建对应语言的用户自定义代码片段。

将文件中的注释去除掉,就可以使用对应的代码示例了。

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

键(key)是这个代码片段的名字,用来标识这个代码片段不要和其它的语言的代码片段发生冲突。

“prefix” 前缀和 “body” 内容这两个属性,是必须有的,“description”是选配属性。prefix配置代码片段的触发字符串,而body里面存的是对应的代码片段,description用来描述这段代码的作用。

代码片段里面可以插入Tab Stop,可以理解为输入焦点,当用户输入自定义代码之后可以修改对应的Tab Stop位置的代码。上面代码中$1,$2就是两个Tab Stop,插入自定义代码片段之后,光标会默认在$1的位置,按下Tab键之后光标会切换到$2的位置。按下Shift + Tab光标会切换回到$1的位置。

我们还可以在光标的位置插入对应的占位符号,相当于在光标处插入了默认值,并且插入的时候默认值会被选中,占位符号使用方法为${1:i},如果默认值不需要修改直接跳到下一个光标的位置进行修改。如果占位符都不需要修改,直接按Esc键跳出编辑模式就行。

"Print console": {
        "prefix": "log",
        "body": [
            "console.log(${1:i});",
            "$2"
        ],
        "description": "Log output to console"
    }

如果自定义代码片段里面有多个相同编号的光标占位符,会启动多光标模式

我们可以在代码片段中三个不同的位置插入 $1，这样编辑器就会为这三个不同的位置，分别创建一个光标，然后当我们打字的时候，他们就会被一起修改。

"Print to console": {
        "prefix": "log",
        "body": [
            "console.log(${1:index});",
            "console.log(${1:index} + 1); // ${1:i=index} + 1",
            "$2"
        ],
        "description": "Log output to console"
    }

VS Code 的代码片段支持里，还提供了一种模板，叫做预设变量。通过预设变量我们可以在自定义代码里面访问各种内容。想在代码片段里的某个位置使用剪切板的内容，那么我们在那个位置写上 $CLIPBOARD 就好了，如果我们希望插入代码片段后自己可以修改这个值，也可以将它放在一个 Tab Stop 里面，语法则是 ${1:$CLIPBOARD}。

预设变量列表有:

预设变量	含义
TM_SELECTED_TEXT	当前选中的文本
TM_CURRENT_LINE	当前行的文本
TM_CURRENT_WORD	当前光标位置的文本
TM_LINE_INDEX	当前行号
TM_LINE_NUMBER	基于索引的行号
TM_FILENAME	当前文档的名称
TM_FILENAME_BASE	不包含后缀的文件名称
TM_DIRECTORY	当前文件所在的目录
TM_FILEPATH	当前文档的路径
RELATIVE_FILEPATH	当前文档的相对路径
CLIPBOARD	剪切板的内容
WORKSPACE_NAME	当前工作区的名称
WORKSPACE_FOLDER	当前工作区的路径
CURRENT_YEAR	当前的年份
CURRENT_YEAR_SHORT	当前年份的后两位
CURRENT_MONTH	当前月份
CURRENT_MONTH_NAME	当前月份的名称
CURRENT_MONTH_NAME_SHORT	当前月份的缩写
CURRENT_DATE	当前的日期
CURRENT_DAY_NAME	当前日期的名称(Monday)
CURRENT_DAY_NAME_SHORT	当前日期的缩写(Mon)
CURRENT_HOUR	当前的小时
CURRENT_MINUTE	当前的分钟
CURRENT_SECOND	当前的秒钟
CURRENT_SECONDS_UNIX	Unix时间
RANDOM	10进制的随机数
RANDOM_HEX	16进制的随机数
UUID	UUID值
BLOCK_COMMENT_START	代码块的注释开头
BLOCK_COMMENT_END	代码块的注释结尾
LINE_COMMENT	行注释

通过修改 editor.snippetSuggestions": "top“可以将自定义代码提示的位置放在提示列表的最上端。设置之后我们就可以快速的找到自己需要的代码片段。