Visual Studio Code（或简称 VS Code）是一个非常常见且广泛使用的文本编辑器和 IDE（集成开发环境）。通过使用大量扩展，你可以将 VS Code 变得非常强大。

在开始介绍如何在 Visual Studio Code 上运行你的第一行 C 或 C++ 代码之前，让我根据你计算机上使用的操作系统，带你了解设置的整个过程。

C 和 C++ 编译器

要运行 C 或 C++ 代码，你只需要在你的计算机上安装一个有效的 C/C++ 编译器。如果你使用的是 Linux 操作系统，那么很有可能它已经安装在你的系统上了。但我们需要确保它已正确安装。

要检查你的系统上是否安装了编译器（GCC/G++/MinGW），你需要先检查编译器版本。

只需打开终端并使用 gcc --version 和 g++ --version。如果你得到版本号，那么说明编译器已经安装在你的系统上。

你可以在任何操作系统上使用相同的命令来检查版本，无论是 Windows、Linux 还是 macOS 系统。

如果你的终端反馈说它不知道 GCC 或 G++，那么你需要正确安装编译器。

如果你使用的是最常用的 Windows 操作系统，那么我已经在 freeCodeCamp 上写了一篇详细的文章《如何在 Windows 上安装 C 和 C++ 编译器》，一步步展示所有过程。确保先阅读整篇文章，因为它还包含一个完整的视频，为你提供全面的支持。

如果你使用的是其他操作系统，并且没有安装编译器，请确保在继续之前安装它们。

如何安装 VS Code 或 VS Code Insiders

你需要直接从官方网站下载 Visual Studio Code：https://code.visualstudio.com/。

如果你愿意，你也可以安装 VS Code Insiders，过程也是同样的。

Visual Studio Code Insiders 实际上是 Visual Studio Code 的 “Insiders” 版本，它包含每天发布的所有最新功能。你可以将 VS Code 视为稳定版，将 VS Code Insiders 视为预览版。

如果你想立即体验最新的更新，那么你也可以尝试 Visual Studio Code Insiders（我自己也在使用）。要下载 VS Code Insiders，可以访问其官方网站：https://code.visualstudio.com/insiders/

确保下载与你的操作系统匹配的文件。

安装过程非常简单。但我会按顺序向你展示所有步骤。现在，我将展示使用 VS Code Insiders 的安装过程，但你在这里看到的一切，对于 VS Code 也完全相同。

确保勾选“我接受协议”框，然后点击 Next。

保持所有设置不变。不用更改任何内容。

点击 Next。再次点击 Next。

确保勾选所有框（✔），然后点击 Next。

点击 Install。

完成安装可能需要一些时间。

点击 Finish。

恭喜 - 你已经成功在系统上安装了 VS Code/VS Code Insiders。现在，干杯！🥂

如何为 C 和 C++ 代码准备 VS Code/VS Code Insiders

首先，打开 VS Code 或 VS Code Insiders。

进入扩展选项卡。搜索 “C” 或 “C++” 并安装第一个已被微软验证的扩展。

还需要安装 C/C++ Extension Pack。这个扩展包同样应当由微软验证。

接下来，搜索 Code Runner 并安装该扩展。

现在，我们需要更改一些设置。

点击齿轮箱（它被称为管理部分），然后点击设置。或者，你也可以使用快捷键 Ctrl + ,。对于 Mac 系统，需要将 Ctrl 键替换为 Command 键。

在搜索栏里输入 “Run code in terminal” 并按下 Enter 键。

向下滚动直到找到 Code-runner: Run In Terminal。确保该选项被勾选（✔）。

现在你需要重新启动你的 VS Code/VS Code Insiders。简单地关闭并重新打开程序即可。

如何测试你的代码

只需打开 VS Code/VS Code Insiders，打开任何文件夹，并创建扩展名为 .c 的 C 文件和扩展名为 .cpp 的 C++ 文件。

写好代码后，你可以使用右上角的播放按钮直接运行代码。

它将直接编译并运行代码。运行代码后，代码运行按钮会默认直接运行。你的电脑已经 100% 准备好编译和运行任何 C/C++ 编程代码了。😀

小结

感谢你阅读整篇文章。如果这篇文章对你有帮助，你也可以在 freeCodeCamp 查看我的其他文章。

如果你想与我联系，你可以通过 Twitter、LinkedIn 和 GitHub 与我联系。

如果你想定期学习各种编程语言和大量实际案例，你也可以订阅我的 YouTube 频道（Code With FahimFBA）。

如果你想查看我的进展，你可以在我的 Polywork 时间线上查看。

你也可以访问我的网站来了解更多关于我的信息和我在做的事情。

非常感谢！

如今，各家科技公司都在努力快速构建高质量的软件。因此，每个开发人员都必须学会如何编写简洁、可读性强的代码。

当一个项目由多名开发人员管理时，保持一致性就显得特别重要，尤其是在编写代码方面。

在众多团队成员和项目中保持一致的代码风格和格式是一项具有挑战性的任务。手动实现几乎是不可能的，但这正是 Prettier 发挥作用的地方。

在本指南中，你将学习如何在 Visual Studio Code 中安装 Prettier，以及如何使用它来格式化代码。

前提条件

在学习本指南之前，你需要下载并安装 Visual Studio Code。

Prettier 是什么

Prettier 是一款功能强大的代码格式化工具，可将全过程自动化。它能确保你的代码符合规定的编码标准，无需任何手动操作（除非你想手动操作）。

Prettier 不仅支持所有 JavaScript 库和框架，如 Angular、React、Vue 和 Svelte，还支持 TypeScript。

这也是它被全球众多技术人员使用的原因。

如何在 Visual Studio Code 中安装 Prettier

要在 Visual Studio Code 中安装 Prettier，你需要：

• 打开扩展选项卡。
• 在搜索框中输入 Prettier。

在列表顶部，你可以找到 Prettier - Code formatter 扩展。你需要打开它，然后点击安装按钮：

安装成功后，你会看到“此扩展已全局启用”的提示：

如何在 Visual Studio Code 中启用 Prettier

安装好 Prettier 扩展后，你需要配置 Visual Studio Code 以使用它。你可以在“设置”选项卡中进行配置。

注：要打开“设置”选项卡，在 macOS 上可以使用 COMMAND + ,，在 Windows 和 Linux 上可以使用 CTRL + ,：

在“设置”选项卡顶部有一个搜索框。现在，你需要输入 Formatter，你会看到 Editor: Default Formatter：

现在，打开下拉菜单，从列表中选择 Prettier - Code formatter：

现在，Prettier 是你的默认代码格式化工具，但你可能希望在保存文件时启用 Visual Studio Code 自动格式化代码。

如果需要，只需在 Format On Save 部分勾选复选框即可：

如何在 Visual Studio Code 中使用 Prettier 格式化代码

让我们来看看我创建的一个 React 组件：

正如你所看到的，这段代码完全没有对齐，缺少分号，阅读起来非常困难。代码可以用更好的方式格式化，对吗？这就是 Prettier 发挥作用的地方。

要格式化代码，我们需要打开命令面板——在 macOS 上可以使用 COMMAND + SHIFT + P，在 Windows 和 Linux 上可以使用 CTRL + SHIFT + P。

现在，你需要找到 Format Document。你可以使用搜索框：

运行 Format Document 后，你的代码会变得整洁干净：

总结

将 Prettier 集成到 Visual Studio Code 中，对于努力保持代码库一致性和高质量的开发人员来说，无疑是一场变革。

通过自动格式化过程，你不仅遵守了编码标准，还减少了手动格式化代码所带来的麻烦，因此每个开发人员都应该使用 Prettier 来确保代码库的一致性。

希望这篇文章对你有所帮助。如果你能在你的社交媒体上分享这篇文章，那将对我意义非凡。

如果你有任何问题，可以通过 Twitter 联系我。

学习 React

想要学习 React 的实用课程？

🚀 在 Udemy 参加我的 React 18 课程。

本课程包括：

• 🎥 5.5 小时点播视频
• 📱 通过手机和电视访问
• 🗓️ 终身完全访问
• 🎓 结业证书

点击此处参与。

无论是开发人员、学生还是其他专业人士，每个人都希望能够提高工作效率。毕竟，这意味着在更短的时间内完成更多的任务。

ChatGPT--即 Chat Generative Pre-Training Transformer（基于转换器的生成式预训练模型）--最近在科技行业掀起了波澜。它于 2022 年 11 月首次推出。然后，升级版的 ChatGPT-4 在 2023 年 3 月问世。

在本教程中，我将解释如何使用 ChatGPT 来提高生产力，然后我将指导你如何在 VSCode 编辑器中安装 ChatGPT 扩展。

ChatGPT 如何帮助你

在当今快节奏的世界中，工作效率比以往任何时候都更为重要，而 ChatGPT 则是提高效率的关键。开发人员使用 ChatGPT 进行调试、代码创建和文本重写等活动，而这款先进的工具还提供了其他重要功能：

1. 类人对话：ChatGPT 提供了增强的对话体验，让你感觉是在与真人互动。这有助于使其成为一款更直观的工具。
2. 快速准确的回答：通过使用 ChatGPT，你可以获得对你的询问的准确回复，这有助于最大限度地提高你的工作效率（只是不要忘记进行事实核查！）。
3. 持续改进：ChatGPT 可从用户互动中学习，并随着时间的推移不断提高性能。这使它成为个人开发者和团队的资产，使他们在快节奏和高要求的世界中保持竞争力。
4. 高效完成任务：ChatGPT 就像一个助手，能更快地完成琐碎或重复性的任务，从而节省你的时间，让你可以专注于更重要的事情。
5. 定制化学习体验：ChatGPT 能适应你的学习风格和进度。它可以根据你的具体需求和兴趣提供个性化的解释、示例和资源。通过强调最适合你的方式，并以符合你个人偏好的方式呈现概念，ChatGPT 可增强你的学习体验，促进更好的理解。
6. 实时反馈和指导：通过使用 ChatGPT，你可以收到关于你的代码的实时反馈，从而提升你的编程技能。无论你是寻求指导的初学者，还是希望扩展编程技能的经验丰富的开发人员，ChatGPT 都能为你提供有价值的见解和建议。

有了 ChatGPT，你可以在更短的时间内取得更多成果，同时享受尖端语言模型的便利性和有效性。

如何在 VSCode 中安装 ChatGPT

安装 CodeGPT 可以提高开发人员的工作效率并增强你的工作流程。安装 CodeGPT 扩展后，你无需离开集成开发环境（IDE）即可方便地访问 ChatGPT 的功能。

具体方法如下：

首先，你需要按照以下步骤访问 VSCode 中的扩展列表：

• 打开“视图”菜单。
• 从下拉列表中选择扩展。这将允许你在 VSCode 中查看和管理你的扩展。

打开扩展面板后，你将可以访问一个市场，你可以在其中浏览和安装各种工具来增强 IDE 中的工作流程。

接下来，安装 ChatGPT（也称为 CodeGPT），并按照以下简单步骤操作：

• 在 VSCode 中，找到搜索栏。
• 在搜索栏中输入“CodeGPT”。
• 按 Enter 键。

该扩展名应该出现在搜索结果中。单击 CodeGPT 扩展旁边的“安装”按钮，将其添加到你的 VSCode 环境中。

要开始使用扩展，请按照下列步骤操作：

• 打开你喜欢的网络浏览器。
• 搜索 OpenAI 或访问他们的网站 OpenAI。

你可以通过以下步骤访问 API reference：

• 找到网页顶部的菜单栏
• 点击菜单中的开发者部分
• 会出现一个下拉菜单
• 从下拉菜单中选择 API reference

当你访问他们的网站并点击 API reference 部分，系统将提示你创建一个新帐户或使用你的 Google 帐户登录。这一重要步骤对于继续进行与 API 相关的活动并探索它提供的所有功能是必要的。

登录账户后，单击你的账户个人资料以显示下拉菜单，从选项中选择 “View API Keys”（查看 API 密钥）以继续。

选择查看 API 密钥后，系统将引导你进入下一页。找到标有 API 密钥的部分，然后单击 “Create new secret key”（创建新的密钥）按钮，这将生成一个 API 密钥，你可以将其集成到 VSCode 环境中。

要集成你的 API 密钥，请按照以下简单步骤操作：

• 返回 VSCode
• 打开设置
• 在设置窗口中，在搜索栏中输入 “CodeGPT”
• 找到 “CodeGPT: API Key” 部分
• 从 OpenAI 复制生成的 API 密钥
• 将 API 密钥粘贴到 “CodeGPT: API Key” 部分下的指定字段中

通过执行这些步骤，你将把 API 密钥集成到 VSCode 中的 CodeGPT 扩展中。

将 API 密钥集成到 VSCode 后，你会发现它被列为已安装的扩展。

安装成功后，你可以在你的 VSCode 中使用 CodeGPT。

下面是一个例子，显示了 CodeGPT 在你的 VSCode 中安装后的结果：

当我尝试安装扩展时遇到 “429 Undefined Error”，我该怎么办

如果你在 VSCode 环境中安装 ChatGPT 时遇到 “429 Undefined Error”，这可能意味着你已经超出了 OpenAI API 的使用限制或速率限制。

要解决此问题：

• 获取新电子邮件并注册，使用新电子邮件生成 API 密钥，或者最好是观看资源部分下的视频来指导你。
• 验证你的互联网连接：确保你有稳定的互联网连接，以避免任何与网络相关的错误。

总结

通过遵循在 VSCode 中安装 ChatGPT 的步骤指南，你可以提高你的生产力，并在这种语言模型的帮助下有效地完成更多的任务。

按照此分步指南在 VSCode 中安装 ChatGPT 可以提高你的工作效率并帮助你完成任务。

将 ChatGPT 集成到你的 VSCode 环境中将帮助你更快地工作并取得更好的结果。你可以利用这种强大的语言模型简化工作流程、接收即时反馈并最大限度地发挥你的潜力。

拥抱生产力的未来，充分利用 VSCode 中的 ChatGPT，节省工作时间和精力。

如果你认为这篇文章有价值，我恳请你将本文分享给同样喜欢这些内容的开发人员。通过在社区内交流知识和资源，我们可以共同为我们领域的进步做出贡献。

你可以在 Twitter 和 LinkedIn 上与我联系，了解我的最新作品。

感谢你花时间阅读本文💖。

资源

• ChatGPT for VSCode
• 帮助你提高生产力的 AI 助手（除了 ChatGPT 之外）

Visual Studio Code 是目前最流行的代码编辑器之一。它是免费的，它有一个干净的界面，而且它有无数的扩展，使编程更容易、更有趣。

我是一名前端 Web 开发人员，我在工作时和在我的 YouTube 频道上使用 VS Code。有很多人问我，当我在编码时，浏览器是如何自动刷新而不用点击重载按钮的。

好吧，如果你在 VS Code 中配置一个有用的扩展，即 Live Server，这是有可能的。在这篇文章中，我将详细介绍它的工作原理，以及如何在 VS Code 编辑器中设置和配置 Live Server。

我为什么要使用 Live Server 扩展

通常情况下，当你对代码进行修改或写一些新的东西时，你需要手动刷新页面以看到这些变化。

换句话说，如果你每天对代码进行 100 次修改，你需要刷新浏览器 100 次。

然而，Live Server 扩展可以为你自动完成这项工作。安装后，一个自动化的 localhost 将能够在你的浏览器中运行，你可以通过一个按钮来启动它。

一旦你在代码中做了修改或写了新东西，在保存之后，浏览器将自动刷新。然后，你就能快速、自动地看到这些变化。

你也可以观看下面的教程视频：

首先，安装 VS Code

如果你已经在电脑上安装了 VS Code，可以跳过这部分。否则，你可以从其官方网站下载。

在你下载并安装了 VS Code 后，你将看到欢迎界面：

在左边，你应该看到几个图标。其中一个（在 no bugs 图标下）是扩展按钮：

一旦你点击它，将出现一个搜索栏，只需输入 “Live Server”。

你会看到很多选项，你可以选择适合你系统的任何一个。我使用的是 Ritwick Dey 的 Live Server，所以在这个例子中我们继续使用这个：

点击安装按钮，它将安装该扩展。

创建一个新的 HTML 页面

要启动 Live Server，确保你至少创建一个 HTML 页面。要做到这一点，点击最上面的文件按钮，然后选择新文件按钮并输入 index.html：

配置问题

现在，在你创建了一个 HTML 页面并安装了扩展后，你应该能在蓝色区域的正下方看到一个 “Go Live” 图标：

如果你没有看到它，就重新启动 VS Code，然后应该就可以了。

点击 “Go Live” 按钮，localhost（分配到一个端口号）应该在你的默认浏览器上启动。你可以通过点击同一个按钮随时启动和停止你的实时服务器。

如果你已经到了这一步，恭喜你！:) 现在你可以使用 Live Server 了。如果你仍然有问题，请查看这篇文章以获得更多信息。

总结

我希望这篇文章能帮助你在 VS Code 中安装和配置 Live Server 扩展。如果你想了解更多关于 Web 开发的知识，请随时访问我的 YouTube 频道。

谢谢你阅读本文。

在本教程中，我们将介绍如何从 Mac 终端打开 VS Code 文本编辑器（Visual Studio Code）。

从终端打开文本编辑器是打开新项目和更快开始编码的一种快速、简单的方法。

如何下载和打开 VS Code

你需要做的第一件事是打开 VS Code。如果你还没有 VS Code，可以在这里下载。VS Code 是 Microsoft 创建的流行的文本编辑器。

打开 VS Code 后，它应该如下所示：

现在，运行 Command + Shift + P。

你应该看到如下界面：

我们在这里所做的是打开了 VS Code 命令面板，这将允许你自定义 VS Code 设置等。

接下来，进入命令面板类型 shell 并按回车键。当你键入 shell 时，你的编辑器应如下所示：

当你点击回车键，你就完成了。你现在应该会看到一条成功消息：

现在你可以从终端打开 VS Code。现在让我们这样做。

如何从终端打开 VS Code

首先，打开你的终端。你可以通过几种方式打开终端。一种方法是同时按下 command 按钮和空格键。这将打开聚焦搜索。从这里，你可以输入“终端”。

一旦你的终端打开，你可以通过输入 $ code . 从它打开 VS Code。然后按回车键。

这应该是这样的：

点击回车键就可以打开 VS Code 了。

祝你编程愉快！

工程师们每天有很大一部分时间是在他们的集成开发环境（简称为 IDE）中编写代码。而 Visual Studio Code 是市场上最好的免费 IDE 之一。

我发现，个性化我的 IDE 可以帮助我更加享受使用它的时间。我想与大家分享同样的快乐火花，并一直在寻找和测试可以下载的最佳扩展，而其中很多都能帮助你提高工作效率。

这篇文章超越了主题扩展，所以我建议先挑选一个主题，或者试试我目前最喜欢的主题 Dracula Refined。

Indent Rainbow 彩虹缩进

Indent Rainbow 是一个伟大的工具，可以为你的设置添加色彩和提高生产力。它还可以作为你缩进的对齐检查。每个缩进都有一个交替的彩虹颜色。

奖励：彩虹缩进调色板

想在你的 Indent Rainbow 中定制颜色吗？请看 Evondev 的 Indent Rainbow Palettes。

安装 Indent Rainbow 后，再安装这个扩展，并按照所述步骤选择一个新的渐变调色板。

Bracket Pair Colorizer 括号对着色器

这将为括号添加彩虹色，匹配的括号将有相同的颜色。这个扩展在我寻找缺失或多余的括号时救了我好几次。

Bracket Pair Colorizer 是另一个受欢迎的扩展，安装量超过 400 万。

2022 年的作废通知

这个扩展最近已经作废了。这是因为 VSCode 的升级允许对括号进行着色设置。这可以在你的用户设置中用 "editor.bracketPairColorization.enabled": true 来切换。

这个功能的改进使得它成为一个更好的选择，但是如果你不愿意编辑你的用户设置，我建议你找一些扩展来处理这个问题，比如 Bracket Pair Colorizer 或 Rainbow Brackets。

Colorize

Colorize 通过高亮显示颜色变量的颜色值来实现可视化。这对翻译十六进制代码和变量名称来说是一个方便的省时工具。

Peacock

Peacock 提供可选的窗口颜色。它对于管理多个工作空间非常有用。在类似的窗口之间跳转时，很容易忘记你在哪个工作区，但有了 Peacock 提供的明亮的颜色就不会了。你甚至可以自定义工作区的颜色。

VSCode Icons

添加图标可以在浏览你的文件夹时有所帮助。VSCode Icons 有一个广泛的图标库，与各种文件类型相匹配。

例如，你可以很容易地根据图标看到你是在选择 TypeScript 文件还是 JavaScript 文件。它还为文件夹结构增加了额外的色彩和细节。

TODO Highlight

TODO Highlight 将定制你的 TODO 注释列表，并使它们用颜色突出。注释的代码是很容易被忽略的，但有了这个扩展就不一样了，因为很难忽略亮橙色的文本。

TODO 和 FIXME 是内置的关键词。你可以选择自定义这些颜色并添加额外的关键词。

TL;DR

以下是本文中提到的扩展的列表：

• Indent Rainbow
• Bracket Pair Colorizer
• Colorize
• Peacock
• VSCode Icons
• TODO Highlight
• Dracula Refined Theme

我希望这些扩展也能为你的 VSCode 带来彩虹般的色彩。

VS Code 有很多很棒的扩展，而 Live Server 是其中之一。

只需点击几下，Live Server 就能让你在实际的浏览器中看到你的页面。更好的是，它具有实时重载功能，所以如果你更新了代码，这些更新也会显示在浏览器中。

你所要做的就是在你想要查看的 HTML 文件中点击右键，然后选择“用 Live Server 打开”。

但是，如果 Live Server 没有像你期望的那样打开浏览器并显示页面，怎么办？在这种情况发生的时候，你可以试试以下办法。

重启 VS Code

有时候，你能做的最好的事情就是重新启动 VS Code。

首先，保存你所有的工作。然后关闭 VS Code，这也将停止运行你所安装的所有扩展。

然后，重新打开 VS Code，再试一次——打开你想查看的 HTML 文件，点击右键，并选择“用 Live Server 打开”。

为 Live Server 设置浏览器

有可能是扩展功能在工作，但你的系统没有默认的浏览器。

即使你为你的系统设置了默认浏览器，也不妨让 Live Server 明确知道你想使用哪个浏览器也无妨。

首先，用 F1 打开命令栏，然后输入 Preferences: Open Settings (JSON)，并选择该选项。

这将打开你的 VSCode settings.json 文件。

一路滚动到文件底部，在最后一个设置后添加一个逗号，然后粘贴 "liveServer.settings.CustomBrowser": "chrome"。

注意，你也可以把 "liveServer.settings.CustomBrowser" 的值设置为 "firefox"、"safari" 或其他浏览器。

最后，保存 settings.json 文件，并尝试再次运行 Live Server。

为你的操作系统设置默认浏览器

即使在告诉 Live Server 你想使用哪个浏览器之后，它仍有可能无法在该浏览器中正确打开你的页面。

接下来要尝试的是为你的操作系统本身设置默认浏览器。

具体方法可能根据你的操作系统而有所不同，所以如果你不确定，最好搜索一下如何做到这一点。

下面是展示如何在 Windows 中设置页面。

直接查看页面

如果由于某些原因，Live Server 仍然没有在你的浏览器中自动打开页面，不用担心。你可以随时打开你选择的浏览器，直接查看该页面。

打开浏览器，输入 http://127.0.0.1:5500/<your_file_name>。

例如，如果你的文件叫 index.html，只需输入 http://127.0.0.1:5500/index.html。

只要 Live Server 正在运行，你就应该可以看到你的页面。

小结

这些是一些常见的修复方法，如果 Live Server 没有按照你期望的方式运行，你可以试试这些方法。

祝你编程愉快。

安装 VSCode 插件

打开 VSCode，安装以下插件：

eslint
stylelint
volar

打开 VSCode 配置文件（Mac command + shift + p，windows ctrl + shift + p，输入 settings）。

在配置文件中加入以下代码：

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
],

安装项目依赖

安装以下依赖:

npm i -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-typescript eslint-plugin-vue husky sass stylelint stylelint-config-standard stylelint-scss typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser vue-eslint-parser

注意，有些依赖版本对不上的时候，会造成格式化失败。例如 eslint 插件使用 8.0 版本以上格式化就报错，后来使用的是 7.0 的版本。安装后的具体版本如下：

"@typescript-eslint/eslint-plugin": "^5.1.0",
"@typescript-eslint/parser": "^5.1.0",
"eslint": "^7.2.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-typescript": "^0.14.0",
"eslint-plugin-vue": "^7.20.0",
"husky": "^4.2.3",
"sass": "^1.43.3",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",
"typescript": "^4.4.3",
"vue-eslint-parser": "^7.11.0",

建议大家直接复制上面的代码到 package.json 文件中再下载。

配置 .eslintrc.js .stylelintrc.js 文件

我的 eslint 配置是基于 airbnb 规范的， css 规范用的是官方插件。

.eslintrc.js 文件

module.exports = {
    root: true,
    globals: {
        defineEmits: 'readonly',
        defineProps: 'readonly',
    },
    extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:vue/vue3-recommended',
        'airbnb-base',      
    ],
    parser: 'vue-eslint-parser',
    plugins: [
        '@typescript-eslint',
    ],
    parserOptions: {
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
    },
    rules: {
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-bitwise': 'off',
        'no-tabs': 'off',
        'array-element-newline': ['error', 'consistent'],
        indent: ['error', 4, { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }],
        quotes: ['error', 'single'],
        'comma-dangle': ['error', 'always-multiline'],
        'object-curly-spacing': ['error', 'always'],
        'max-len': ['error', 120],
        'no-new': 'off',
        'linebreak-style': 'off',
        'import/extensions': 'off',
        'eol-last': 'off',
        'no-shadow': 'off',
        'no-unused-vars': 'warn',
        'import/no-cycle': 'off',
        'arrow-parens': 'off',
        semi: ['error', 'never'],
        eqeqeq: 'off',
        'no-param-reassign': 'off',
        'import/prefer-default-export': 'off',
        'no-use-before-define': 'off',
        'no-continue': 'off',
        'prefer-destructuring': 'off',
        'no-plusplus': 'off',
        'prefer-const': 'off',
        'global-require': 'off',
        'no-prototype-builtins': 'off',
        'consistent-return': 'off',
        'vue/require-component-is': 'off',
        'prefer-template': 'off',
        'one-var-declaration-per-line': 'off',
        'one-var': 'off',
        'import/named': 'off',
        'object-curly-newline': 'off',
        'default-case': 'off',
        'import/order': 'off',
        'no-trailing-spaces': 'off',
        'func-names': 'off',
        radix: 'off',
        'no-unused-expressions': 'off',
        'no-underscore-dangle': 'off',
        'no-nested-ternary': 'off',
        'no-restricted-syntax': 'off',
        'no-mixed-operators': 'off',
        'no-await-in-loop': 'off',
        'import/no-extraneous-dependencies': 'off',
        'import/no-unresolved': 'off',
        'no-case-declarations': 'off',
        'template-curly-spacing': 'off',
        'vue/valid-v-for': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        '@typescript-eslint/no-empty-function': 'off',
        'no-empty': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        'guard-for-in': 'off',
        '@typescript-eslint/ban-types': 'off',
        'class-methods-use-this': 'off',
        'no-return-await': 'off',
        'vue/html-indent': ['error', 4],
        'vue/html-self-closing': 'off',
        'vue/max-attributes-per-line': ['warn', {
            singleline: {
                max: 3,
                allowFirstLine: true,
            },      
            multiline: {
                max: 1,
                allowFirstLine: false,
            },
        }],
        'vue/singleline-html-element-content-newline': 'off',
    },
}

.stylelintrc.js 文件

module.exports = {
    extends: 'stylelint-config-standard',
    rules: {
        'indentation': 4,
        'selector-pseudo-element-no-unknown': [
            true,
            {
                ignorePseudoElements: ['v-deep']
            }
        ],
        'number-leading-zero': 'never',
        'no-descending-specificity': null,
        'font-family-no-missing-generic-family-keyword': null,
        'selector-type-no-unknown': null,
        'at-rule-no-unknown': null,
        'no-duplicate-selectors': null,
        'no-empty-source':null,
        'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['global'] }]
    }
}

踩坑

Unknown word (CssSyntaxError) 错误

这个错误是因为安装的插件 stylelint stylelint-config-standard stylelint-scss 版本太新的问题，对于 vue3 模板文件的支持不是很好，不能正确识别 .vue 文件的 css 代码。所以将以上三个插件的版本降一个大版本就好了，最后的版本如下：

"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0",
"stylelint-scss": "^3.21.0",

另一种解决方案是安装 postcss-html 插件，但是 stylelint 14 版本的插件有很多问题，验证规则也和之前不太一样，并且 .scss 文件还验证不了。最后没找到解决方案，建议还是将版本降级比较好。

同时需要将 VSCode 的 stylelint 插件降级，现在插件的最新版本是 1.0.3，不支持 stylelint 13 版本。点击插件旁边的小齿轮，再点 Install Another Version，选择其他版本进行安装。

选 0.87.6 版本安装就可以了，这时 css 自动格式化功能恢复正常。

忽略 .vue 文件中的 HTML 模板验证规则无效

举个例子，如果你将 HTML 模板每行的代码文本长度设为 100，当超过这个长度后 eslint 将会报错。此时如果你还是想超过这个长度，可以选择忽略这个规则：

/* eslint-disable max-len */

注意，以上这行忽略验证的代码是不会生效的，因为这个注释是 JavaScript 注释，我们需要将注释改为 HTML 格式，这样忽略验证才会生效：

<!-- eslint-disable max-len -->

总结

这样配置完成之后，基本上 vue3 项目里的代码都能格式化了（css js html 及各种衍生代码）。没有使用 prettier 是因为不够自由，而且它的功能已经可以由 eslint stylelint 来代替了。

为了不让大家再次踩坑，我已经将配置好的项目 demo 上传到 GitHub 了，有需要直接克隆项目就行。这是项目地址。

这个极简主题使用了 freeCodeCamp.org 独特的配色方案、排版和 UI 设计感，赏心悦目，将帮助你进入编程心流状态，全身心投入到工作中。

这是深色主题的预览：

你可以从 Visual Studio Marketplace 下载此主题。

或者你可以直接打开 VS Code 编辑器的扩展选项卡并搜索 “freeCodeCamp Dark Theme” 来安装它。

关于深色主题

这个主题基于 freeCodeCamp 的 “Command Line Chic” 视觉美感（chic 译作中文是“高雅、雅致”的意思）。如果你喜欢美剧《黑客军团》，那么这种风格适合你。

我们在设计这个主题的时候，综合考虑了颜色对比度、优雅的效果以及可读性之间的平衡。

如果你喜欢设计，可以在 freeCodeCamp 的设计风格指南中查看 Command Line Chic。

好好探索这个颜色主题吧，happy coding!

原文：VS Code Dark Theme – A freeCodeCamp Night Mode Style for Visual Studio Code，作者：Tom Mondloch

在这篇文章中，我会教你如何开始使用 VS Code。

这里有一个视频，作为文章的补充。

介绍 VS Code

如果你还没有安装 VS Code，去 code.visualstudio.com 下载。你可以在下拉菜单上选择你想下载的版本，但一般情况下，直接点击下载按钮就行。

VS Code 欢迎标签

安装并打开后，你第一眼看到的是欢迎标签。你会在这儿发现 5 个部分：

开始：你可以选择新建文件或打开文件夹。

最近：你能够找到最近打开的所有文件夹。

帮助：你能够找到一些有用的信息。比如，可打印的键盘清单或一系列介绍视频。

自定义：如你所见，你能够从像 Vim 或 Atom 之类的代码编辑器上为 VS Code 安装设置和键盘快捷键。所以在你目前已经习惯使用这些编辑器的情况下，你可以去看看。

但我们将要看的是色彩主题。你能看到有一系列主题供你想选择。你也可以通过上下箭头预览主题。但我最喜欢默认主题，所以我不会修改。

学习：这儿你会发现 3 个选项。表中的第一个选项是寻找并运行全部命令。我们可以通过它找到并运行全部的可用的命令。我们会经常使用，所以我推荐你记住这一快捷键——Command/Control + Shift + P。

第二部分是界面预览。如果我们选择它，我们能看到用户界面上大部分常用的元素，我们还能看到切换元素的快捷键：

最后一个部分是交互编辑区。你能在发现高亮的特性，来自 VS Code 的指导和例子。

比如，选择 Emmet。我们能用 Emmet 写快捷键然后扩展成代码片段。

例如，我们假设自己想创造一个有三个项目的无序列表，每个项目的类名字是 “fruit”。我们可以打出 ul>li.fruit*3 然后按下 tab。

你也可以看那个已有的例子（ul>li.item$*5），它会创建一个无序列表，它的类名称也是按照顺序排列的：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

在这部分，你还可以找到非常有用的 Emmet 清单。

好了，我推荐你尝试这些特性。它们有很多，所以现在不理解也没关系，以后你可以时常看看这些。

VS Code 文件浏览器

下面，一起来到 文件浏览器，通过点击侧导航的第一个标签或者快捷键 Command/Control + Shift + E 显示。

你可以在这打开一个已存在的文件夹，但是让我们新建一个文件夹和文件。打开 VS Code 的终端而不是打开一个新窗口。你可以选择状态栏的错误和警告按钮，然后选择终端标签或者你可以使用快捷键 Control +.

现在我在自己的家目录。通过输入 mkdir vscode-tutorials 新建文件夹，通过输入 cd vscode-tutorials 进入文件夹。

现在我们想在 VS Code 中打开这个文件夹，所以我们可以选择 open folder 导航到文件夹目录——但这样会麻烦很多。倒不如在终端输入 code .。你可能会遇到错误：bash: code: command not found。

为了修正它，我们可以打开命令面板并寻找 Shell Command: Install code command in Path，选择它。现在如果我们回到终端并输入 code .，创建的文件夹会在新的 VS Code 窗口里。

下一步，我们想创建一个新文件。在文件夹区域，我们能够点击新建文件图标或者在文件夹右键选择 新文件。取名 index.html，输入感叹号（!）按下 tab 或回车。因为 Emmet 的存在它会生成一个 HTML 模板。

现在让我们再一次打开命令面板，搜索 格式化文档 并选择它。你能看到在不同的部分添加了空格，我们的代码也变整洁了。

这是 VS Code 里非常有用的特性。但是我们不想总是搜索 格式化文档，我们想在无论何时保存文件都会格式文档。

你也会注意到：在这里缩进和 四个空格 的效果是相等的。在我看来这有点多。所以，把它改成 2 个空格的缩进。为了能改变空格的缩进数目，我们可以去打开设置，可以使用快捷键 Command/Control + , 打开。

在 常用 标签栏，我们可以改变标签大小；在文本编辑或格式化区域，我们可以选择在保存时格式化。现在无论我们什么时候保存，文件都会正确地格式化。

VS Code 扩展

我想教你使用的最后一个事物是扩展。你可以直接点击侧边导航打开扩展标签或者使用快捷键 Command/Control + Shift + X 打开。

在这里我们可以通过一些设置过滤扩展，比如，最受欢迎的或推荐的。

有很多扩展供你选择。但是我们第一个要下载的扩展是 Live Server。有了它我们就有了一个能够加载静态网页的本地服务器。

例如，我们要预览 index.html 打开命令面板搜索 Live Server: 用 Live Server 打开，点击它，你会看到一个新的标签页在浏览器上。

在我们的 HTML 文件里新建一个元素，比如，<h1>VScode Introduction<h1/>，在我们保存页面后，网页会自动加载，我们就可以看到改变。活动页面在 index.html 时，可以直接点击状态栏的 Go Live 打开 Live Server。

总结

还有其他的很多的有用的扩展，不过我们会在另一篇文章和视频里说明它们。

现在，在这份介绍和安装指南的帮助下，我可以肯定你准备好开始你的 Web 开发之旅了。

文章到此结束。你可以关注我的社交媒体，查看我未来的更新。现在，请继续愉快地编写代码吧，我们在以后的文章中再见。

__________ 🐣 关于我 __________

• 我创建了 DevChallenges
• 订阅我的频道
• 关注我的 Twitter
• 加入 Discord

原文：How to Set Up VS Code for Web Development in A Few Simple Steps，作者：Thu Nghiem

简而言之，C ++ 是基于 C 的复杂、高效、通用的编程语言。

它是由 Bjarne Stroustrup 于 1979 年开发的。

C ++ 的主要功能之一是编译器。这用于编译和运行 C ++ 代码。

编译器是一种特殊程序，用于处理以特定编程语言（如 C ++）编写的语句，并将其转换为计算机处理器使用的机器语言或“代码”。

我之所以写这篇文章，是因为我有一个 C ++任务，需要使用编译器。像往常一样，每个人都在使用 CodeBlocks  IDE 和 Visual Studio IDE。但是我已经习惯了 Visual Studio Code 来编写所有编程内容。

然后，我开始寻找在我自己的 Vs Code 编辑器中直接编译 C ++的方法，也就有了本文:)。

在本文中，我将向你展示如何在 Vs Code 中设置编译器，并为你提供一些优秀 C ++ 资源的链接。

准备工作

• C++ 预备知识
  （我假设你正在学习 C ++，即将开始学习，或者只是为了好玩而阅读。本文不是 C ++ 101 教程——需要读者对 C ++ 已经有一些了解。）
• Visual Studio Code 编辑器
  点击此处下载和阅读配置文档：Windows，Linux，Mac
• 网络连接（!important）

免责声明！

在本文中，我将始终使用 Windows 操作系统，但是我将提供一些资源的链接，这些资源将对那些使用其他操作系统的人有所帮助。

现在开始吧！

下载和安装 C++ 编译器

• 访问 www.mingw.org，点击 “Download/Installer”，下载 MinGW 配置文件。Windows 电脑下载链接，Linux 电脑下载链接，下载链接。

MinGW 是 “Windows 的 Minimallist GNU” 的缩写，是 Microsoft Windows 的本地简易开发环境。

• 下载后，安装 MinGW，等待显示 “MinGW Installation Manager”。

• 当屏幕显示 “MinGW Installation Manager”时，点击 mingw32-gcc-g++，然后选择 “Mark for Installation”。

• 在左上角菜单中，点击 “Installation  > Apply Changes”。

• 等待完全安装好。在此过程中，请确保你具有稳定的 Internet 连接。

编辑 PATH 环境变量，包含一个存放 C ++ 编译器的目录

PATH 是类 Unix 操作系统、DOS、OS/2 和 Microsoft Windows上的环境变量，它指定可执行程序所在的目录集。通常，每个执行进程或用户会话都有其自己的 PATH 设置。——维基百科

安装好 MinGW 后，可以在 C：\ MinGW \ bin 中找到它。现在，你必须将此目录包括在环境变量 PATH 中。如果你已经使用计算机一段时间，那么你应该已经知道该怎么做了。但是如果你不了解，那么这里有一些资源：

• Windows OS 上的操作指南
• Linux 上的操作指南
• Mac OS 上的操作指南

在 VS Code 中安装 Code Runner 扩展

现在我们已经设置好编译器，来安装 Code Runner 吧。

使用 Code Runner，你可以运行多种语言的代码段或代码文件：

C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, 及自定义命令.

• 点击此处下载
• 或在 “Vs Code 市场”选项卡中搜索

• 下载之后重启 Vs Code
• 在 Vs Code 打开你的 C++ 文件。以下是一个最简单的代码示例：

#include <iostream>
using namespace std;
int main() 
{
    cout << "Hello world!";
    return 0;
}

将此文件保存为 test.cpp。

用 Code Runner 运行代码

• 使用快捷方式 Ctrl+Alt+N
• 或者按 F1 键，选择 /type Run Code
• 或者右击文本编辑器，在菜单中点击 Run Code

代码运行后，输出将显示在“输出”窗口中。使用 Ctrl + 快捷方式打开输出窗口。

停止运行代码

• 使用快捷方式 Ctrl+Alt+M
• 或者按 F1 键，选择 /type Stop Code Run
• 或者右击输出，在菜单中点击 Stop Code Run

好棒！你成功在 Vs Code 中设置了 C++ 环境！

总结

快速提示：默认情况下，Vs Code 的输出终端为只读。如果你正在运行需要用户输入的代码，例如：

#include <iostream>
using namespace std;

const double pi = 3.14159; 

void calculate()
{
  double area; 
  double radius;

  cout<<"Enter Radius: "<<endl; 
  cin>>radius;

  area = pi * radius * radius; 

  cout<<"area is: "<<area<<endl;
 }
 
int main()
{
  calculate(); 
  return 0;
}

你将不能在终端输入内容， Cannot edit in read-only terminal。
你需要启动 读-写，来解决这个问题。

• 在 Vs Code 中，点击 Go to File > Preference > Setting
• 在左边面板的用户选项卡，找到扩展部分
• 滚动找到 “Run Code Configuration”
• 滚动找到一个复选框 Run in Terminal（是否在集成终端中运行代码），选中它

或者

• 在 setting.json 文件中，添加：

"code-runner.runInTerminal": true

恭喜，你完成所有步骤了！

C++ 资源

你可以通过下列资源，开始学习 C++：

• https://www.learncpp.com/
• https://www.codecademy.com/learn/learn-c-plus-plus
• https://www.udemy.com/free-learn-c-tutorial-beginners/
• https://www.sololearn.com/Course/CPlusPlus/
• https://www.youtube.com/watch?v=vLnPwxZdW4Y
• https://www.tutorialspoint.com/cplusplus/cpp_useful_resources.htm
• https://makeawebsitehub.com/learning-c/

Credits

• MinGW Project
• Code Runner by Jun Han

感谢阅读！

原文：How to compile your C++ code in Visual Studio Code，作者：Bolaji Ayodeji

现在大多数代码编辑器支持代码片段这一开箱即用的功能。本文中我将使用如今最流行的代码编辑器 Visual Studio Code（VS Code）来演示代码片段。

另外，有一些“文本扩展器”应用可以让你在所有应用中使用代码片段的功能。我会简要的介绍这一类应用是怎样给你带来更多的便利的。

接下来，让我们深入了解与代码片段相关的所有细节。

定义

一个代码片段就是一个可被插入文档的模板，通过命令或一些触发文本插入代码片段。

借助代码片段，你可以创建一个样板文件，并插入常用的文本块。这样做的好处就是，你能够免于一次次重复的输入相同的内容。

为什么你需要使用代码片段?

希望下面这个事实不会给你带来困扰：互联网上有很多相互矛盾的观点！对于要不要使用代码片段，同样存在着完全相反的观点。但我认为那并不重要。

公平起见，我把两边的观点都展示在下方：

你不必选择阵营，要么支持要么反对代码片段。我建议你在最适合你的程度上采纳它们。

支持方

• 代码片段可以提高生产效率，减少输入错误，减少按键次数。
• 代码片段让我们有了更多的空余时间去思考和设计自己关心的代码。
• 代码片段可以帮助你记住重要的内容。
• 把代码片段集成到现有工作流中，会明显减少使用鼠标的次数。成熟的代码片段拥有完整的逻辑链路，且使用 tab 键在逻辑点之间跳转，根据提示补充完所有需要的信息。或者随时中止，自己完成剩余信息的输入。不管哪种方式，一旦你完成，就意味着你准备好输入下一行的内容了。

反对方

• 我避免用代码片段，因为我不喜欢依赖任何现成的工具。
• 我从不使用代码片段，因为我宁愿将时间花在怎样避免重复上，而不是让重复变得更简单。
• 有些时候，离开了代码片段的帮助，我甚至不记得代码应该怎么写了。对于那些我已经熟透的内容，使用代码片段是OK的，但我不想在那些我还不熟悉的内容上使用代码片段。
• 网上的代码片段都有这样或那样的错误。我一直无法找到不存在浮点数错误的数值算法。我想，在网上是找不到不存在错误的代码片段的。

什么时候你需要使用代码片段?

唐纳德·克努斯（Donald Knuth）是计算机科学界的佼佼者之一，他说过：“过早的优化（代码）是万恶之源”。

我认为这句话对于代码片段也适用。代码片段是编写代码的优化。如果你不了解某种语言或者框架，就为它编写大量代码片段，那是相当不明智的。

不过当你觉得代码片段能带来效率和便捷的时候，那就是时候使用它了。

使用代码片段的目的

就我而言，我经常使用代码片段，而且是有选择的使用。我在我经常使用的 Markdown 和其它语言上，使用了大量的代码片段。

而对于框架，我并没有使用很多代码片段。最近才开始在 Vue 上少量使用，大部分还是样板代码。不过随着我对 Vue 的掌握度的提升，我可能会使用更多的代码片段。

另外，在算法相关的代码上，我完全没有使用代码片段。

代码片段的类型

可以根据代码片段和编辑器之间的互动范围进行分类。

静态代码片段

即通过单个命令进行的简单的文本复制和粘贴。

动态代码片段

可以定制一个逻辑链路，来帮助用户完成代码片段所需信息的填写。

它包括:

• Tab Stops：可以按顺序编号的 tab 键跳转的位置（tab stop）。
• Mirrored Tab Stops：有时，你需要在文本的多个位置中插入相同的值。你可以使用相同的序号标记 tab stop, 编辑一处都会立即反映其它相同序号的 tab stop 中。
• Placeholders：有默认值的 tab stop 位置，当获得焦点时你可以重写它。
• Choices：有下拉列表的 tab stop 位置，你可以通过下拉列表选择它的值。
• Variables：来自环境变量中的值，比如选中的文字、系统日期或者剪贴板中的内容。

下图是一个例子，在 markdown 中使用代码片段。它使用了 tab stops, placeholders, and choices 。

宏代码片段

顶级巫术拥有转变输入的能力，转变意味着你可以改变一个变量的值在插入它之前，或者在你编辑之后改变占位符的值。

例如，你可能想在输入类名过后，把它大写。

你可能首先想到使用正则，那是可行的。此外，某些编辑器还提供了更高级的脚本能力。

VS Code 中的代码片段

在 VS Code 中，代码片段是 智能 出现的（Ctrl+Space 会显示一个建议列表），通常还和其它建议混在一起。

你可以通过命令 'Insert Snippet' command 来浏览所有可用的代码片段并选择一个。它列出了当前文件语言的所有用户添加的，插件提供的，以及预设的代码片段。

Emmet 已集成到VS Code中，并且具有自己的CSS选择器启发式语法，可用于插入HTML和CSS代码段。

用户相关设置

如果你在设置里将当前使用的语言的 editor.quickSuggestions 设置为 true ，代码片段将以快速建议的形式出现。该设置针对大多数语言都默认开启，除了 markdown。

代码片段支持 tab-completion 。你可以输入一个代码片段的前缀（触发字符），再按下 Tab 就能输入完整的代码片段了。你可以在设置里设置 editor.tabCompletion 的值来打开该功能。

可选值:

• on: 打开tab-completion 功能。
• off: 关闭 tab-completion 功能，这是_默认值_。
• onlySnippets: 只对代码片段打开 tab-completion。

"editor.tabCompletion": "onlySnippets",

如果你想控制代码片段的建议是如何显示的，你可以改变设置中 editor.snippetSuggestions 的值。

可选值:

• top: 展示代码片段建议在其它建议之上，也是我正在使用的方式。
• bottom: 展示代码片段建议在其它建议之下。
• inline: 和其他建议一起显示，这是 默认值 。
• none: 不显示代码片段的建议。

"editor.snippetSuggestions": "top",

以上是代码片段相关的重要设置，但还有其他一些设置。您可以查看此默认设置列表 浏览更多，或在“设置”界面中浏览。

有预设的代码片段么?

有！

但是，他们没有出现在 VS Code 的文档中。而且在 VS Code 中也没有一个专门的地方介绍它们。所以，你可能对内置的代码片段了解的并不多。

那么，怎么才能找出当前语言的所有内置的代码片段呢？

长话短说，我对上面的情况不满，所以我写了一个 VS Code 插件 Snippets Ranger，提供了一个漂亮的UI界面来展示所有的内置代码片段。Think of it as a Marauder's Map for snippets!

但是我就想自己找到这些代码片段呢?

你当然可以，不过要多花费一些精力。

上面提到过， 'Insert Snippet' command 会显示你当前语言的所有代码片段。

不过请记住，那是一个合集，包括用户的，插件的，内置的。如果你想搞清楚某种语言是否有内置的代码片段，你需要打开一个该语言的文件，然后输入这个命令来查看。

如果你安装了相关语言的代码片段插件，可能很难分清楚谁是内置的，谁是插件提供的，所以你可以暂时关闭插件，剩下的就是内置的了。

如果你想自己查看代码片段的源文件，Windows 下路径是 ：«app root»\resources\app\extensions\«language»\snippets\«language».code-snippets。Mac 和 Linux 下路径相似。

代码片段插件

Visual Studio 市场 有专门的 snippets category 分类，你可以在这查找你所需要的。

此外还有许多程序语言包扩展，自带了代码片段（Python, C#, Go, Java, and C/C++ ...）。

自己如何写代码片段?

代码片段文件是 JSON 格式的。 如果你想，你还可以添加C语言风格的注释（技术上讲，它是微软的"JSONC"格式）。

你可以创建不同作用域的代码片段：全局的，工作区的，以及针对特定语言类型的。

执行 'Preferences: Configure User Snippets' command 来创建代码片段的文件，它会打开一个下图这样的对话框。选择任意一个都会打开一个新文件进行编辑。

如果你更喜欢使用GUI界面来编写代码片段，你可以尝试以下 snippet generator web app。

我们看一个例子来熟悉下语法。

例子

这是一个 VS Code 中 markdown 代码片段。

{
    "Insert heading level 1": {
       "prefix": "heading1",
       "body": ["# ${1:${TM_SELECTED_TEXT}}$0"],
       "description" : "Insert heading level 1"
    }
}

这个代码片段插入一个一级标题，内容是当前选中的文字（如果有选中的话）。

一个代码片段拥有下列属性：

1. "Insert heading level 1" 是代码片段的名字。如果没有 description，它就会出现在智能建议的列表里。
2. prefix属性定义了代码片段的触发文本。它可以是一个字符串或者一个字符串数组（如果你想有多个触发文本）。前缀的子字符串同样可以触发，在我们的例子里，输入"h1"一样能匹配到我们的代码片段。
3. body属性代表了要插入编辑器的内容。它是一个字符串数组，可能一行或者多行。在插入之前会被合并成一段。
4. description属性提供了代码片段的更多描述。它是可选的。
5. scope属性允许你指定特定的语言类型，你可以使用逗号来分割多种语言。它也是可选的。当然，对于特定于语言的代码片段文件来说是多余的。

该代码片段的内容具有2个 tab stop ，并使用了$ {TM_SELECTED_TEXT}变量。

接下来，让我们详细了解下语法相关的细节。

代码片段语法

VS Code 的代码片段语法和 TextMate snippet syntax 是相同的。然而，它不支持'interpolated shell code'和 \u 转换。

代码片段的body属性支持以下特性：

1. 制表符

Tab stops由 $ 和 序号 组成，就像 $1。$1代表了第一个位置，$2代表了第二个位置，以此类推。$0代表退出代码片段，以及最后光标停留的位置，

举个例子，我们希望写一个 div 的代码片段。它的第一个 tab stop 在标签内，同时希望用户按下 tab 的时候能退出代码片段，并让光标停留在标签外。

看起来就像下面这样:

{
    "Insert div": {
        prefix: "div",
        body: ["<div>","$1","</div>", "$0"]
    }
}

2. 镜像制表位

有时候你想在插入的内容中的几个地方输入相同的值。这种时候你可以使用相同序号的 tab stops 来标识这几个地方，当你编辑其中一个的时候，就会自动同步输入的值到其它地方。

一个典型的例子就是 for 循环中的 index 变量会被多次使用，下面是一个JavaScript中的 for 循环代码片段。

{
    "For Loop": {
        "prefix": "for",
        "body": [
            "for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
            "\tconst ${3:element} = ${2:array}[${1:index}];",
            "\t$0",
            "}"
        ]
    }
}

3. 占位符

占位符是有默认值的 tab stops。他们一般被大括号包裹着，就像 ${1:default} 。占位符的内容是默认被选中的，所以你可以很容易的修改它。占位符支持嵌套，像这样 ${1:first ${2:second}}。

4. 选择

Choices 代表着这个 tab stop 会默认有一个列表展示给用户选择。Choices 的可选值的写法是用逗号分割的字符串，并且由两个竖线（|）包裹。就像 ${1|yes,no|} 。

下面是前面显示的用于插入任务列表的markdown示例的代码。choices “x”或者空格。

{
  "Insert task list": {
    "prefix": "task",
    "body": ["- [${1| ,x|}] ${2:text}", "${0}"]
}

5. 变量

VScode许多变量供你使用。你可以简单的在变量名前加上 $ ,就可以使用他们了。 像这样 $TM_SELECTED_TEXT。

比如，下面这个代码片段，会为任意语言创建一个带有今天日期的注释块。

{
    "Insert block comment with date": {
        prefix: "date comment",
        body: ["${BLOCK_COMMENT_START}",
               "${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}",
               "${BLOCK_COMMENT_END}"]
    }
}

如果你想，你可以为变量指定一个默认值，像这样 ${TM_SELECTED_TEXT:default} 。如果该变量没有被赋值，默认值或者空字符串就会被插入。

如果你不小心写错了变量名，写错的变量名会被当成 placeholder 使用。

下面是一些属于工作区的变量:

• TM_SELECTED_TEXT: 当前选中的文字或者空字符串,
• TM_CURRENT_LINE: 当前行的文字,
• TM_CURRENT_WORD: 光标下的单词或者空字符串,
• TM_LINE_INDEX: 以0为第一行的当前行序号,
• TM_LINE_NUMBER: 以1为第一行的当前行序号,
• TM_FILENAME: 当前文档的文件名,
• TM_FILENAME_BASE: 当前文档的文件名，不带扩展名,
• TM_DIRECTORY: 当前文档所在的文件夹,
• TM_FILEPATH: 当前文件的绝对路径,
• CLIPBOARD: 当前剪贴板的内容,
• WORKSPACE_NAME: 当前打开的工作区或者文件夹的名字.

下面是一些与时间相关的变量:

• CURRENT_YEAR: 当前年份,
• CURRENT_YEAR_SHORT: 当前年份的缩写，即最后两位数字,
• CURRENT_MONTH: 当前月份，两位数字表示(例如 '07'),
• CURRENT_MONTH_NAME: 当前月份名字(例如 'July'),
• CURRENT_MONTH_NAME_SHORT: 当前月份名字缩写(例如 'Jul'),
• CURRENT_DATE: 当前月份中的日期,
• CURRENT_DAY_NAME: 当前日期的名字 (例如 'Monday'),
• CURRENT_DAY_NAME_SHORT: 当前日期的名字缩写 (例如 'Mon'),
• CURRENT_HOUR: 当前的时间（小时）以24小时制展示,
• CURRENT_MINUTE: 当前分钟数,
• CURRENT_SECOND: 当前秒数,
• CURRENT_SECONDS_UNIX: 从UNIX起的秒数（时间戳）.

下面是一些关于注释的变量，在不同的语言下会出现不同的注释字符串:

• BLOCK_COMMENT_START: 例如, <!-- 在HTML中,
• BLOCK_COMMENT_END: 例如 , --> 在HTML中,
• LINE_COMMENT: 例如, // 在JavaScript中.

6. 变换

转换一般运用于variable 或者 placeholder 。如果你熟悉正则表达式（regex），你会发现这很相似。

转换的格式像下面这样：${«variable or placeholder»/«regex»/«replacement string»/«flags»}。他很像JavaScript中的 String.protoype.replace() 。其中参数的作用如下:

• «regex»: 这是一个与变量或占位符的值匹配的正则表达式。支持JavaScript regex语法。
• «replacement string»: 这是用来替换匹配到的内容的字符串。它可以引用«regex»中的捕获组，执行大小写的格式化（使用特殊的标记函数：/upcase, /downcase, 和 /capitalize），以及执行条件插入。查看 TextMate Replacement String Syntax 了解更多信息。
• «flags»: Flags是传递给正则表达式使用的。可以使用 JavaScript regex flags 中的标志:
  • g：全局搜索
  • i：大小写敏感
  • m：多行搜索
  • s：允许 . 匹配新行的字符

使用 $n 引用捕获组，其中 n 代表第几个捕获组。使用 $0 代表整个匹配内容。

因为它的语法和 tab stops 的语法相同，所以可能会造成混淆。不过你只需要记住，如果它是被包括在正斜杠（/）之中的，它就是指向捕获组的。

为了彻底搞清楚这个语法，我们需要多看一些例子。

如你所见，上方第二个例子，正则中的元字符必须被转义，就像例子中匹配一个单词你必须插入 \\w。

占位符变换

Placeholder transforms 并不能使用默认值或者选项值! 或许称它为 tab stop transformations 更为合适。

下面的例子会把第一个 tab stop 输入的内容大写。

{
  "Uppercase first tab stop": {
    "prefix": "up",
    "body": ["${1/.*/${0:/upcase}/}", "$0"]
  }
}

你甚至可以写一个 placeholder，然而却在镜像的 tab stop 上运用转换。转换是并不会在原始的 placeholder 上执行的。？

你会选择使用这个特性嘛？我最开始对这个特性感到困惑，所以我觉得你们也可能会。

{
  "Uppercase second tab stop instance only": {
    "prefix": "up",
    "body": ["${1:title}", "${1/(.*)/${1:/upcase}/}", "$0"]
  }
}

如何为代码片段绑定快捷键？

通过向 keybindings.json 加入你的快捷键。你可以通过这个命令 'Preferences: Open Keyboard Shortcuts File (JSON)' 打开这个文件。

比如，为 markdown的 代码片段 "Insert heading level 1" 绑定一个快捷键：

{
    "key": "ctrl+m ctrl+1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus && editorLangId == markdown",
    "args": {
        "langId": "markdown",
        "name": "Insert heading level 1"
    }
}

你可以定义你的快捷键组合，指定命令的ID，以及可选的 when clause context 来指定什么时候这个快捷键是可用的。

通过 args 对象，你可以通过 langId 和 name 指定目标代码片段。其中 langId 参数是目标代码片段所属的语言ID language ID ，参数 name 是你编辑代码片段时指定的名字。

如果你想，你可以使用 snippet 属性指定行内的代码片段。

[
  {
    "key": "ctrl+k 1",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "${BLOCK_COMMENT_START}${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1} ${BLOCK_COMMENT_END}"
    }
  }
]

你也可以使用 Keyboard Shortcuts UI 来编辑快捷键，但是它不具备添加新的快捷键的能力。

使用UI的另一个缺点是，他不会显示 args 对象，这会让你查找或者编辑自定义快捷键时更加费劲。？

风格问题

我发现最初与摘要存在争议的是人们倾向于创建带有缩写前缀的摘要。我是否需要学习一大堆乱七八糟的缩写词才能使用其他人的摘要？

缩写前缀是什么意思？下表列出了 [JavaScript（ES6）snippets] 13 VS Code 扩展中的一些代码段。其中 Trigger 列中的就是前缀缩写，例如 fre 代表 "for each" 循环。

这在两个方面都是不必要的。

第一点，VS Code 提供的快速建议功能包含了 模糊字符串搜索 功能。如果你输入 "fe" 且代码片段的前缀是 "foreach"，这就能够被快速建议匹配到。

你可以从下图看到，"foreach" 是第二个匹配项。

第一个匹配项是 fre , 来自某个扩展。你觉得哪一个更具描述性？？

如果你使用 "Insert Snippet" 命令来插入代码片段，并不会有太大的区别。因为描述字段对这个缺点做了补充，你可以通过描述文字来了解代码片段的能力。我自己不使用这种方式使用代码片段，所以我更喜欢一个更具描述性的前缀。

第二点， fre 与内置的代码片段 foreach 重复 了。

一些人可能把快速建议的功能关闭了，只使用tab键来触发代码片段。这种情况下你需要在没有提示的情况下输入前缀。一些人可能更喜欢使用缩写前缀来减少按键的次数。

然而这种方式，同样使用了模糊搜索，所以你按下 tab 键的时候，代表你选择了第一个匹配项。

观察上面这个例子，你可以看见输入 "fr" 时， 按下 tab 键插入了 fre 代码片段。输入 "fore" 时，插入了 foreach 代码片段。

所以你并不需要输入完整的前缀！？一种情况可能是例外，就是你为一种语言设置了大量名称相似的代码片段，但我觉得那是不切实际的。

更实际的做法是，选择合适的前缀，在按下tab键之前，完整的把它们打出来。

根据你使用代码片段的偏好，可能存在一些取舍。

就我而言，我更喜欢使用快速建议功能，因为它有视觉反馈。我通常把代码片段的建议设置在列表最上面，这样我就能看着列表输入缩写前缀，而不是去记住他们。

可能一些代码片段的作者有严格的模式去克服这个问题，但我并不能很容易的去接受它。

如果你针对某种语言使用了大量的代码片段，你可能会选择那些风格相似的代码片段使用。

如果你在同种语言的不同框架或者库中使用代码片段，它们的代码片段可能会出现交叉，重叠的情况。我不需要处理这种情况，但你最终可能需要处理这些。

全局的代码片段

在代码编辑器之外，你也能享受代码片段带来的好处。让每个应用提供代码片段的能力，带来了更多可能。

常用的场景如下：

• 邮件的固定回复头信息,
• 自动纠正常见的错误单词,
• 在文档中添加联系信息或者签名,
• 插入日期,
• 格式化选中的文字或者粘贴文字,
• 为你的搜索引擎或者应用加入常见的搜索词组,
• 在邮件客户端中使用HTML的代码片段,
• 向文档添加不同的模板.

大多数针对代码片段的应用都称自己为 “文本扩展器” ，但是还是有很多用于任务管理或者生产力的应用同样包含了代码片段的功能。

全局代码片段相比代码编辑器的代码片段，有更多的限制 ，你不能使用 tab stops 和 plaecholders。大多数应用能使用的是一些动态变量，比如有关日期的变量。

应用预览

Autohotkey（Windows）

AutoHotkey 是一个 Windows下的免费，开源的脚本语言 ，用于执行所有类型任务.

它拥有自己专属语法。你可以在 VS Code 中安装 AutoHotKey extension ，来获得更好的编辑体验。

你可以使用如下形式：::<<prefix>>::<<text to insert>> ，来定义触发代码片段插入的前缀。下面的脚本会插入 Rob's email 地址，当你输入了 "robmail" 后，并按下 space 或者 tab 或者 enter。

::robmail::rob@someservername.com

下面这个片段会插入 "This is the snippet text" 这段内容，当你按下 Ctrl+D。

^d::  Send This is the snippet text

你可以阅读文档 docs 了解更多。

PhraseExpress (Windows, Mac, iOS)

PhraseExpress 是一个文本扩展器应用，它管理常用文本模板，并可以插入任何程序。

这是一个 基于GUI的免费增值应用。它比 AutoHotKey 的受众更广泛。

他十分简洁和易于使用。你可以设置它为启动时运行，他就会在后台被激活。

你可以用文件夹组织和管理你的代码片段，也可以用云服务进行保存或者同步。

Espanso (Windows, Mac, Linux)

这是一个 用Rust写的开源，跨平台的文本扩展器应用。

它采用了 基于文件配置的方法，配置文件采用了 YAML 语法。

默认配置文件 default.yml ，包括了主要的配置。 下面的配置会输入 Rob's email ，当你输入"robmail"时。

matches:
 - trigger: ":robmail"
   replace: "rob@someservername.com"

你可以 指定初始的光标位置，然而你并不能定义 tab stops。

你可以 添加扩展 来增强 Espanso 的能力。有大量扩展提供了其它能力，包括日期，生成随机文本以及插入剪贴板数据。

这就是所有了！我希望你今天能有所收获，而且可以使用代码片段让你变得更具生产力。

原文：Visual Studio Code Snippets – the Definitive VS Code Snippet Guide for Beginners，作者：Rob O'Leary