0

0

值的了解的一些vscode光标操作,让开发如丝般顺滑!

青灯夜游

青灯夜游

发布时间:2022-10-28 19:53:30

|

3357人浏览过

|

来源于掘金社区

转载

本篇文章带大家聊聊vscode中的光标操作,本文只会涉及到与我们最息息相关的光标操作,那我们就开始吧!

值的了解的一些vscode光标操作,让开发如丝般顺滑!

我们的目标只有一个,让我们喊出我们的口号:让开发如丝般顺滑!文章中的示例大多 mac 版为主,因为本人是 mac,但 win 版无需担心,破阵心法,牢记于心:command 就是 ctrl 键。

vscode 小技巧 -- 光标操作

        光标操作我们日常使用方向键,我们在日常中其实肌肉记忆下意识也会用到很多它的技巧,比如按住 cmd 键左右就可以到行首行尾,但却很难总结,一叶遮目的感觉。我抛砖引玉给个突破点:颗粒度。我们日常使用时左右方向键只会一个字符,即颗粒度是字符,如果我们想到词尾或者句尾,这就很麻烦了;这句话其实就标明了我们的重点:颗粒度;那么,如何操作光标的颗粒度呢?【推荐学习:《vscode教程》】

水平方向上

结合方向键

颗粒度 mac win
单词 option ctrl
cmd 只用 home/end 即可
代码块 cmd + shift + \ Ctrl + shift + \

垂直方向上

颗粒度 mac win
文首/文尾 Cmd+上下方向键 Ctrl + Home/End 键
当前行代码上/下移 Option + 上下方向键

注:【当前行上/下移】不是光标而是代码块操作(因为光标操作直接方向键就可以了),但很适合放在这里,这样就可以和水平方向上匹配了;水平上:行-cmd 单词-option;垂直上文档-cmd 行-option;

其他光标操作

含义 mac win
撤销光标处理 Cmd + U Ctrl + U

扩展:【选中】操作只需要再加个【shift】即可;【删除】操作颗粒度同光标操作,反方向则加fn即可(如删除所在行光标前所有内容为【cmd+delete】而光标后内容则为【cmd+fn+delete】)

光标操作实例

针对单词的光标移动

想把光标直接移动到整个单词,也就是 function 的前面或后面,你只需按下 Option(Windows 上是 Ctrl 键)和左方向键。

1.gif

光标移动到行首或者行末

按住 Cmd + 左方向键(Windows 上是 Home 键),就可以把光标移动到了这行的第一列

2.gif

移动到文档的第一行或者最后一行

按下 Cmd 和上下方向键即可(Windows 上是 Ctrl + Home/End 键)

3.gif

代码块的移动

Cmd + Shift + \(Windows 上是 Ctrl + Shift + \),就可以在这对花括号之间跳转。

4.gif

当前行上/下移

5.gif

其他光标操作

撤销光标处理

6.gif

多光标操作

        至此,我们已经了解了单光标的移动,选中(其实就是移动加上shift键),删除(选中加delete)等操作,那么,如果我们需要一次操作多个地方呢?这时我们就需要来到光标操作的高阶使用了,多光标操作。

企奶奶
企奶奶

一款专注于企业信息查询的智能大模型,企奶奶查企业,像聊天一样简单。

下载

        关于这个话题,其实重点就是如何在需要的位置创建多光标,因为创建后就和单光标的操作一致了。

基础操作-鼠标创建多光标

在键盘上按住 “Option”(Windows 上是 Alt),然后点击要新建光标的地方即可。

7.gif

但很明显,这种方法普遍适用但不方便,我们每创建一个光标都需要找到位置并点一下,八二原则,我们可以用快捷键实现常见的那 20%的操作,下文主要介绍三种常见场景。

提效操作

处理场景 快捷键 详解
相同元素 Cmd + D 选中元素,然后按下快捷键,vscode 就会选中下一个相同的元素并创建光标;再按再创建,依次类推。
上下行处理 Cmd + Option + 下方向键 在当前光标的下面创建一个光标。
选中多行处理 Option + Shift + i 选中多行内容,然后按下快捷键,vscode 在每一行行尾创建一个光标

关于光标操作的扩展

其他光标操作

含义 mac win
撤销光标处理 Cmd + U Ctrl + U

选中删除联想

        【选中】操作只需要再加个【shift】即可;【删除】操作颗粒度同光标操作,反方向则加fn即可(如删除所在行光标前所有内容为【cmd+delete】而光标后内容则为【cmd+fn+delete】)

        到此,我们就了解了 vscode 本身对光标操作的基本设计理念啦。

自定义快捷键

        但如果我们用不惯呢?vscode 自然也不会这么死板,它是支持为行为、也就是我们所说的命令自定义快捷键的,这里说之前困惑过我的一点,就是我们说的创建光标、移动等等对应 vscode 而言其实就是一条内嵌的命令,理解了这个,才好进行自定义,我当初没理解所以一直在想的问题是:我该怎么去翻译我要做的事情。

三步走:找到定义keyboard Shorycut的地方,找到对应的操作,为操作绑定快捷键。

Eg:为【选择括号内所有内容】的操作绑定Cmd + Shift + ]快捷键为例

找到定义keyboard Shorycut的地方

8.gif

找到对应的操作

9.gif

为操作绑定快捷键

双击-》按下需要绑定的快捷键-》回车确定(按错的话别回车就可以了)

这里多说一句,快捷键其本质就是行为和特定按键【在特定场景下】的绑定,在 vscode 中通过 JSON 进行描述,我们可以通过执行>Open Keyboard Shortcuts(JSON)进行查看,如果我们需要实现一个高级的快捷键,就会需要这些知识了。

10.gif

属性 含义 备注
Command 命令值
When 在什么情况下这个快捷键绑定能够生效
Key 快捷键

其中的when的定义注意点比较多,所有取值可以查看文档

而对于高级写法,VS Code 还支持几个基础的操作符。这样我们就能够书写相对复杂的条件语句了。

  • ! 取反。比如我们希望当光标不在编辑器里时,绑定一个快捷键,那么我们可以使用 !editorFocus,使用 !进行取反。
  • == 等于。when 条件值除了是 boolean 以外,也可以是字符串。比如 resourceExtname 对应的是打开的文件的后缀名,如果我们想给 js 文件绑定一个快捷键,我们可以用 resourceExtname == .js
  • && And 操作符。我们可以将多个条件值组合使用,比如我希望当光标在编辑器里且编辑器里正在编辑的是 js 文件,那么我可以用 editorFocus && resourceExtname == .js
  • =~ 正则表达式。还是使用上面的例子,如果我要检测文件后缀是不是 js,我也可以写成 resourceExtname =~ /js/,通过正则表达式来进行判断。

总结

        到此,光标操作相关的分享就结束啦,关于 vscode 的了解,它并非银弹,没它也能用,但总觉得编程本身枯燥的事情,还是需要这种探寻的快乐的,生而有崖而学无涯,用我那时候学完写的随笔感想为我们这部分分享结个尾好了:人生性懒惰,不只是表面,更是思想,懒于思考只是习惯于遇坑填坑,跳进坑里几乎是一件必然事件,勤于思考,享受思考。

        最后,顺口溜总结一下下,希望对诸君有所帮助:移动考虑颗粒度,多个就上快捷键,定制还需自绑定,操作牢记 shift 键。

更多关于VSCode的相关知识,请访问:vscode基础教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

418

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

535

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

512

2023.06.20

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

251

2023.07.05

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

745

2023.07.05

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

214

2023.08.11

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.6万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 7.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号