VSCode神技 |
您所在的位置:网站首页 › vscode快速删除当前行 › VSCode神技 |
文本编辑器切换到VSCode上很久了,主要用来看看代码,文档,写写Markdown文档,后面慢慢的使用VSCode来写写简单的C/CPP代码,后面Flutter的,Python等都切换到VSCode上开发了,已经成了第一生产力工具了.需要花时间探索它的技巧,提高效率.今天总结了常用的一些技巧快捷键,帮助大家更高效的使用VSCode. 1.了解界面功能 1.1 命令面板首先来看命令面板,它是 VS Code 快捷键的主要交互界面,你可以通过 F1 或者“Cmd+Shift+P ”(Windows 上是 “Ctrl+Shift+P”) 打开。这里提醒一下,如无特殊说明,我在这个专栏里默认基于macOS平台进行讲解,但也会本着为你提供方便的原则,同时给出Windows或Linux平台下的操作说明。通过编辑器来实现高效编程的思路是一致的,这和具体的使用平台无关,所以你大可不必为此担心。
第二个是界面概览,它展示了 VS Code 默认界面里的不同部件的位置、名称和快捷键。VS Code 强调无鼠标操作,但是对于初学者而言快捷键的记忆是个麻烦,这个界面恰好可以帮助你渡过最初的不适应阶段。
第三个是交互式演习场,打开这个界面,你会看到一个全英文的初学者教程,其中通过各种交互示例给出了 VS Code 的核心功能,展示了一些高级代码编辑功能的使用,每个功能都会有一个代码片段和编辑器供你实时使用。
接下来我们看一下命令行的使用。命令行你应该不陌生,我们脑海中的大神级程序员都是可以在Linux中随意敲打长串的命令,或是与黑客斗智斗勇,或是解决某个紧急的线上问题。而对于VS Code而言,最基础的命令行当然是让你能够不动鼠标,就能快速打开界面了。 如果你是 Windows用户,安装并重启系统后,你就可以在命令行中使用 code 或者 code-insiders了,如果你希望立刻而不是等待重启后使用,可以将 VS Code 的安装目录添加到系统环境变量 PATH中, Windows 64 位下的 VS Code 安装路径是 C:\Program FIles\Microsoft VS Code下。 如果你是在 macOS 上使用,安装后打开命令面板,搜索Shell 命令:在 PATH 中安装 “Code” 命令并执行,然后重启终端模拟就可以了。
最基本的命令行使用方式是在 code 命令后加上文件或者文件夹的地址,这样VS Code 就会在一个新窗口中打开这个文件或文件夹。 如果你希望使用已经打开的窗口来打开文件,可以在 code 命令后添加参数 -r来进行窗口的复用。 你也可以使用参数 -g 打开文件,然后滚动到文件中某个特定的行和列,比如输入 code -r -g package.json:128命令,你就可以打开 package.json 这个文件,然后自动跳转到 128 行。这个命令可以方便你从终端里快速地在 VS Code 里打开一个文件进行预览,一个特别常见的例子就是当我们使用脚本执行某个命令,这个命令告诉我们某个文件的某一行出现了错误,我们就能够快速定位了。 VS Code 也可以用来比较两个文件的内容,你只需使用 -d参数,并传入两个文件路径,比如输入 code -r -d a.txt b.txt命令,就可以比较a.txt和b.txt两个文件的内容了。有了这个命令,你就可以既使用命令行运行脚本,也可以借助 VS Code 的图形化界面进行文件内容的对比了。 VS Code 命令行除了支持打开磁盘上的文件以外,也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容,实时地展示在 VS Code 里,然后在编辑器中搜索和修改。比如,你可以把当前目录下所有的文件名都展示在编辑器里,此时只需使用ls | code -命令。 另外,VS Code 命令行还能够管理插件,查看 VS Code 的运行情况,记录和分析 VS Code 运行性能. 在我的日常工作中,经常会使用终端来操作脚本。这个时候,如果我需要打开 VS Code,使用命令行来打开 VS Code 再方便不过了。另外 VS Code 的命令行的各个参数,其实能够定制 VS Code 是怎样运行的,比如--disable-extensions、--max-memory,它们都有特殊的应用场景。当然,如果你发现了哪个配置是你特别希望默认就打开的,那么你可以在 shell 环境里创建一个别名 (alias),而不用局限于 code 这个命令。 3.编辑区操作 3.1光标移动移动光标最常用的就是方向键,但是方向键每次只能把光标移动一个位置,可以说是一种相对低效的方式。试想你打算把光标移动到当前行的行末,在没有鼠标的情况下,你可能需要按下右方向键几秒甚至十几秒钟。 不过,不用担心。虽然 VS Code 是基于 Web 技术开发的非原生应用,但是它支持针对单词、行、代码块、整个文档等多种光标移动方式。 今天,我会借助一段非常简单的 5 行 JavaScript 代码来讲解这些操作。 function foo() { bar(); } foo(); 复制代码首先是针对单词的光标移动。这个你应该比较熟悉,绝大多数原生的编辑应用和文本框都支持。这也是我自己最常用的一组快捷键。 下面这张图显示,第一行代码中的第一个单词是 function,一共8个字符,光标的位置在第五个字符 t 的后面。当你想把光标直接移动到整个单词,也就是 function 的前面,你只需按下 Option(Windows 上是 Ctrl 键)和左方向键。相反,如果要把光标移动到单词的末尾,只需要按下 Option 和右方向键就好了。
第二种方式是把光标移动到行首或者行末。比如第一行代码是 function foo() {,你只需按住 Cmd + 左方向键(Windows 上是 Home 键),就可以把光标移动到了这行的第一列;而如果你按住 Cmd 和右方向键(Windows 上是 End 键),光标就会被移动到 { 的后面。 接下来一种是对于代码块的光标移动。很多编程语言都使用花括号将代码块包裹起来,比如 if、for 语句等,你很可能会希望通过一个快捷键,就能实现在代码块的始末快速跳转。比如在这5行代码示例中,第一行到第三行代码是函数 foo 的定义,由一对花括号包裹起来,当你把光标放在花括号上时,只需按下 Cmd + Shift + \(Windows 上是 Ctrl + Shift + \),就可以在这对花括号之间跳转。 最后一种基础的光标操作就是移动到文档的第一行或者最后一行,你只需按下 Cmd 和上下方向键即可(Windows 上是 Ctrl + Home/End 键)。 掌握了上面的快捷键之后,你还可以非常轻松地掌握文本选择的操作。因为对于基于单词、行和整个文档的光标操作,你只需要多按一个 Shift 键,就可以在移动光标的同时选中其中的文本。 比如说,你把光标放在第一行代码第四个字符 c 的后面,按下 Option 加左方向键,你就可以把光标跳转到 function 这个单词的开头,这个在前面我有讲过。如果你同时按下 Option + 左方向键+ Shift 键,那么你就能把光标到 function 单词开头之间的所有字符全部选中,也就是选中 func 这四个字符。 同理,假设说光标放在第二行,然后你按下 Cmd、Shift 和上下方向键,就能把第二行光标到第一行,或者最后一行之间的字符选中。是不是很简单呢? 对于代码块的文本选择, VS Code 默认没有绑定快捷键。那么,是不是就没办法了呢? 当然不是。你可以先使用命令面板找到命令 “选择括号所有内容” 并运行。后面我还会讲述如何为一些未绑定快捷键的命令绑定自己熟悉的快捷键,请稍安勿躁。
了解了光标移动和文本选择,再来看删除操作,就变得相对简单了。 比如你想把当前行中光标之前的文本全部删除,就可以先选中这段文本(Windows/Linux: Home + Shift,macOS: Cmd + Left + Shift ),然后再按删除键。不过对于频繁使用的删除操作,你肯定希望单次操作就可以完成任务,而不是重复地选择文本然后删除,那么你需要记住下面几个命令。 (1)假设你把光标放在第二行代码的中间位置,然后按下 Cmd 和 Backspace(MacOS上就是“fn + delete”的组合,Windows 上未绑定快捷键,可以打开命令面板运行“删除右侧所有内容”),就能够把第二行代码光标后(右侧)的字符全部删掉。
前面我们提到,VS Code 内置了很多的命令,但是并没有为每个命令都提供一个快捷键,毕竟快捷键的组合总是有限的。不过 VS Code 提供了快捷键的修改和自定义功能,这样你就可以根据自己的使用习惯,给自己常用的命令指定顺手的快捷键。 首先你可以打开命令面板,搜索“打开键盘快捷方式”然后执行,这时你将看到相对应的界面。 然后通过搜索找到你希望修改快捷键的命令,双击,接下来你只要按下你期望的快捷键,最后按下回车键就可以了。 4.快捷键 4.1代码行编辑下面我就以一段 CSS 代码作为例子,来和你分享下代码行编辑中的高阶技巧。 .foo { padding: 5px; margin: 5px; font-size: 5px; } 复制代码在上一讲中,你知道了要删掉一行代码,你可以选中它,然后再按 Delete 键。不过还有一个快捷键,那就是直接按下 “ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”),当前代码行就可以被删除了。 如果你只是想要剪切这行代码,那么你直接按下 “ Cmd + x ” (Windows 上是 “Ctrl + x”) 即可。
这个功能对应的快捷键非常好记,它跟 “Enter”键十分接近。当你想在当前行的下面新开始一行时,你只需按下 “Cmd + Enter” (Windows 上是 “Ctrl + Enter”);而当你想在当前行的上面新开始一行时,你只要按下 “Cmd + Shift + Enter” (Windows 上是 “Ctrl + Shift + Enter”)就行了。
上面我介绍的几个命令,都是编辑器的基础功能,它和你所使用的语言无关。而接下来我要介绍的这几个命令,则会根据编程语言的不同,产生不同的结果。 4.2.1添加注释你在调试代码时,肯定经常需要临时地把一些代码注释掉。如果你要将一行代码注释掉,你只需按下 “ Cmd + / ” (Windows 上时 “Ctrl + /”)。如果你需要把一整段代码注释掉,按下 “ Option + Shift + A”即可。 你可以分别在 JavaScript 和 CSS 文件里使用这两个命令,你会发现这个命令会分别使用 JavaScript 和 CSS 各自的注释语法来添加注释。 当你在 JavaScript 文件里按下 “Cmd + /”,VS Code 在这行代码前添加了两个 “/”。
我们平常在做自己的小项目或者随便写一些脚本的时候,可能不会太在意代码的格式。不过一旦开始团队合作,整个项目组则会选择同一个代码风格和格式以有效降低协同成本。所以定期对自己写的代码进行格式化是个很好的习惯。 你可以按下 “Option + Shift + F” (Windows 上是 Alt + Shift + F)来对整个文档进行格式化,VS Code 也会根据你当前的语言,选择相关的插件。当然,前提条件是你已经安装了相关插件。
有的时候,你会觉得代码格式化太重了,需要的可能只是把代码里的缩进调整一下。这时你可以打开命令面板(快捷键“Cmd + Shift + P”),搜索 “缩进”,然后使用 “重新缩进行” 将整个文档的缩进进行调整,但更多时候,你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。
上面的这些命令和快捷键,可以说是 VS Code 团队在开发编辑器时精心设计和规划的。不过 VS Code 里还有不少有趣的命令,它们看起来跟其他命令没有什么联系,快捷键的设置也看似没有什么章法。 但其实它们中的大部分都是来自于社区,开发者是在多年软件开发和编辑器使用的过程中,自己摸索出的一些命令和快捷方式,然后在社区里广为流传,于是乎官方也就把这些功能做到了 VS Code 中。 下面我再快速列举几个小技巧,希望你能记住,并快速练习,以成为自己的肌肉记忆。 第一个是调换字符的位置。你可以按下 “Ctrl + t” (Windows 上未绑定快捷键,可以打开命令面板,搜索 ”转置游标处的字符“) 来把当前光标前后的字符调换位置。
第四个是行排序。无论是你在写代码,还是写 Markdown,你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众,VS Code 并没有给这个命令指定快捷键,你可以调出命令面板,然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。
在我们的日常编码过程中,有很多工作,它本身就是具有“重复”属性的。比如你需要把多个单词的第一个字母从小写变成大写,这种跟业务逻辑相关的重复性操作,编辑器很难为它们一个个单独做优化。 而 VS Code 的多光标特性其实就是用来解决这类问题的。当你在一个文本框或者某个输入框里打入字符时,会有一个竖线来显示你将要输入文字的位置,这就是“光标”。顾名思义,多光标其实就是多个输入位置,这里你可以脑补下多个竖线的场景。 多光标特性允许你在输入框的多个位置创建光标,这样你就可以在多个不同的位置同时输入文字或者执行其他操作。是不是很酷? 比如我上面提到的例子,你想把多个单词的第一个字母从小写变成大写。这个时候你只需要在每个单词的开头创建一个光标,然后按住 “shift + 右方向键” 选中这些单词的第一个字母,最后执行 “转换为大写” ,这样这些被选中的字符,就可以全部被转换成了大写了。 那怎样才能创建多个光标呢?这其中又有什么规则? 5.1创建多个光标我还是以一段 CSS 代码作为例子来介绍吧,如果你要练习,直接把这段代码复制到编辑器中即可。 .foo { padding: 5; margin: 5; font-size: 5; } 复制代码你可以看到,在上面这段 CSS 代码中,所有属性的值都是“5”,但你可能觉得这样的写法不规范,想把它们都改成 “5px”。之前你肯定是吭哧吭哧挨个在5后面加“px”。而现在,有了多光标特性之后,你第一步要做的事情,就是把光标移动到第一个 “5”的前面。接下来就有两种操作方式可以选择。 5.1.1 使用鼠标第一种添加多光标的方式,就是使用鼠标。在键盘上按住 “Option”(Windows 上是 Alt),然后鼠标点在第二个“5”之前,那么第二个光标就创建好了。现在你可以看到两个光标,第二个光标比第一个要细一点。
聪明的你肯定知道通过同样的方式来创建第三个光标。然后,按下右方向键,将光标们移动到 “5”的后面,输入“px”。这样,“5”后面就都已经加上“px”了,而这中间,你只做了一次输入。是不是很方便?
第二种方式是使用键盘,但是比第一种方式要多两个步骤,我们来一起看看是为什么。 首先你还是先移动光标到第一个“5”的前面。然后按下 “Cmd + Option + 下方向键”(Windows 上是 “Ctrl + Alt + 下方向键”),在当前光标的下面创建一个光标。
在第二种方案中,你是把光标全部移动到行末,从而统一了光标的位置,进而进行“重复性”的操作。但这个问题的解决方案不是唯一的,你也可以想一想,还有没有其他别的解法。 5.2创建多光标的两个特别命令接下来,我再给你介绍两个关于多光标的创建的特别方法。 5.2.1 “Cmd + D”首先讲第一种,还是上面的代码,你把光标移动到数字“5”之前,按下 “Cmd + D”,这样第一个“5”就被选中了;然后再按一次 “Cmd + D”(Windows 上是 Ctrl + D),你可以看到,第二个“5”也被选中了。
接下来讲讲第二种,是跟代码行批量处理有关,也还是用的前面的代码。首先你选择多行代码,然后按下 “Option + Shift + i” (Windows 上是 Alt + Shift + i),这样操作的结果是:每一行的最后都会创建一个新的光标。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |