我希望早点知道的 VS Code 快捷方式和技巧简介 VS Code 快捷方式 VS Code 源代码控制选项卡 有用的 VS Code 扩展

2025-05-28

我希望早点知道的 VS Code 快捷方式和技巧

介绍

VS Code 快捷方式

VS Code 源代码控制选项卡

有用的 VS Code 扩展

介绍

自学一年后，我于2020年3月加入了“创始人与编码员”（Founders and Coders）网络开发训练营，开始全职编程。课程开始两周后，我们在英国进入了封锁状态，剩下的16周，我们的同伴们不得不远程办公。多亏了VS Code Live Share扩展程序的协作能力，我们仍然能够按计划进行结对编程和学习教学大纲。但由于无法面对面交流，我们错过了一些平时在一起工作时才能学到的小技巧和窍门。

你可以一边看别人演示，一边分享屏幕，但除非你看到他们在键盘上打字，否则你很难注意到那些能帮你节省时间的按键！因此，自从我开始担任全栈开发人员以来，我学到了很多实用的 VS Code 技巧，真希望在课程中就学到这些。

我将这些内容汇编成一篇演讲，面向下届创始人和编码员，题为“我为什么没早点知道这个？！”，我也想在这里与那些刚开始自己​​编码之旅的人分享。

VS Code 快捷方式

Emmet为一系列文件类型提供了一些默认缩写，包括 和.html，.css这些缩写可以扩展为有用的代码片段。Emmet 支持内置于 VS Code 中，因此无需下载扩展程序。

HTML 样板

如果您在 VS Code 中输入!文件html然后按 Enter 键，您将获得以下 HTML 框架：



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

这个样板中缺少很多我经常使用的 HTML 标签，所以我配置了自己的标签。

我将其制作!!成 VS Code 编辑器的自定义快捷方式，其中包括<meta>SEO 标签、用于链接 CSS 样式表和 JavaScript 文件的标签以及其他一些常用的语义标签。

为此，您需要导航至“代码”>“首选项”>“用户代码片段”，然后搜索“html.json”。然后将您的自定义代码片段添加到此文件中。

我建议先将所需的结构写到 HTML 文件中，然后将其复制到这样的工具中，将HTML 文件解析为带有转义字符的 JSON 字符串以获得正确的缩进。

我的html.json文件如下所示：



{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}
Enter fullscreen mode Exit fullscreen mode

完成的样板如下所示：



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Document</title>
</head>
<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
  <script src="scripts.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML 缩写

有时，学习输入快捷键比手动输入代码要花费更长的时间。我个人认为 Emmet 缩写并不能节省编写 CSS 的时间，但我认为一些 HTML 缩写很有用，包括：

嵌套元素

快捷方式nav>ul>li创建：



<nav>
  <ul>
    <li></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

多个元素

快捷方式li*5创建：



<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Enter fullscreen mode Exit fullscreen mode

带有文本的标签

快捷方式a{Click Me}创建：



<a href="">Click Me</a>
Enter fullscreen mode Exit fullscreen mode

具有多个类的元素

快捷方式div.first-class.second-class创建：



<div class="first-class second-class"></div>
Enter fullscreen mode Exit fullscreen mode

带有 ID 的元素

快捷方式div#main创建：



<div id="main"></div>
Enter fullscreen mode Exit fullscreen mode

可以在Emmet Docs Cheat Sheet上找到完整的快捷方式列表。

VS Code 源代码控制选项卡

使用 VS Code 的内置源代码控制功能，您可以使用 VS Code UI 暂存文件并编写提交消息，而不是使用终端。

我喜欢这个的是：

  • 您可以轻松地暂存特定文件，而无需在终端中输入文件路径。
  • 您可以更轻松地格式化您的提交消息。
  • 当您编写提交消息时，如果一行中的字符数超过“建议”值，它会发出警告。
  • 如果您使用 Live Share 扩展，则会出现您的合作者的共同创作凭据（他们必须使用他们的 GitHub 帐户登录）。

有用的 VS Code 扩展

括号对着色器 2

此扩展程序会对代码中的匹配的左括号和右括号进行着色，以便您可以一目了然地了解函数和语句的范围。

无扩展名：

带有扩展名：

编辑：本文最初链接到 Bracket Pair Colorizer v1，感谢@indcoder在评论中指出有一个更快、更准确的 v2！

相对文件路径

此扩展程序为您提供了从当前文件获取另一个文件的相对文件路径的快捷方式。这在包含大量嵌套文件夹的大型代码库中非常有用，因为文件之间需要进行大量的导入和导出操作，例如在 React.js 项目中。

使用快捷方式调出文件搜索（Windows Ctrl+Shift+H、Mac Cmd+Shift+H）：

搜索您想要相对路径的文件：

相对路径将会出现：

GitLens

这个扩展是 Git 为您的编辑器增强的，具有许多我还不知道如何使用的功能。

我使用它的目的是为了 Git 的 blame 功能，它可以注释文件中每一行最近的提交历史记录。这在小组项目上尤其有用，你可以一目了然地看到上次更改的时间、更改者以及相关的提交信息。

Prettier

Prettier 简直是救星，因为它会自动格式化你的代码！你可以下载它作为 VS Code 的扩展程序，它会运行你在应用程序中配置的设置（前往“设置”并搜索“Prettier”）。

要格式化当前文件，请右键单击并选择“格式化文档”，或者在保存文件时打开自动格式化，请转到“设置”并搜索“保存时格式化”并勾选复选框。

最好.prettierrc在组项目的根文件夹中有一个配置文件，在其中指定意图所需的空格数、单引号或双引号、所有行是否都应以分号结尾等。

配置文件会覆盖您本地的 VS Code Prettier 设置，因此团队中的每个人都会将相同的格式规则应用于他们的代码 - 避免严重的冲突！

我使用这个Prettier Config Generator来为文件生成 JSON，并且Prettier 文档详细解释了每个格式选项的含义。

文件中的 JSON 如下.prettierrc：



{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false
}
Enter fullscreen mode Exit fullscreen mode

重新格式化：

在此，具有一致的间距，平均行宽大约为 80 个字符，缩进使用 2 个空格而不是制表符，在每个语句末尾打印分号，并使用双引号而不是单引号：

这只是一个示例，用于演示 Prettier 所应用的格式更改，并非代码风格的推荐。大多数情况下，您无需过多地调整设置，只需使用基本配置即可保持代码库的一致性，或者当您开始从事开发工作时，您的公司已经拥有了统一的“公司风格”。

文章来源：https://dev.to/hannahgooding/vs-code-shortcuts-and-tricks-that-i-wish-i-knew-sooner-3mcj
Devto 翻译
PREV
全球人才签证：如何在没有雇主的情况下移居英国
NEXT
使用 React Hooks 创建延迟加载图像组件