学习在 VS Code 中成为无鼠标 Web 开发人员(更新日期:2020 年 7 月 22 日)
更新日期:2020年7月22日
- 添加“清除 VS Code 内部的终端”
- 添加“后退和前进”(必需)
- 添加“向上或向下移动一行”
更新日期:2020年7月2日
- 添加“选择一行”快捷方式
- 添加“切换问题面板”
- 删除并组织导入模块
- 在终端之间导航
注意:选择引文内的标题,然后使用Ctrl + F可快速找到新添加的部分
多年来,我们一直用鼠标或触控板操作电脑,已经习惯了在屏幕上快速便捷地点击任何我们想要的操作。拖放、左键单击、右键单击,以及用鼠标滚轮上下滚动网页。
网络开发社区中的一些论点提到,不使用鼠标编写代码可能会更快。
我很想尝试一下。我的目标是90%专注于使用键盘。我认为在图形用户界面(GUI)环境中我们不可能完全避免使用鼠标,尤其是在检查导航链接、按钮和表单的时候。
我会尽力使用 VS Code 中的键盘快捷键、终端和命令行。然后记录我学习如何成为一名无鼠标开发人员(呵,应该是无鼠标开发人员)。
我不确定我是否能适应它。但我确信我的编码速度会大幅下降。
如果你能分享一下不使用鼠标编程的方法,那就太好了。我们一起学习吧。
以下是我迄今为止学到的键盘快捷键和导航,当我学到新知识时,我会不断更新这篇文章。
--最初几天--
我会无意识地使用鼠标,并且我总是要提醒自己不要使用它。
--更改光标颜色--
我将光标颜色改为黄色。这样我就可以轻松看到它了。
--打开文件--
方法 1:使用“转到文件”
我经常使用Ctrl + B关闭侧边栏。我使用Ctrl + E(也可以使用Ctrl + P )在各个文件之间导航,然后搜索文件名的关键字并按Enter打开文件。
例如:-
您的文件名是how-to-build-a-website-with-gatsbyjs.md,您可以输入gatsbyjs或build a website,VS Code 将过滤并显示与您的搜索匹配的每个文件。
方法二:使用面包屑导航键
Ctrl + Shift + .(句点)来聚焦当前面包屑导航文件夹。
使用Ctrl + 左右箭头在文件夹之间导航。
使用上下箭头在文件之间导航。
按Enter 键打开文件。
--在编辑器和资源管理器之间导航--
我很少用这种方法浏览文件夹和文件。我把这个方法分享给可能觉得有用的人。
方法 1
Ctrl + Shift + E将焦点移至资源管理器,再次按 Ctrl + Shift + E将焦点转回编辑器。
- 使用向上/向下箭头在文件或文件夹之间导航。
- 使用左箭头可向上移动一个目录,使用右箭头可进入目录内部。
- 按Enter 键打开文件。
方法 2
Ctrl + 0(零)(数字键盘上不起作用)将焦点集中在资源管理器上, Ctrl + 1(数字键盘上不起作用)将焦点转回编辑器
- 使用向上/向下箭头在文件或文件夹之间导航。
- 使用左箭头可向上移动一个目录,使用右箭头可进入目录内部。
- 按 Enter 键打开文件。
--在编辑器选项卡之间导航--
方法 1
我使用Ctrl + PgUp将焦点移至上一个选项卡,使用Ctrl + PgDn将焦点移至下一个选项卡。
方法 2
您可以使用Ctrl + Tab将焦点移至下一个选项卡,或者使用Ctrl + Shift + Tab将焦点移至上一个选项卡。
--关闭标签页--
- Ctrl + W关闭当前选项卡
--删除整行--
方法 1
按Backspace 键可删除左侧的一个字符
方法 2
按键盘上的Delete 键删除右侧的一个字符
--删除一个词--
- Ctrl+D选择一个单词(无论是在单词前面、后面还是单词内部),按键盘上的Delete 键即可删除该单词。
- 将光标放在要删除的单词的末尾,然后按 Ctrl + Backspace删除该单词。
- 将光标放在单词前面,然后按 Ctrl + Delete删除该单词。
--插入新行--
- Ctrl + Enter将光标移动到新行(向下移动一行)。Ctrl + Shift + Enter将现有行向下移动并添加新行。
--选择一行--
- Ctrl + L选择整行
--在编辑器中移动光标--
(抱歉包含这个基本内容)
- 右箭头向右移动一个字符
- 左箭头向左移动一个字符
- 向上箭头将光标向上移动一行
- 向下箭头将光标向下移动一行
--向上或向下移动一行--
除了使用Ctrl + X剪切一行和使用Ctrl + V粘贴一行之外,您还可以使用_Alt + 向上/向下箭头 _来上下移动一行
--按字移动光标--
- Ctrl + 右箭头将光标移动到单词末尾
- Ctrl + 左箭头将光标移动到单词的开头
--按部分移动光标--
- 键盘上的Home将光标移动到行首
- 键盘上的End将光标移动到行尾
- Ctrl + Home将光标移动到页面开头
- Ctrl + End将光标移动到页面末尾
- PgUp将光标移动到编辑器的顶部。
- PgDn将光标移动到编辑器的底部。
我有时用它来滚动编辑器。
--选择一个单词--
方法 1
Ctrl + D选择一个单词
方法 2
- Ctrl + Shift + 向右箭头选择右侧的单词
- Ctrl + Shift + 左箭头选择左侧的单词
--移动并选择一个单词--
- Ctrl + Shift + 右箭头移动光标并向右选择单词。
- Ctrl + Shift + 左箭头移动光标并向左选择单词。
--滚动编辑器--
- Ctrl + 向上箭头向上滚动一行。
- Ctrl + 向下箭头向下滚动一行。
我用它来调整编辑器视图。
--在 VS Code 中打开终端--
Ctrl + `(反引号)打开或关闭终端面板
--并排打开终端--
- Ctrl + shift + 5打开第二个终端
--在终端之间导航--
- Alt + 右/左箭头在终端之间导航。
--打开外部终端--
如果您总是忘记在关闭 VS Code 之前停止开发服务器。
使用Ctrl + Shift + C打开外部终端
如果要更改外部终端,请打开 VS Code 设置并搜索外部:Windows Exec
--清除 VS Code 内部的终端--
- 输入clear并按Enter 键
- 终端中的Ctrl + L
--显示所有命令--
方法 1
Ctrl + Shift + P查看所有命令
方法 2
我更喜欢按F1来查看所有命令
--切换问题面板--
当您看到文件变成红色时,VS Code 检测到文件中存在问题。
- Ctrl + Shirt + M将焦点放在问题面板上。
--删除并组织导入模块--
删除一些组件后,通常需要手动删除导入模块。
您可以通过按 Alt + Shift + O 自动删除那些未使用的组件或模块。
VS Code 的缺点是
它按照自己习惯的方式组织所有导入语句。我喜欢把 React 的导入语句放在最上面。但是,按下 Alt + Shift + O 之后,En... 或许你可以试试,看看自己是否喜欢。
--向前与向后--
假设你现在在第 1034 行,并且想要在编辑器顶部导入一个模块。你按下 Ctrl + Home 组合键导航到顶部并导入该模块。那么如何回到第 1034 行呢?
你可能需要记住行号并使用 Ctrl + G 选项。如果你不想费力记住行号怎么办?
- 您可以使用Alt + 左箭头向后移动(这不会改变或撤消任何内容,它只是返回到先前的位置或操作)
我为什么说还要回到之前的动作呢?
如果你之前的操作是选择一行,此时,你导航到顶部,然后按 Alt + 左箭头。它会返回到选择一行。
请注意,如果您在文件 1 中,然后转到文件 2 并导入一个模块。此时,按 Alt + 左箭头。您将返回到文件 1。
Alt + 右箭头前进
我想继续写,但是 dev.to 围栏块语法高亮不起作用。
以下是我得到的结果:-
`html
`
我不知道如何修复它,有人可以给我一些提示或指导我修复它吗?
(我最终在上面放置了 4 个反引号,在下面放置了 3 个反引号,以使围栏块语法高亮能够正常工作。
`
<div>
<article>
<a>I'm a button</a>
</article>
</div>
Dev.to 团队,发生了什么事?
我会继续...
--埃米特--
<div>
<article>
<a>I'm a button</a>
</article>
</div>
```
**Remove Tag**
I want to remove the article tag.
1. Place the cursor inside the tag until the beginning and the ending tag is glowing.
2. Press **_F1_**
3. Type **remove tag**
4. Press **_Enter_**

**Update Tag**
Same concept above
**Wrap with Abbreviation**
I want to wrap the word "link" with an anchor tag.
```
<p>Please check out this link</p>
```
1. Put the cursor in front the word "link"
2. **_Ctrl + D_** to select the word
3. Press **_F1_** and type **wrap**

4. Type **"a"** and press **_Enter_**
Thank you for reading~
**Hi, Do you have any similar tips could share with me?**