善用 vscode 的多光标批量和模板等技巧来提效

这篇具有很好参考价值的文章主要介绍了善用 vscode 的多光标批量和模板等技巧来提效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vs code 其实有很多实用的技巧可以在日常工作中带来很大的提效,但可能是开发中没有相应的痛点场景,因此有些技巧接触的人不多

本篇就来介绍下多光标的批量操作和模板代码两种技巧在日常工作中的提效

涉及的 vs code 技巧

不要看快捷键好像很多哈,主要是了解几种可以进入多光标批量操作模式的用法

进入多光标之后的快捷键就是日常使用的选中、复制、粘贴了,只是以前是针对当前单个光标的操作,现在变成了针对多个光标的批量操作而已

如何进入多光标的批量操作模式

Ctrl + 鼠标左键(手动添加多个光标)

善用 vscode 的多光标批量和模板等技巧来提效

按住 Ctrl 键后,在哪里点击鼠标左键就会增加一个光标,在原本就有光标的位置点击鼠标左键,是取消当前这个光标

Ctrl + D(自动在满足匹配规则的内容处添加光标)

善用 vscode 的多光标批量和模板等技巧来提效

当我们选中一定内容时,vs code 其实已经将全文里面满足相同规则的内容都会给稍微呈现暗色来提示这是跟当前选中内容一样的内容

比如上图中但选中 </el-check 内容时,其他相同的内容颜色上明显可以看出有点暗色样式

Ctrl + D 就是将这些满足相同匹配规则的内容自动加上个光标,按一次往下处理一次,按一次处理一次

如果想一次性把所有满足的都加上光标处理,快捷键是 Ctrl + Shift + L

Ctrl + Shift + Alt + 上下方向键(在当前光标上一行或下一行同列的地方添加光标)

善用 vscode 的多光标批量和模板等技巧来提效

如果你要添加多光标的场景刚好的相邻行里同列的地方,那可以直接通过这个快捷键快速添加上多行的光标,就不用再鼠标左键一个个点过去了,也不用去寻找每一行的相同匹配内容了

多光标后的批量操作

简单说,你正常能做的操作,在多光标批量操作模式里也可以进行,区别只是变成了你的操作同时在多个光标中批量进行

所以当你有需要在当前代码文件里进行多个重复操作时,就可以考虑多光标的批量操作模式了,比如国际化场景,下面会举个实操场景

Shift + 左右方向键(左右移动选中单个字符)

善用 vscode 的多光标批量和模板等技巧来提效

Shift + Ctrl + 左右方向键(左右移动选中整个单词)

善用 vscode 的多光标批量和模板等技巧来提效

Shift + End(选中从当前光标到当前行末尾)

善用 vscode 的多光标批量和模板等技巧来提效

Shift + Home(选中从当前光标到当前行开头)

善用 vscode 的多光标批量和模板等技巧来提效

Ctrl + C/V(批量复制粘贴所有光标选中的内容)

善用 vscode 的多光标批量和模板等技巧来提效

【User Snippets】如何配置模板代码

我们可以配置一些代码片段来自动快速生成模板代码

比如国际化工作中需要给在 template 代码里的中文词条进行 {{ $t('xxx') }} 处理,常规来说是不是需要先剪切词条,手动输入 {{ $t('') }},最后再粘贴,如:

善用 vscode 的多光标批量和模板等技巧来提效

虽然代码不多,但也需要敲打好几次键盘,如果用上模板代码呢。

先看下如何配置模板代码:

善用 vscode 的多光标批量和模板等技巧来提效

因为我已经创建过了,所以上面动图直接给你呈现模板配置代码,你要创建的话,就是 New 一个自己的模板配置,然后参考类似的模板配置

创建完后,在代码里只要输入我们配置好的代码前缀,再按 Tab 键,就会自动生成代码了,如:

善用 vscode 的多光标批量和模板等技巧来提效

可能从上面的例子你没觉得提效多少,那假如模板代码很多呢?比如你看看这个:

善用 vscode 的多光标批量和模板等技巧来提效

可以把日常常用的一些代码模板配置起来,输入几个前缀就可以自动生成部分代码,比如请求的代码,全局弹窗的代码等等,这样还省得我们自己敲,或者导出去复制粘贴

甚至说,你忘记我这篇主要介绍的是什么了吗?当配合多光标的批量操作时,简直是神兵利器,非常提效

实操场景

将代码中的中文词条都包裹上 $t 处理

善用 vscode 的多光标批量和模板等技巧来提效

这就是批量操作的提效!

上面动图里,我用上了上面介绍的所有快捷键,全程没有鼠标操作,一气呵成,不知道为什么,这操作下来有种莫名的满足

我先是用 Shift + 方向键 选中内容,然后 Ctrl + D 来快速往我想要批量操作的内容加上多光标,接着通过 Ctrl + 方向键 快速移动光标到中文词条首个字母上,接着 Shift + End 选中光标到末尾,接着 Shift + Ctrl + 方向键 取消多余的选中内容,让每一行的光标都只选中了中文词条,接着 Ctrl + X 剪切,再输入 t1 + Tab 触发模板代码生成,最后 Ctrl + V 批量粘贴,搞定!

所以,当你熟能生巧之后,相信我,你会爱上批量操作的,不仅提效快捷,还能一定程度上解放鼠标,敲打到一半被迫中断去操作鼠标是很难受的

将 el-checkbox 的 label 和 value 关系复制到一个对象里

善用 vscode 的多光标批量和模板等技巧来提效

批量复制,粘贴,是不是很提效!文章来源地址https://www.toymoban.com/news/detail-776820.html

到了这里,关于善用 vscode 的多光标批量和模板等技巧来提效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VSCode 注释后光标快速定位下一行

    VSCode默认用 Ctrl + / 注释一行时,光标停留在该行中。下面介绍如何注释后,光标会自动移动到下一行。 1.【View】 -【Extensions】-【查找并安装Multi-command 扩展】 2.【File 】 - 【Preferences 】-【Keyboard Shortcuts】(macOS :Code ,Preferences ,Keyboard Shortcuts) 3.【在搜索栏里面搜索 Open

    2024年02月17日
    浏览(29)
  • ChatGPT工作提效之使用python开发对接百度地图开放平台API的实战方案(批量路线规划、批量获取POI、突破数量有限制、批量地理编码)

    ChatGPT工作提效之初探路径独孤九剑遇强则强 ChatGPT工作提效之在程序开发中的巧劲和指令(创建MySQL语句、PHP语句、Javascript用法、python的交互) ChatGPT工作提效之生成开发需求和报价单并转为Excel格式 ChatGPT工作提效之小鹅通二次开发批量API对接解决方案(学习记录同步、用户注

    2024年02月06日
    浏览(37)
  • ChatGPT工作提效之小鹅通二次开发批量API对接解决方案(学习记录同步、用户注册同步、权益订购同步、开发文档)

    ChatGPT工作提效之初探路径独孤九剑遇强则强 ChatGPT工作提效之在程序开发中的巧劲和指令(创建MySQL语句、PHP语句、Javascript用法、python的交互) ChatGPT工作提效之生成开发需求和报价单并转为Excel格式 ChatGPT是一种实时对话生成模型,能够帮助用户快速地回答问题、提供信息,并

    2024年02月06日
    浏览(30)
  • 修改vscode正在编辑(或选中)的文件高亮样式 和 光标选中行行框选中高亮样式

    vscode使用过程中,默认的正在编辑的文件和未编辑的文件显示区别不明显,如果同时打开的文件过多,不能一眼看出当前编辑的文件是哪一个,导致查看当前是哪文件很吃力,所以本篇主要解决这个当前编辑文件选中高亮的问题 1.打开settings.json文件 按照图中步骤点击打开s

    2024年04月17日
    浏览(25)
  • 文件上传(模板导出、批量导入)

    html部分 b class=\\\"addBtn UseraddBtn\\\" style=\\\"background: #3d7bde;right: 93px;\\\"+ 批量导入/b           input type=\\\"file\\\" id=\\\"fileInput\\\"             style=\\\"opacity: 0;right: 93px;width: 88px;height:29px;position: absolute;top:-5px\\\" οnchange=\\\"BatchImport()\\\"           a href=\\\"./模板.xlsx\\\" class=\\\"addBtn UseraddBtn\\\" target=\\\"_blank\\\"        

    2023年04月08日
    浏览(28)
  • MySQL批量插入技巧

    关于MySQL批量插入的一些问题 MySQL 一直是我们互联网行业比较常用的数据,当我们使用 半ORM框架 进行 MySQL 大批量插入操作时,你是否考虑过这些问题: 进行大数据量插入时,是否需要进行分批次插入,一次插入多少合适?有什么判断依据? 使用 foreach 进行大数据量的插入存

    2024年02月03日
    浏览(34)
  • 读word模板批量生成制式文件

    创建.docx文件,编写内容 添加编辑域 按Ctrl+F9,创建编辑域 右击,选择编辑域 选择邮件合并,修改 域代码 要注意域代码的格式为: MERGEFIELD ${name} name为需要填充的内容。         依次类推,填上所有的编辑域,调整文档格式等,就完成了word文档准备。         之后

    2024年02月10日
    浏览(34)
  • 多角度模板匹配的模板创建技巧

            基于形状的模板匹配角度范围通常为360°,如果角度步长为1°,就需要准备360个模板,再加上金字塔层级,准备的模板个数会多达上百个,这样无疑对模板的存储和读取都极为不利,一是占据很大的内存,二是极其耗时,光是读取模板的时间就比整个匹配时间长。

    2024年02月10日
    浏览(33)
  • 使用 Postman 批量发送请求的技巧

    最近写了几个接口: 获取 books 的接口 获取 likes 的接口 获取 collections 的接口 但是我还是不放心,因为这些接口到底稳不稳定呢?上线后有没有隐患呢?所以我想做一个批量发送接口模拟~ 但是想要做到批量发送接口,必须要有一个条件 批量发送 。 起因 当我们写一个接口时

    2024年02月08日
    浏览(35)
  • 【Python实用技巧】如何批量修改歌曲信息

    1 背景 最近朋友说有个问题比较苦恼,手里有一批歌曲文件要整理归档,但是很多歌曲文件的属性信息不全,手动点开文件属性一个个进行修改太折磨人了。有没什么办法可以批量进行修改? 朋友有难,自然是要赴汤蹈火的,当时就夸下了海口,放心包在我身上,一定帮你找

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包