10 个 Visual Studio Code 技巧，助您提升工作效率

概述

最近更新以包含 Windows/Linux 键盘快捷键。

概述

VS Code 是一款非常棒的程序，它拥有数百种功能，让编程变得轻而易举。以下是一些帮助我提高编程效率的技巧。（即使在 CSS 文件中，也能让我感觉自己像个酷酷的黑客。😎）

请注意，其中许多功能并不局限于 VS Code。请在您选择的 IDE 中试用它们，如果它们有效，请在下面的评论中告诉我们！

释放生产力！

技巧表

1. 禅定模式
2. 标签忍者
3. 多行编辑
4. 多行编辑：上帝模式
5. 最终富有成效
6. 埃米特爵士
7. 搜索-a-dactyl
8. 复制那个...
9. ...高于（低于）且出局
10. 反应点击

1. 禅定模式

你是否曾经被众多面板、标签、文件和终端窗口弄得不知所措？我也是。幸好，VS Code 提供了一种名为“禅定模式”的视图，可以简化屏幕，让你专注于代码。😌

macOS 快捷 方式：command+++optionshiftk

Windows/Linux 快捷方式 ：ctrl++kz

菜单： View > Appearance>Zen Mode

退出： esc +esc

返回顶部

2.标签忍者

我们都非常习惯于使用制表符来获取完美缩进的代码块。

但是，如果我们粘贴了一些新代码，而 VS Code 认为缩进五次比一次好，该怎么办？点击并退格每一行可不是件容易的事。

感觉自己像个忍者，按住 键时熟练地将代码向后移动到位shift。🥷

macOS/Windows 快捷方式： shift +tab

Linux： 可能有效，但无法确认。

返回顶部

3. 多行编辑

类名经常会发生变化，我们很高兴能够在 6 个（或 60 个）不同的地方更新它。

使用此命令，您只需选择一个或多个单词，它就会将光标放在文件中的所有匹配项旁边。

然后，就像编程大师一样，您可以一次性更新每个选定位置的代码。🙌

macOS 快捷方式： f2

Mac 键盘快捷键 ：command++fnf2

MacBook Touchbar 快捷键： fn +f2

Windows/Linux 快捷方式： ctrl +f2

返回顶部

4. 多行编辑：上帝模式

上面的技巧确实不错，但谁真的想要一台机器控制我们生活的方方面面呢？如果你想要控制多个不同的元素怎么办？

VS Code 还允许你将多个光标拖放到任意位置，以便进行精确的批量编辑。（天网，现在谁更聪明了？🤖）

macOS 快捷方式： option +click

Windows/Linux 快捷方式： alt +click

返回顶部

5. 终极生产力

常见的开发人员工作流程包括使用实时服务器并频繁提交到 git 存储库。

但是，退出服务器，然后导航到项目文件夹并进行提交需要很多步骤。

不如在 VS Code 中拆分终端，一边是实时服务器，另一边是 git hub 仓库文件夹。告别各种障碍！💪

这是我首选的 React 设置，因为我可以在左侧安装包和运行构建，并在右侧切换分支。

macOS 快捷方式： command +\

Windows/Linux 快捷方式： ctrl +\

返回顶部

6.埃米特爵士

Emmet 是 VS Code 内置的工具包，其他很多 IDE 也提供这个工具包。我第一次看到它被使用时，惊得目瞪口呆。

就像一个编码管家，你只需给它所需的简写代码，把脚放在桌子上，看着它毫不费力地呈现完整的 HTML、CSS 甚至 JSX。🧐

• HTML 样板： ! +spacebar

• 嵌套元素：div +++>pspacebar

• 多个元素：li +++*3spacebar

• 带有类的 Div： .class-name +spacebar

• 任何具有类的元素 ：h1++.class-namespacebar

• 元素中的 Lorem Ipsum： p + >+ lorem+spacebar

• 兄弟元素：h2++++pspacebar

这些只是一些 HTML 示例。更多命令和不同语言的版本请参阅 Emmet 文档。

返回顶部

7. 搜索达克泰勒

恭喜，您完成了一项新功能并准备部署……哦，但首先您需要找到用于调试的所有 console.log。😓

别担心！就像翼手龙一样，您可以使用强大的搜索功能在特定文件夹中搜寻任何猎物（代码）。

它将提供包含搜索词的文件列表，但仅限于该文件夹。（例如，仅在 components 文件夹内搜索，而不是整个 src 文件夹。）

macOS： 在资源管理器中选择文件夹> option+ shift+ f>搜索术语

Windows： 在资源管理器中选择文件夹> ctrl+ shift+ f>搜索术语

Linux： 可能与 Windows 的工作方式相同，但无法确认。

返回顶部

8. 复制...

编码的额外速度有时可以归结为将手放在键盘上而不是用鼠标拖动东西。

VS Code 让您可以快速地在两个方向上复制代码行，而无需离开开发板。

macOS 快捷方式 ：shift++optionarrow up/down

Windows/Linux 快捷方式 ：shift++altarrow up/down

返回顶部

9. ...高于（低于）且出局

别把你的手从键盘上拿开！除了复制代码，你还可以移动它！💁‍♀️

macOS 快捷方式： option +arrow up/down

Windows/Linux 快捷方式： alt +arrow up/down

返回顶部

10. 反应性点击

我很喜欢 React，但尝试查找深层嵌套的组件时可能会有点困惑。幸好 VS Code 提供了一种方法，只需单击一下即可快速深入查看组件。

macOS 快捷键： command + click（在组件上）

Windows/Linux 快捷键： ctrl + click（在组件上）

如果它在 Windows 上不起作用，请参阅本文。

返回顶部

释放生产力

希望这些对你来说是新知识，能帮助你加快下一个项目的开发速度！我很乐意在评论区分享你在 VS Code 中喜欢使用的效率技巧。祝你编程愉快！🤓

资源

macOS 键盘快捷键速查表

Windows 键盘快捷键速查表

Linux 键盘快捷键速查表

使用Adob​​e Photoshop和Unsplash设计的标题图像