学习在 VS Code 中成为无鼠标 Web 开发人员(更新日期:2020 年 7 月 22 日)

2025-05-24

学习在 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,您可以输入gatsbyjsbuild 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>
Enter fullscreen mode Exit fullscreen mode

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_**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kltt1kv3vp7oqvkzsgq1.png)


**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**
   ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8s5hup911otx77ux9o9c.png)
4. Type **"a"** and press **_Enter_**

Thank you for reading~

**Hi, Do you have any similar tips could share with me?**
Enter fullscreen mode Exit fullscreen mode
文章来源:https://dev.to/ansonlowzf/learning-to-be-a-mouse-less-web-developer-7em
PREV
你不必使用 Redux
NEXT
自定义和美化您的 Windows 终端(2022 版)