目录
vscode 小技巧 -- 光标操作
光标操作实例
多光标操作
关于光标操作的扩展
自定义快捷键
总结
首页 开发工具 VSCode 值的了解的一些vscode光标操作,让开发如丝般顺滑!

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

Oct 28, 2022 pm 07:53 PM
vscode

本篇文章带大家聊聊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 键)和左方向键。

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

光标移动到行首或者行末

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

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

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

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

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

代码块的移动

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

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

当前行上/下移

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

其他光标操作

撤销光标处理

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

多光标操作

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

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

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

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

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

但很明显,这种方法普遍适用但不方便,我们每创建一个光标都需要找到位置并点一下,八二原则,我们可以用快捷键实现常见的那 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的地方

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

找到对应的操作

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

为操作绑定快捷键

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

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

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

属性 含义 备注
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基础教程

以上是值的了解的一些vscode光标操作,让开发如丝般顺滑!的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vscode需要什么电脑配置 vscode需要什么电脑配置 Apr 15, 2025 pm 09:48 PM

VS Code 系统要求:操作系统:Windows 10 及以上、macOS 10.12 及以上、Linux 发行版处理器:最低 1.6 GHz,推荐 2.0 GHz 及以上内存:最低 512 MB,推荐 4 GB 及以上存储空间:最低 250 MB,推荐 1 GB 及以上其他要求:稳定网络连接,Xorg/Wayland(Linux)

vscode怎么定义头文件 vscode怎么定义头文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定义头文件?创建头文件并使用 .h 或 .hpp 后缀命名在头文件中声明符号(例如类、函数、变量)使用 #include 指令在源文件中包含头文件编译程序,头文件将被包含并使声明的符号可用

vscode开始怎么设置 vscode开始怎么设置 Apr 15, 2025 pm 10:45 PM

要开启并设置 VSCode,请按照以下步骤操作:安装并启动 VSCode。自定义首选项,包括主题、字体、空格和代码格式化。安装扩展以增强功能,例如插件、主题和工具。创建项目或打开现有项目。使用 IntelliSense 获得代码提示和补全。调试代码以步进代码、设置断点和检查变量。连接版本控制系统以管理更改和提交代码。

vscode启动前端项目命令 vscode启动前端项目命令 Apr 15, 2025 pm 10:00 PM

启动前端项目在 VSCode 中的命令是 code .。具体步骤包括:打开项目文件夹。启动 VSCode。打开项目。在终端面板中输入启动命令 code .。按回车键启动项目。

vscode用的是什么语言 vscode用的是什么语言 Apr 15, 2025 pm 11:03 PM

Visual Studio Code (VSCode) 由 Microsoft 开发,使用 Electron 框架构建,主要以 JavaScript 编写。它支持广泛的编程语言,包括 JavaScript、Python、C 、Java、HTML、CSS 等,并且可以通过扩展程序添加对其他语言的支持。

vscode什么语言写的 vscode什么语言写的 Apr 15, 2025 pm 11:51 PM

VSCode 是用 TypeScript 和 JavaScript 编写的。首先,它的核心代码库是用 TypeScript 编写的,这是一种扩展了 JavaScript 并增加了类型检查功能的开源编程语言。其次,VSCode 的一些扩展和插件是用 JavaScript 编写的。这种组合使 VSCode 成为一款灵活且可扩展的代码编辑器。

vscode设置中文方法 vscode设置中文方法 Apr 15, 2025 pm 09:27 PM

在 Visual Studio Code 中设置中文语言有两种方法:1. 安装中文语言包;2. 修改配置文件中的"locale"设置。确保 Visual Studio Code 版本为 1.17 或更高。

vscode运行任务快捷键 vscode运行任务快捷键 Apr 15, 2025 pm 09:39 PM

在 VSCode 中运行任务:创建 tasks.json 文件,指定 version 和任务列表;配置任务的 label、command、args 和 type;保存并重新加载任务;使用快捷键 Ctrl Shift B (macOS 为 Cmd Shift B) 运行任务。

See all articles