VS2022-实用指南-全-
VS2022 实用指南（全）
原文：
zh.annas-archive.org/md5/eff303cbe9e74501499ad7c8031d0bf6译者：飞龙
前言
Visual Studio 2022 是一个完整且理想的集成开发环境（IDE），用于创建大型、复杂和可扩展的应用程序。它是开发中最完整、最全面的工具之一，尤其是在使用 Microsoft 技术时。
这本书将教会您如何利用这个 IDE 中的工具来更快地编写干净的代码。您将从学习如何设置和启动 Visual Studio 2022 以及使用该 IDE 提供的所有工具开始。然后，您将学习关键组合、技巧和额外的实用工具，这些可以帮助您更快地编码并不断审查您的代码。您将了解如何使用 Visual Studio 编译、调试和检查您的项目，以分析其当前行为。您将看到如何插入可重用的代码块，编写简单的语句。您将了解一些视觉辅助工具和人工智能，这些将帮助您提高生产力和理解项目中的情况。
在本书结束时，您将能够使用 Visual Studio 2022 设置您的开发环境，个性化工具和布局，并使用快捷键和扩展来提高您的生产力。
本书面向的对象
这本书是为专注于 Web 开发和想要了解 Visual Studio 2022 中新功能、工具和特性的.NET 软件开发人员以及 Web 开发者所写的。假设您对 HTML、CSS、JavaScript 或 React 和 Angular 等框架有基本了解。
本书涵盖的内容
第一章, 开始使用 Visual Studio 2022，回顾了如何安装 Visual Studio、版本和需求。
第二章, 配置 IDE，讨论了如何根据您的需求和偏好配置 Visual Studio。
第三章, Visual Studio 2022 的改进，回顾了 Visual Studio 2022 中包含的新功能和改进。
第四章, 创建项目和模板，解释了 Visual Studio 中包含的模板以及如何创建您的第一个项目。
第五章, 调试和编译您的项目，讨论了如何使用 Visual Studio 构建应用程序和调试您的项目。
第六章, 添加代码片段，解释了如何在 Visual Studio 中使用代码片段并创建自己的代码片段。
第七章, 使用 AI 和代码视图高效编码，回顾了 Visual Studio 中包含的 AI 工具和不同的代码视图。
第八章, Web 工具和热重载，解释了 Visual Studio 中包含的 Web 工具以及热重载的工作原理。
第九章，样式和清理工具，讨论了 Visual Studio 为后端和前端开发者提供的代码清理选项。
第十章，发布项目，探讨了从 Visual Studio 发布项目的不同方式。
第十一章，实现 Git 集成，回顾了 Visual Studio 与 GitHub 托管项目协同工作的功能。
第十二章，使用 Live Share 共享代码，讨论了 Live Share 是什么以及如何使用它进行实时编码会话中的团队合作。
第十三章，在 Visual Studio 中使用扩展，解释了 Visual Studio 中的扩展是什么以及将它们添加到 IDE 的不同方法。
第十四章，使用流行扩展，讨论了 Visual Studio 中最受欢迎的扩展以及为什么。
第十五章，学习键盘快捷键，解释了如何使用键盘在 Visual Studio 中执行快速操作以优化重复性任务。
为了充分利用这本书
您需要一台安装了 Windows 10 或更高版本的笔记本电脑或台式计算机。要安装 Visual Studio 并完成第十章至第十四章的练习，您需要一个互联网连接。
要获得 Visual Studio Community 许可证，您必须有一个 Microsoft 账户，该账户属于 Hotmail 域或 Outlook 域。
要生成 第八章 中的代码映射，需要 Visual Studio Enterprise 版本，该版本包含 Web 工具和热重载功能。
要执行 第十一章 中建议的测试，需要一个 GitHub 账户，以实现 Git 集成。
如果您正在使用本书的数字版，我们建议您亲自输入代码或从本书的 GitHub 仓库（下一节中提供链接）获取代码。这样做将帮助您避免与代码复制和粘贴相关的任何潜在错误。
为了完成并理解本书中的所有活动，了解软件开发和 Web 开发（HTML、JavaScript 和 CSS）的知识是非常重要的。
下载示例代码文件
您可以从 GitHub 在github.com/PacktPublishing/Hands-On-Visual-Studio-2022上下载本书的示例代码文件。如果代码有更新，它将在 GitHub 仓库中更新。
我们还有来自我们丰富的图书和视频目录的其他代码包，可在github.com/PacktPublishing/找到。查看它们吧！
下载彩色图像
我们还提供了一份包含本书中使用的截图和图表彩色图像的 PDF 文件。您可以从这里下载：packt.link/VHA6o。
使用的约定
本书中使用了多种文本约定。
文本中的代码：表示文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称。以下是一个示例：“模板有一个带有WeatherForecastController.cs文件的演示。”
代码块设置如下：
CommonMethod("Before invocation of NewMethod()");
NewMethod();
CommonMethod("After invocation of NewMethod()");
当我们希望您注意代码块中的特定部分时，相关的行或项目将以粗体显示：
public float Calculate1()
{
var minValue = 25;
return Calculate(minValue);
}
粗体：表示新术语、重要单词或屏幕上看到的单词。例如，菜单或对话框中的单词以粗体显示。以下是一个示例：“如果您同意安装的详细信息和大小，您可以通过单击安装按钮开始此过程。”
小贴士或重要提示
看起来是这样的。
联系我们
我们欢迎读者的反馈。
customercare@packtpub.com 并在邮件主题中提及书籍标题。
勘误表：尽管我们已经尽最大努力确保内容的准确性，但错误仍然可能发生。如果您在这本书中发现了错误，我们将非常感激您能向我们报告。请访问 www.packtpub.com/support/errata 并填写表格。
copyright@packt.com 并附有材料链接。
如果您有兴趣成为作者：如果您在某个领域有专业知识，并且您有兴趣撰写或为书籍做出贡献，请访问 authors.packtpub.com。
第一部分：Visual Studio 概述
在本部分，您将学习如何从头开始安装和使用 Visual Studio，以及如何使用该 IDE 提供的一般工具。
本部分包含以下章节：
-
第一章, Visual Studio 2022 入门
-
第二章, 配置 IDE
-
第三章, Visual Studio 2022 的改进
-
第四章, 创建项目和模板
-
第五章, 调试和编译您的项目
第一章：Visual Studio 2022 入门
Visual Studio（VS）是 .NET 开发者最受欢迎的 集成开发环境（IDE）。它是设计、开发、调试和部署所有 .NET 应用程序以及其他技术的完美工具。
在本章中，你将了解 VS 的历史、历史版本和安装过程，以及开始使用此 IDE 时的初始配置。在了解 VS 版本后，你将能够选择最适合你需求的选项。
到本章结束时，你将简要了解 VS 的历史，并理解其不同版本之间的主要演变变化。你还将学习如何安装并开始使用这个令人惊叹的工具。
在本章中，你将学习以下主要内容：
-
VS 的简要历史
-
VS 版本
-
安装 VS 2022
-
VS for Mac
技术要求
我们将本章从学习如何安装 VS 2022 开始。要让 VS 在你的机器上运行，你需要以下要求：
-
Windows 10，版本 1909 或更高
-
Windows Server，版本 1016 或更高
-
1.8 GHz 或更快的 64 位处理器；建议使用四核或更好的处理器
-
4 GB 的 RAM；建议使用 8 GB
-
硬盘可用空间 – 25 GB（根据安装的组件，最高可达 40 GB）
-
管理员权限
-
安装过程中需要全网络访问
重要提示
不支持 32 位和 ARM 操作系统；你需要 Windows 10 Enterprise LTSC 版本、Windows 10 S 或 Windows 10 Team Edition。要检查所有要求以及不受支持的系统和技术，请访问
docs.microsoft.com/en-us/visualstudio/releases/2022/system-requirements。
VS 的简要历史
VS 2022 是由微软创建的应用程序的版本 13。VS 因其友好的用户体验、良好的定期更新支持以及编写干净和可扩展代码的强大工具而受到开发者的青睐。VS 支持许多技术和平台。对于许多开发者来说，VS 是所有项目类型的终极工具。
要了解这个工具的演变，我们必须考察其历史和时间线。
VS 6.0 于 1997 年发布，这是该工具的第一个版本。这个版本是为了与 Visual Basic 6.0 一起使用而创建的。然后，在 2002 年，发布了新版本，其中包括对 .NET 和 C#（当时的新编程语言）的兼容性。从那时起，它一直是 .NET 开发者的首选工具。
VS 最初是一个付费应用程序，具有封闭的许可证，但自 VS 2005 以来，微软开始了一个新的策略，即免费/付费模式，这是一个基本的/免费公共版本，你可以用于个人项目、学习或中型应用程序，而专业开发者、大型公司或希望使用高级工具的人则需要付费版本。
微软每 2 或 3 年发布一个新的 VS 版本，并为该版本每 2 或 3 个月提供更新，这意味着完全支持。
一个值得注意的版本是 VS 2012，因为开发团队实现了新的外观和感觉以及许多用户体验的改进，这些改进也体现在 2022 年的版本中。VS 2012 相比之前版本的一些最重要的改进包括性能、可以选择浅色和深色主题以及新的图标。
既然您对 VS 有了一个大致的了解，让我们来检查今天可用的每个口味。
VS 口味
自 2012 年版本以来，VS 有三种口味，涵盖了所有开发者的偏好和需求。这三个选择中有一个是完全免费提供给社区的。
在接下来的章节中，您将看到每个版本之间的差异，并了解每个版本支持的功能，如下所示：
-
Visual Studio Community
-
Visual Studio Professional
-
Visual Studio Enterprise
因此，让我们了解每个版本的主要方面。
Visual Studio Community
Visual Studio Community 是一个免费版本，它包含了创建、构建、调试和部署 .NET 应用程序以及集成到 VS 中的所有基本工具。
Visual Studio Community 有五个用户的限制，并限制在非企业组织中。
Visual Studio Community 的主要工具有以下几项：
-
基本调试工具（在调试过程中检查代码的工具）
-
性能和诊断中心（分析应用程序性能和内存使用的工具）
-
重构工具（用于根据最佳实践清理和格式化代码的工具）
-
单元测试（一个用于导航、运行和收集单元测试结果的特性）
-
快速查看定义（一个导航到方法或函数定义的功能）
-
VS Live Share（一个实时协作开发工具）
这个版本适合学生、独立开发者、自由职业者和小型公司。尽管这个版本包括了您日常使用的主要工具，但在与单元测试、内存或检查相关的某些场景中，这些工具可能不够用。
Visual Studio Professional
Visual Studio Professional 是通过订阅提供的 VS 许可版本；这个版本推荐用于企业应用程序和拥有五个以上开发者的团队。VS Professional 包含与 Visual Studio Community 相同的工具，但有一些补充，例如 CodeLens（一个 VS 功能，用于在代码中查找引用、更改和单元测试）。
在撰写本文时，VS 专业订阅的个人用户费用为每月 45 美元。
专业订阅包括 50 美元的 Azure 信用额度、培训、支持和 Azure DevOps（基本计划）。
Visual Studio Enterprise
Visual Studio Enterprise 是 VS（包括 Visual Studio Professional）的最高级订阅版本，它包含了 VS Community 的所有功能、Visual Professional 的改进以及一些额外的工具。
一些值得注意的功能如下：
-
实时单元测试（一个在每次更改时重新运行单元测试的功能）
-
快照调试器（一个在调试过程中发生错误时保存快照的工具）
-
移动应用程序的性能分析工具
-
架构层图（用于可视化应用程序的逻辑架构）
企业订阅每月费用为 250 美元，但包括 150 美元的 Azure 信用额度、Power BI Pro、带有测试计划的 Azure DevOps 以及 VS 所有的功能。
要查看不同版本和价格的比较，你可以访问 visualstudio.microsoft.com/vs/pricing/。
重要提示
对于这本书，我们将使用 Visual Studio Community。由于这是一个免费版本，你不需要支付任何订阅费用，并且所有主题都包含在这个版本中。
安装 VS 2022
随着每个新版本的发布，VS 的安装过程得到了改进。今天，甚至可以使用相同的安装程序进行升级或工作负载修改，以创建不同类型的项目。
在本节中，你将学习以下内容：
-
从 VS 网站获取安装程序
-
安装 VS
让我们详细看看如何执行安装过程。
从网站获取安装程序
VS 安装简单，你不需要账户或进行很多步骤来获取安装程序。在任何浏览器中输入 Visual Studio community Download，你就可以轻松找到从官方网站下载 VS 的链接。
从以下链接，你可以直接获取安装程序：
visualstudio.microsoft.com/downloads/
在网页上，转到 Visual Studio 部分，点击标记为 下载 Visual Studio 的下拉控件，并选择 Community 选项（见图 图 1.1）：
图 1.1 – 下载 VS
安装过程
一旦你下载了 VS 安装程序，你必须运行它以启动安装程序的更新过程，如图 图 1.2 所示：
图 1.2 – 更新 VS 安装程序
VS 是一个由开发团队不断更新的 IDE，因此安装程序将始终寻找最新的可用更新以执行相应的安装。
当安装程序更新完成后，安装程序的初始屏幕将显示，它由四个主要部分组成，其中默认显示的是 工作负载 部分。
图 1.3 – VS 工作负载选项卡
可以找到不同类型项目的负载 – 例如，移动项目、桌面项目、Python 项目等。
要安装与 Web 开发相关的模板和工具，您必须选择名为 ASP.NET 和 Web 开发 的负载，如图 1.3 所示。
每个工作负载都包含与所选技术相关的一组工具和组件。
然而，您也可以在名为 单独组件 的选项卡中单独选择这些组件，如图 1.4 所示：
图 1.4 – VS 单独组件选项卡
这些组件被分组到不同的类别中，如 .NET、云、数据库和服务器等，您只需选择一个组件即可将其添加到安装中。
在名为 语言包 的选项卡中，您将能够选择 VS 界面的语言或语言，如图 1.5 所示：
图 1.5 – VS 语言包选项卡
这非常有用，因为默认语言通常与 VS 安装程序下载的语言相对应。从这里，您将能够取消选择默认语言并选择不同的语言或多种语言，以便在开发过程中进行切换。
在最后一个名为 安装位置 的选项卡中，您可以配置 VS IDE 和下载缓存的系统路径，如图 1.6 所示：
图 1.6 – VS 安装位置选项卡
在此选项卡中，您将能够看到在每个路径中执行正确安装所需的空间量。
最后，有一个选项列表，可以选择安装方法 – 您是想一次性下载所有组件并安装，还是想先下载所有必要的组件，然后再安装（如图 1.7 所示）：
图 1.7 – VS 安装按钮
如果您同意安装的详细信息和大小，您可以通过点击 安装 按钮开始安装过程。
一旦您点击了开始安装的按钮，将出现一个窗口，显示组件的下载和安装详情，如图 1.8 所示：
图 1.8 – VS 安装过程
安装过程完成后，将出现一个窗口，建议您使用 Microsoft 账户登录以获取工具的使用许可。建议您在此处登录，以免将来失去对工具的访问权限，如图 1.9 所示：
图 1.9 – VS 登录窗口
在您获得 VS 2022 的使用许可后，您将看到创建、克隆和打开项目的启动屏幕，因此您可以检查安装是否成功，如图图 1.10所示：
图 1.10 – VS 启动窗口
重要提示
您可以在同一台机器上拥有不同的 VS 版本；为了与所有技术兼容，有时我们需要保留旧版本 – 例如，VS 2010 与 Silverlight（一个用于使用 C#和 XAML 创建 Web 应用程序的已弃用框架，它通过浏览器中的插件执行）一起使用。
安装 VS 并获得第一个屏幕后，您可以使用继续无代码选项打开 VS。
现在，您将看到 VS 的主屏幕，而无需打开或创建任何项目。目前，您只需要知道您可以使用帮助菜单（图 1.11）来检查版本和 VS 文档：
图 1.11 – VS 主屏幕和帮助菜单
在图 1.11中，关于 Microsoft Visual Studio选项被突出显示；点击它，您将了解正在使用的版本以及是否有可安装的更新。
图 1.12 – 关于 Microsoft Visual Studio 屏幕
最后，如果您需要修复、修改或卸载 VS，您可以使用您之前下载的 VS 安装程序，或者在任何时候在 Windows 资源管理器中搜索Visual Studio Installer术语。此外，它将找到更新并显示您可以安装或尝试的其他版本（图 1.13）：
图 1.13 – VS 安装程序选项
现在我们已经了解了 VS 2022 的安装过程，让我们来探索 VS for Mac 用户。
VS for Mac
VS 为 Mac 用户提供了新版本。使用此版本，开发者可以在 MacOS 上获得与 Windows 用户相似的经验。
由于操作系统的不兼容性问题，.NET Framework 在 VS for Mac 中不受支持，只有 VS for Windows。
图 1.14 – VS for Mac – 启动屏幕
在图 1.14中，您可以看到 VS for Mac 打开时的样子；它看起来几乎与 Windows 版本相同。用户可以选择最近的项目、打开项目或创建一个新的项目。
重要提示
尽管 VS for Mac 是使用 macOS 操作系统技术制作的，但开发团队正在努力保持与 VS for Windows 相同的体验。
图 1.15 – VS for Mac – 主屏幕
在打开项目后，您可以设置您的工具栏，但默认情况下，VS for Mac 包含解决方案资源管理器、属性和错误部分。VS for Mac 是一个优秀的选项，适用于需要调试和性能工具的开发者，以及希望为 Android、iOS 和 MacOS 创建应用程序的 .NET MAUI（使用 C# 和 XAML 或使用 Blazor 创建原生应用程序的技术）开发者。
如果您想尝试 VS for Mac，您可以在以下链接中获取安装程序：
visualstudio.microsoft.com/vs/mac/
摘要
在本章中，您学习了 VS 是什么，可用的不同版本的 IDE 以及您可以选择以适应项目需求，VS 2022 for Windows 的安装过程，以及 VS for Mac 的一般概念。
在第二章**，配置 IDE中，您将学习如何根据作为 Web 开发者的需求自定义 IDE。
第二章：配置 IDE
通常情况下，软件开发者对编写代码的口味各不相同。这一点也适用于你用于开发的工具配置部分，例如，你可能想要更改 IDE 的一般颜色，或者更倾向于更改默认字体以更好地适应你的需求。
在本章中，你将了解 Visual Studio 中的不同配置选项，这无疑可以帮助你通过获得所需的确切元素来提高你的生产力，无论是从颜色还是你经常使用的窗口位置来看。
到本章结束时，你将能够修改 IDE 颜色方案，配置可停靠窗口，并自定义字体。
你将了解以下主题：
-
同步帐户和设置
-
配置颜色方案
-
自定义字体
-
自定义菜单和工具栏
-
自定义面板
技术要求
对于本章，你需要在你的机器上已经安装了 Visual Studio 2022。在第一章，开始使用 Visual Studio 2022中，你可以检查要求和安装过程。
同步帐户和设置
Visual Studio 的一个伟大功能是它允许你同步所做的配置，同时也允许你在不同的计算机上舒适地工作。
这得益于一个 Microsoft 帐户，它是使用 Visual Studio 所必需的。当你第一次启动 Visual Studio 时，会要求你输入该帐户，或者你可以通过点击 IDE 右上角的登录选项，随时输入或修改帐户以供 Visual Studio 使用，如图图 2.1所示：
图 2.1 – Visual Studio – 登录（在主屏幕右上角）
通过此过程同步的主要配置如下：
-
用户定义的窗口布局配置
-
主题和菜单设置
-
字体和颜色
-
键盘快捷键
-
文本编辑器设置
如果你不想在特定计算机上应用配置的同步，可以通过访问工具 | 选项 | 环境 | 帐户菜单来实现。从这里，你可以取消选择跨设备同步 Visual Studio 设置选项，如图图 2.2所示：
图 2.2 – 禁用设备间首选项同步
重要提示
禁用此功能不会影响同一计算机上可能安装的其他版本或版本的 Visual Studio 的同步过程。
现在我们已经了解了如何在设备间同步设置，让我们看看如何自定义主要设置。
配置颜色方案
有多种方法可以定制 Visual Studio 2022，其中最重要的是调整颜色。
无论你是在明亮的空间中还是在其他编程环境中，你可能都会想根据个人喜好调整颜色。
要将 Visual Studio 2022 的颜色方案定制为我们喜欢的样子，我们可以使用以下两个工具：
-
Visual Studio 默认主题
-
Visual Studio 颜色主题设计器
让我们分析这些选项，并学习如何应用最适合你的颜色方案。
Visual Studio 默认主题
当你第一次启动 Visual Studio 2022 时，会弹出一个窗口，询问你关于开发设置和颜色主题，如图图 2.3所示：
![Figure 2.3 – 选择初始主题
![img/Figure_2.3_B17873.jpg]
图 2.3 – 选择初始主题
这些颜色主题如下：
-
蓝色
-
蓝色（额外对比度）
-
深色
-
浅色
-
使用系统设置
每个选项都有一套预先设定的颜色，你可以使用相同的窗口预览。
一旦你选择了你喜欢的主题，它将被应用并保存在与请求 IDE 使用许可的 Microsoft 账户关联的配置中。
重要提示
深色主题有助于在低光条件下减少眼睛疲劳。如果你每天需要在办公室或光线有限的地方工作数小时，这是一个完美的选择。本书中的所有图表和截图都将使用深色模式。
如果你想更改最初选择的主题，你可以通过进入主 Visual Studio 窗口并点击显示继续无代码链接来完成：
![Figure 2.4 – 无代码访问 Visual Studio
![img/Figure_2.4_B17873.jpg]
图 2.4 – 无代码访问 Visual Studio
然后，从工具下拉菜单中，进入主题部分；你将找到所有默认主题以及你之前安装的主题。你只需选择一个即可应用所选主题，如图图 2.5所示：
![Figure 2.5 – 更改 Visual Studio 主题
![img/Figure_2.5_B17873.jpg]
图 2.5 – 更改 Visual Studio 主题
另一种更改主题的方法是，你可以进入工具 | 选项 | 环境 | 常规并选择颜色主题：
![Figure 2.6 – 在选项部分更改颜色主题
![img/Figure_2.6_B17873.jpg]
图 2.6 – 在选项部分更改颜色主题
在此菜单中，你还可以通过选择标记为启动时打开部分的选项来更改 Visual Studio 的启动方式。你可以选择以下选项之一：
-
启动窗口：默认窗口，你可以选择一个最近的项目或创建一个新的项目（见图图 2.4）。
-
最近解决方案：Visual Studio 将启动最后打开的项目或解决方案。
-
空环境：在 Visual Studio 中打开主窗口，不选择项目或解决方案。
让我们现在回顾一个下载额外主题的绝佳选项。
Visual Studio 市场
如果 Visual Studio 2022 安装中的默认主题不足以满足你的需求，你可能想看看 Visual Studio 市场中的社区主题，你可以在marketplace.visualstudio.com/找到它们。
一旦你进入市场，你需要做的是创建一个过滤器来仅显示其他开发者创建的主题，如图图 2.7所示，这将显示一系列非常有趣的选择：
图 2.7 – 在 Visual Studio 市场搜索主题
如果你想了解更多关于特定主题的信息，你需要点击该元素，这将显示有关主题的信息，并且几乎总是会出现一张图片，展示主题应用在 Visual Studio 上的样子。
如果你想安装主题，只需点击下载按钮，这将下载相应的安装程序，当你运行它时，它将开始安装新主题的过程。
一旦主题已安装，只需按照上一节中的相同步骤切换到新主题。
重要提示
在同一个市场内，有一个名为 Visual Studio 主题设计器的插件，它允许你轻松创建自己的主题。
现在我们已经看到了如何选择符合我们视觉偏好的主题，让我们看看我们如何还能自定义字体样式。
自定义字体
你可能会对两个地方感兴趣，想要更改你使用的字体类型：
-
在一般环境中
-
在源代码编辑器中
让我们按以下方式分析每个选项。
在 IDE 中更改字体
要在 IDE 级别更改排版，请按照以下步骤操作：
-
转到工具 | 选项菜单。
-
在配置窗口中，转到环境 | 字体和颜色部分。
-
在此部分，从显示设置下拉列表中选择环境选项。
这将允许你更改字体和大小等选项：
图 2.8 – 更改环境字体设置
在图 2.8中，我们可以使用字体选项来更改 Visual Studio 中的自动或默认字体，并使用示例部分查看其外观。
现在我们来回顾一下引用高亮显示，看看如何自定义 Visual Studio 在代码中高亮显示文本的方式。
引用高亮
另一种常见的自定义方法是更改引用的高亮显示。这指的是突出显示所选元素的不同出现，例如变量或关键字。这最好在图 2.9中看到，其中，当鼠标悬停在int关键字上时，所有对其的引用都会被高亮显示：
图 2.9 – 引用高亮
如果我们想更改找到的引用的颜色，我们必须执行以下步骤：
-
进入工具 | 选项菜单。
-
选择字体和颜色部分。
-
选择文本编辑器配置。
-
在显示项部分，选择名为高亮引用的配置，并更改相应的颜色，如图图 2.10所示：
图 2.10 – 更改高亮引用选项
您可以在项目前景中选择文本颜色，在项目背景中选择背景颜色，并最终在示例部分预览所选颜色。
在代码编辑器中更改字体
要更改文本编辑器中使用的字体，请遵循图 2.10之前显示的相同步骤。
作为配置选项的一部分，您可以更改字体、字体颜色、字体大小和背景等属性。
此配置选项的一个优点是它允许您根据需要尽可能具体地进行配置。这意味着您还可以更改选中文本、行号、书签和代码片段等内容的字体，以及其他许多设置。
现在您已经知道如何更改字体以适应您的需求，让我们看看如何调整 IDE 中的面板，以便您的项目工作流程更快。
重要提示
在 Visual Studio 2022 中，Cascadia 字体已被引入作为默认字体，该字体被描述为一种有趣的字体，具有更好的代码可读性。
自定义菜单栏和工具栏
菜单和工具栏是访问您经常使用的工具或选项（最好称为命令）的绝佳方式，因此学习如何自定义它们以帮助您开发应用程序非常重要。在本节中，我们将学习以下主题：
-
自定义菜单栏
-
自定义工具栏
首先，让我们看看如何自定义菜单栏。
自定义菜单栏
菜单栏是显示在 IDE 顶部的选项集，它允许您访问选项的下拉菜单（例如文件菜单）以执行特定任务、显示工具或对项目应用更改：
图 2.11 – Visual Studio 2022 的默认菜单栏
如果您想更改初始配置中的工具，无论是要在特定菜单中添加选项还是创建自己的菜单，请执行以下步骤：
-
进入工具 | 自定义。
-
进入命令部分。
-
在此部分，您应该使用菜单栏选项，这将允许您修改主菜单栏和辅助菜单栏，您可以通过下拉菜单中的管道符号（|）来区分它们，如图图 2.12所示：
图 2.12 – 菜单栏自定义窗口
- 一旦你选择了要修改的菜单，就会出现一个预览，显示菜单当前的外观。从这里，你可以通过点击添加命令按钮将新命令添加到菜单栏。
这将打开一个新窗口，显示按类别分组的每个命令，你可以选择将其添加到选定的菜单中，如图图 2.13所示：
图 2.13 – 更改高亮引用选项
如果你想从菜单中移除添加的选项，只需选中它，然后点击删除按钮，该按钮在图 2.14中被矩形突出显示：
图 2.14 – 从菜单栏删除项目的按钮
你还有上移和下移按钮，这允许你将选项在菜单中上移或下移，并重新排列菜单项。
重要提示
可以删除用户创建的工具栏，但不能删除默认配置中的工具栏。
最后，你也可以创建新的子菜单，甚至新的菜单。为此，点击添加新菜单按钮，这将根据你所在的层级添加一个新的菜单。例如，如果你想添加主菜单，你必须选择这个选项，同时菜单栏菜单被选中：
图 2.15 – 添加新主菜单的配置
相反，如果你想添加子菜单——例如，在编辑菜单中——你必须选择编辑菜单来执行此操作：
图 2.16 – 在编辑菜单中添加子菜单的配置
工具栏的自定义也是在同一个窗口中完成的；让我们看看如何进行下一步。
自定义工具栏
工具栏是你可以直接访问而无需首先打开菜单的命令集，如图图 2.17所示：
图 2.17 – Visual Studio 2022 工具栏部分
你也可以通过选择工具 | 自定义来配置哪些命令将出现在不同的工具组中。在这个窗口中，我们默认看到名为工具栏的选项卡，它将显示我们可以选择在界面中显示的不同类别。默认情况下，标准选项为 API 和 Web 项目选中。根据项目，默认添加了其他工具栏，但我们可以通过简单地勾选它们来手动添加其他工具栏，如图图 2.18所示：
![图 2.18 – 将工具栏添加到工具栏部分的自定义窗口
![图 2.18 – Figure_2.18_B17873.jpg]
图 2.18 – 添加工具栏到工具栏部分的定制窗口
你可以通过转到 命令 选项卡来向工具栏添加新命令。在这个选项卡中，我们将选择我们想要修改的工具栏并执行 自定义菜单栏 部分中描述的相同步骤。
如果你想要快速将不同的工具栏添加到 IDE 中，图 2.19 展示了如何通过访问 视图 菜单和 工具栏 来轻松完成，在这里你可以选择和取消选择你感兴趣的工具栏：
![图 2.19 – 从视图菜单访问工具栏
]
图 2.19 – 从视图菜单访问工具栏
你现在知道如何在 Visual Studio 中添加和删除工具栏以根据你的偏好或使用的科技自定义工具集。接下来，让我们回顾如何自定义 Visual Studio 中的面板。
面板定制
Visual Studio 中的面板是访问特定工具的一种方式，根据你正在工作的项目类型。
这些面板由工具和文档编辑器组成，其中一些是经常使用的，例如解决方案资源管理器（查看项目结构）、工具箱（显示当前项目可以拖放的控制项）、属性面板（修改所选元素的属性）和代码编辑器。
了解如何使用这些面板非常重要，这样你才能配置最适合你项目的工具和编辑器集。这就是为什么在本节中，我们将探讨以下主题：
-
向面板添加工具
-
面板适配
-
文档操作
-
窗口布局管理
让我们学习如何配置 IDE 以显示你项目所需的工具。
向面板添加工具
Visual Studio 2022 有许多工具或窗口，你可以根据需要显示或隐藏。这些工具的列表可以在 视图 菜单中找到，如 图 2.20 所示：
![图 2.20 – The list of available tools
]
图 2.20 – 可用工具列表
一旦打开此菜单，你将立即看到通常最常用的工具列表。这些工具包括服务器资源管理器、类查看器、错误列表、输出窗口和终端等众多强大工具。
另有一组工具不太常用，但可能在某些时候对你有所帮助。这些工具位于 其他窗口 部分。
从这里，你可以访问容器、C# 交互式、数据源和包管理控制台等工具。
要将任何这些工具添加到其中一个面板，只需选择其中一个，它将自动添加到当前环境中的战略面板。例如，如果你添加 服务器资源管理器 工具，它将被添加到左侧面板。另一方面，如果你添加 输出 工具，它将被添加到底部面板。
面板适配
Visual Studio 的一个巨大优势是你可以将工具面板安排在你喜欢的任何位置。为了达到最佳效果，了解面板的结构是很有帮助的。
每个面板由五个部分组成，你可以在这里放置工具。这些部分位于面板的每一边，加上中心的一个，如图Figure 2.21所示：
Figure 2.21 – 面板的部分
要将工具放置在面板中，只需将光标定位在工具的顶部，并将其滑动到你想要的面板即可。IDE 本身会显示你可以放置工具的可能位置，使整个过程简单易行；你还可以将面板从主窗口中拉出，单独使用。在Figure 2.22中，你可以看到窗口停靠的过程：
Figure 2.22 – 窗口在面板中的停靠
现在，是时候回顾我们如何与文档一起工作了。
文档操作
当我们使用文档编辑器，如代码编辑器时，有一些特殊选项可以应用。如果我们想查看这些选项，我们只需在打开文档的标签页上右键单击，如图Figure 2.23所示：
Figure 2.23 – 更改环境字体设置
这些选项非常直观——例如，浮动选项将允许我们将编辑器转换为一个浮动窗口，我们可以将其拖动到第二个显示器上。固定标签页选项将允许我们将标签页设置在打开窗口的开始位置，而设置标签页布局选项将允许我们将标签组移动到左侧、顶部或右侧。
如果我们打开的文档更多，我们将有更多的选项可用。使用此选项，我们可以创建文档组以分配空间，并用于执行任务以提高生产力，例如比较两个文档。Figure 2.24直观地展示了这一点：
Figure 2.24 – 文档组
现在你已经知道如何在编辑器中管理你的文档并组织它们。接下来，让我们学习如何管理窗口布局。
管理窗口布局
在你作为开发者的生涯中，你可能会遇到各种项目。你可能会在一个项目中管理与数据库相关的事项，因此你可能会想要保持服务器资源管理器工具开启。
可能在你同时工作的另一个项目中，你不需要触摸任何与数据库相关的内容，而你希望保持工具箱开启。
有没有一种方法可以将工具放置在你喜欢的面板中，而不必在 IDE 中堆放工具？答案是肯定的，这要归功于窗口布局的使用。
让我们看看与它们相关的关键任务。
保存窗口布局
一旦您配置了用于特定项目的工具面板，您需要转到窗口 | 保存窗口布局菜单。
这将打开一个新窗口，该窗口会提示您为您的工位配置输入一个名称。一旦您输入了名称，配置将自动保存。
要验证更改是否已应用，您可以访问窗口 | 管理窗口布局菜单，该菜单将显示包含您之前保存的所有布局或工位的窗口。
应用窗口布局
保存至少一个布局后，您可以应用它，以便您的工位空间在加载工具时，根据您保存窗口布局时的排列方式来加载面板。
要应用布局，您必须转到窗口 | 应用窗口布局菜单，该菜单将显示所有之前保存的布局。选择您想要应用的布局，您的工位将加载。
重置窗口布局
最后，您可能希望撤销对工位所做的所有更改，以便您拥有初始的 Visual Studio 配置。幸运的是，通过访问窗口 | 重置窗口布局菜单即可获得此选项。
当我们按下此按钮时，系统会询问我们是否同意返回初始配置。我们只需点击是即可获得具有默认配置的环境。
小贴士 - 帮助快捷键
使用 Ctrl + F1 打开 Visual Studio 文档，阅读指南和新闻。
摘要
在本章中，您学习了如何自定义 Visual Studio，选择主题、字体、颜色和面板。根据您的需求，您不仅可以设置 Visual Studio 的首选项，还可以先尝试默认配置设置，并根据您的办公风格调整 Visual Studio。
在第三章**，“Visual Studio 2022 的改进”中，您将了解在此版本中添加的新改进，并查看与 Visual Studio 2019 的比较。
第三章：Visual Studio 2022 的改进
每个新的 Visual Studio 版本都会带来新的功能来改善用户体验和性能，并为开发者提供更多功能和工具。
我们刚刚开始使用 Visual Studio 2022。在这本书中，您将学习一些中等和高级复杂性的功能，在后面的章节中，我们将更详细地研究 Visual Studio 2022 的变化，以获得更深入的理解。但在这章中，我们将回顾您现在可以使用 Visual Studio 2022 中的最重要的功能。
到本章结束时，您将认识到 Visual Studio 2019 和 Visual Studio 2022 之间的主要差异以及这个新版本中最相关的改进。
我们将回顾 Visual Studio 2022 中的以下改进：
-
64 位架构
-
新图标和样式
-
.NET 6 支持
-
热重载
-
其他改进
技术要求
对于本章，您需要在您的机器上已经安装了 Visual Studio 2022。在 第一章，开始使用 Visual Studio 2022，您可以检查要求和安装过程。
64 位架构
Visual Studio 2022 中一个简单但重要的特性是其 64 位的新架构。这是一个我们无法直接看到的改变，但在内部，它利用 64 位 CPU 来提高性能并减少多个任务执行中的延迟。
Visual Studio 2022 仅支持 64 位系统；这在当前的笔记本电脑和 PC 中很常见。
使用 Windows 中的 任务管理器，您将能够注意到当 Visual Studio 2019 和 2022 同时运行时的差异：
图 3.1 – Visual Studio 2022 在 64 位平台上的运行和 2019 在 32 位平台上的运行
在 32 位架构中，内存访问限制为 4 GB。现在，得益于 64 位架构，可以访问更多的内存，减少时间限制并避免 IDE 冻结或崩溃。
总的来说，Visual Studio 开发团队在 2022 版本中提高了许多场景的性能。当您在大项目上工作时，您会注意到差异，并且未来的版本性能将更好。
64 位架构是一个很好的性能提升，但这个特性在编码时并没有改善用户体验。在下一节中，我们将看到图标和样式的改进如何带来更好的用户体验。
新图标和样式
Visual Studio 2022 中添加了新的图标和样式。尽管这是一个简单的功能，但它帮助我们更容易地在应用程序中导航，使用视觉元素并正确识别动作和工具。例如，在 图 3.2 中，你可以看到扫帚图标（第一行，第五列）具有更好的对比度，采用了新的鲜艳的黄色（特别是针对深色主题）和现代设计。它还暗示将执行代码清理。扫帚图标用于执行代码清理以修复代码格式：
图 3.2 – Visual Studio 2022 与 2019 的图标对比
重要提示
关于 Visual Studio 2022 中的新图标的一个有趣的事实是，Visual Studio 开发团队与开发者社区合作，以满足三个目的——一致性、可读性和熟悉性。这导致了一系列具有相同含义但具有一致颜色、鲜明对比和可识别轮廓的图标。
字母、图标和背景之间的对比度得到了改善，使其更加舒适，对眼睛的疲劳感减少。在 图 3.3 中，你可以看到一个示例：
![图 3.3 – Visual Studio 2019（左）与 2022（右）的深色主题示例]
图 3.3 – Visual Studio 2019（左）与 2022（右）的深色主题示例
重要提示
虽然深色主题的使用在开发者中变得越来越普遍，但它也在整个行业的应用程序中变得越来越普遍。
图 3.4 是使用蓝色主题的另一个示例。尽管颜色非常相似，但我们仍能看出一些差异，以及新图标如何使屏幕看起来更好：
![图 3.4 – Visual Studio 2019（左）与 2022（右）的蓝色主题示例]
图 3.4 – Visual Studio 2019（左）与 2022（右）的蓝色主题示例
其他主题也有一些变化，但深色和蓝色是改进最多的。
使用这些新的图标和样式，使用 Visual Studio 变得更加用户友好。在下一节中，我们将看到 Visual Studio 如何支持 .NET 的新版本，.NET 6。
.NET 6 支持
.NET 是一个免费、开源的框架，用于使用 C#、F# 和 Visual Basic（其中 C# 是最受欢迎的）创建 Web、桌面、移动和其他类型的应用程序。
每年都会发布一个新的 .NET 版本。.NET 6 是一个新的长期支持版本，它提供了许多新的改进，例如最小 API 和 C# 10 兼容性。有关改进的更多信息，您可以访问 docs.microsoft.com/en-us/dotnet/core/whats-new/dotnet-6。
Visual Studio 2022 已准备好使用这个新版本创建、编译和发布项目。
在 第四章，“创建项目和模板”，我们将分析 Visual Studio 提供的项目和模板，并查看选择 .NET 6 作为我们应用程序选项的方案。
我们可以使用 .NET 6 创建项目，但也可以使用一种新的功能来快速检查代码更改。在下一节中，我们将回顾热重载如何在使用 Visual Studio 2022 的过程中提高我们的生产力。
热重载
对于很长时间，热重载一直是 .NET 开发者社区的主要请求功能。这是一个已经在许多技术中实现的功能，通过在每次对代码进行更改后刷新应用程序来提高开发者的生产力。
重要提示
热重载是一种在代码更改后重新编译代码的功能。这样，应用程序可以立即显示视觉更改，而无需重新启动，从而显著提高生产力。
即使是外部公司也在开发这项功能；最受欢迎的是 LiveSharp，它提供每月订阅（截至撰写本文时）。您可以通过以下链接查看：
Visual Studio 2022 为许多类型的项目提供了这个令人惊叹的功能，包括涉及 ASP.NET 和 Blazor（通过使用 WebAssembly 和 Razor 组件创建 Web 应用程序）的项目：
图 3.5 – Visual Studio 2022 中的热重载按钮
重要提示
热重载背后的团队决定不支持 Android 和 iOS 场景中基于 Xamarin.Forms 的新热重载功能，因此建议迁移到 .NET MAUI 以使用此功能。
在后续章节中，我们将在一些演示中使用此实用程序，并了解为什么这个工具对我们来说非常重要。在下一节中，我们将分享其他可以帮助我们提高生产力的改进，尤其是在大型项目中。
其他改进
Visual Studio 2022 有其他改进，其中之一是性能。Visual Studio 2022 在 64 位操作系统上运行，此外，如搜索文件工具等特性也得到了改进，以帮助在包含大量文件的项目中快速查找元素。在下图中，您将看到一个搜索示例：
图 3.6 – 在 Visual Studio 2022 中搜索单词 "class" 的示例
此外，您还有一种新的断点类型（断点是一种在代码的特定行中停止应用程序执行的技术）。使用此功能，我们可以添加一个依赖于之前创建的断点的断点。我们将在 第五章，“调试和编译您的项目”中看到更多关于此功能的信息。在 图 3.7 中，您可以看到新的 插入依赖断点 选项：
图 3.7 – Visual Studio 中的依赖断点
最后，IntelliCode 无疑是 Visual Studio 2022 中引入的主要变化之一，它允许开发者有信心地进行编程，快速找到问题，并通过在待办事项列表顶部建议最可能被使用的项目来进行集中的代码审查，正如你在 图 3.9 中所看到的：
我们将在 第七章 “使用 AI 和代码视图高效编码” 中了解这个令人惊叹的新增功能的全部特性，这将允许你全面探索 IntelliCode 的使用。
在 第四章 “创建项目和模板” 中，你将创建你的第一个项目，并分析 Visual Studio 为不同编程语言和技术提供的模板。
我们将在 第十一章 “实现 Git 集成” 中更深入地分析这个功能，我们将使用 GitHub 上的一个仓库来尝试与 Git 和 GitHub 集成的相关功能。
图 3.8 – 在“工具 | 选项 | 预览功能”中，有一个新选项来启用多仓库支持
摘要
这是一种非常有用的断点类型，适用于调试具有高复杂性的大型应用程序。当先前的断点满足条件时，它将中断应用程序的执行。
图 3.9 – IntelliCode 建议最可能被使用的属性和方法
在本章中，我们概述了 Visual Studio 的主要改进以及 Visual Studio 2022 和 Visual Studio 2019 之间的一些差异。在整个书中，我们将进一步分析这些功能并在一些演示中使用它们。
关于 Git 集成，我们有一个新的实验性功能，帮助我们在一个解决方案中处理多个仓库。因此，你可以在不同的项目中执行更改，然后提交更改（在 Git 中保存更改），而无需打开多个 Visual Studio 实例。在 图 3.8 中显示了启用多个仓库的新选项：
第四章：创建项目和模板
Visual Studio 中的模板是一组文件、引用、项目属性和编译选项，用于与特定技术一起工作。模板为我们提供了基本代码以供工作，并作为我们可以遵循并完成的指南，通过包括我们的业务逻辑和需求来完成。根据在 Visual Studio 安装过程中选择的负载，安装了不同的模板，尽管有一些模板会默认安装，例如类库。根据我们想要使用的项目或技术，我们将找到不同的模板选项可供选择。选择适合您需求的正确模板是您可以采取的最佳行动，以避免技术债务和未来在架构中的问题。
在本章中，我们将分析 Visual Studio 2022 提供的主要 Web 开发模板以及可用的自定义模板选项。此外，在本章中，我们将了解如何根据项目的范围、需求和团队的专业知识选择最佳的模板。
本章我们将回顾以下主题：
-
选择和搜索模板
-
.NET Core 模板
-
应用程序编程接口（API）模板
-
.NET Framework 模板
-
单页应用（SPA）项目的模板
让我们看看这些模板是什么以及如何使用它们。
技术要求
要跟随本章内容，你必须已经安装了带有 Web 开发工作负载的 Visual Studio 2022，如第一章中所示，“Visual Studio 2022 入门”。
您可以通过以下链接查看对项目的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter04
选择和搜索模板
如本章引言所述，Visual Studio 提供了许多模板，我们可以使用.NET 和其他技术，具体取决于你正在处理的项目类型。
要在 Visual Studio 2022 中探索模板，只需打开 Visual Studio 并选择创建新项目选项：
图 4.1 – Visual Studio 创建新项目选项
选择此选项后，我们将看到一系列可供选择以创建新项目的模板，如图图 4.2所示。同样，在左侧，我们将能够看到我们最近选择的模板，有固定或取消固定每个模板的选项，这样我们可以快速选择我们最常用的模板：
图 4.2 – 在最近的项目模板部分中固定或取消固定模板的选项
在图 4.2中，我们还可以看到顶部有一个搜索栏，用于过滤不同的模板。如果您知道将要使用的名称或技术，您可以输入相关的术语并开始搜索模板。搜索引擎将显示包含您输入的术语的所有模板。
在搜索栏下方，我们还可以看到三个下拉控件，这些控件也作为过滤器，用于搜索与我们要创建的编程语言、平台或项目类型相关的模板。在这些过滤器最重要的选项中，我们可以找到以下内容：
-
所有语言：
-
C#
-
JavaScript
-
Python
-
TypeScript
-
Visual Basic
-
-
所有平台：
-
Android
-
Azure
-
iOS
-
Linux
-
Windows
-
-
所有项目类型：
-
云
-
桌面
-
游戏
-
机器学习
-
移动
-
测试
-
Web
-
此外，您还可以将过滤器与搜索栏结合使用。例如，您可以在语言下拉菜单中选择C#选项，输入.NET Core以获取所有与.NET Core 和 C#相关的项目，如图所示：
图 4.3 – C#的.NET Core 模板
在图 4.3中，我们可以看到 Visual Studio 根据安装过程中选择的过滤器和工作负载找到的许多与.NET Core 相关的项目。
在结果底部，如果您找不到所需的选项，您将有一个安装其他模板的选项：
图 4.4 – 在 Visual Studio 中安装更多工具和功能的选项
重要的是要注意，每个模板都有一个描述，包括与模板相关的详细信息，这样我们就可以轻松地识别模板是否包含我们需要的结构和模式。
最后，当模板的描述包含空关键字时，这意味着模板默认不包含元素或模块，并包含演示或示例，例如指南，供开发者使用。这种类型的模板仅包含项目和基础组件，以便编译和运行。
现在我们已经了解了如何使用模板选择窗口，让我们来看看 Web 开发中最重要的模板。
.NET Core 模板
让我们首先了解.NET Core 和 ASP.NET Core 之间的区别：
-
.NET Core（现在称为.NET）是一个跨平台、免费且开源的框架，用于创建 Web、桌面、移动和其他类型的应用程序，使用标准库和 C#、Visual Basic 或 F#作为编程语言。
-
另一方面，ASP.NET Core 是一种多平台网络技术，用于使用 .NET 创建现代应用程序。这就是尽管 .NET Core 框架已被 .NET 6 替换，但您仍然会在模板中找到与 .NET Core 相关的术语。
如果我们想创建一个新的 ASP.NET Core 类型的干净项目，我们可以搜索并选择AspCoreEmpty。
此外，我们必须指定保存项目的位置。您可以选择保留默认路径，或选择自定义路径，例如C:\demos\AspCoreEmpty。
最后，设置解决方案的名称。默认情况下，它将与项目相同，但您可以将其更改为另一个名称。在图 4.5中，我们保留了相同的名称：
图 4.5 – 配置新的 ASP.NET Core Empty 项目
点击下一步按钮后，将显示一个新窗口，如下所示：
图 4.6 – 创建 ASP.NET Core Empty 项目
如图 4.6所示，您可以配置以下选项：
-
框架：此下拉菜单将显示与所选技术一起可用的框架集。尽管可以选择较旧的框架，但始终建议使用可用的最新框架版本创建新项目。
-
配置 HTTPS：此复选框允许您配置项目使用自签名 SSL 证书。如果您第一次在项目中工作，则在运行应用程序时将要求您信任证书，以确保一切正常工作。尽管可以使用 HTTP 协议进行工作，但在现实生活中始终建议使用 HTTPS。
-
启用 Docker：此选项允许您在项目中启用 Docker 支持。这意味着将生成 Docker 文件，然后您可以将其发布，例如到 Microsoft Azure。
在我们的示例(图 4.6)中，我们选择.NET 6作为目标框架。配置 HTTPS选项默认选中，对于此演示是可选的。最后，您可以点击创建以完成向导并创建项目。
创建项目后，我们可以分析创建的项目结构，如图图 4.7所示，它很简单：
图 4.7 – Visual Studio 中的 ASP.NET Core Empty 项目
在名为解决方案资源管理器的面板中，我们可以看到与为项目创建的模板相关的所有文件。
与项目结构相关的只有两个文件，如下所示：
-
appsettings.json: 这是一个包含默认设置的 JSON 文件，用于 ASP.NET Core 项目。 -
Program.cs: 这是包含配置和启动应用程序命令的应用程序入口点。
在我们选择的模板中，使用了 .NET 6 中引入的新概念，称为最小 API，这是一种使用Program.cs中的辅助函数来创建简单端点所需的最少代码的方式。
默认情况下，当应用程序执行时，它将显示一个GET方法并将其映射到基本 URL – 例如，http://myapiurl/。
重要提示
最小 API 是 .NET 6 中包含的新模板，对于创建简单的 API（如演示、小型服务、无服务器函数和微服务）非常有用。
现在，让我们使用ASPNET创建一个新的项目并选择ASP.NET Core Web 应用程序模板：
图 4.8 – 使用 ASPNET 搜索并选择 ASP.NET Core Web 应用程序模板
然后，点击下一步并填写创建新项目所需的信息，如图 4.9所示：
图 4.9 – 配置新的 ASP.NET Core Web 应用程序项目
在填写完项目的附加信息后，如图 4.10所示，您可以点击创建按钮，使用 ASP.NET Core Web 应用程序模板生成项目：
图 4.10 – 新的 ASP.NET Core Web 应用程序模板的附加选项
如果您想使用 .NET 和 C# 在服务器上创建 Web 应用程序，则此模板非常合适。此外，它使用 razor 页面（在cshtml扩展文件中将 C# 与 HTML 结合的语法）将 Web 应用程序构建成小型且可重用的组件。
现代应用程序通常在浏览器中运行，因为它们运行速度更快，并且有更好的搜索引擎优化（SEO），这可以提高您网站的流量。然而，服务器端应用程序对于仪表板、内部项目、管理面板以及许多其他类型的 Web 应用程序仍然非常有用。
ASP.NET Core Web 项目包含一个wwwroot文件夹，您可以在图 4.11中看到：
图 4.11 – ASP.NET Web 项目的结构
wwwroot文件夹与静态文件相关联，例如 CSS、图片和 JavaScript 文件。还有一个名为Pages的文件夹，其中包含所有 UI 组件。
Index.cshtml是一个示例，您可以在其中看到 C# 代码与 HTML 代码的混合。@字符允许您在文件中使用 C# 代码。例如，@model将模型类型设置为映射页面上的值。
其他类型的 .NET Core 项目模板包括以下内容：
-
控制台应用程序：此模板创建一个简单的控制台应用程序。通常，我们在开始学习和起步时使用此类应用程序。
-
类库：这允许您创建可在不同项目中共享的组件和类。
-
API 模板
-
SPA 模板
这些是推荐的模板，因为它们是最新的，并且与.NET 的最新版本保持一致。
API 模板
今天，应用程序使用基于 API 的端点是几乎成为一条规则。这是因为它们通过不依赖于特定技术或操作系统提供了高级别的安全性和互操作性，并且可以根据现有需求进行扩展。此外，我们可以实现高级架构，例如使用 API 的微服务，其中所有业务逻辑都分布在小型隔离的独立服务中。
由于能够基于 API 开发解决方案的重要性，Visual Studio 2022 集成了一个特殊的模板，使我们能够创建基于.NET 6 的 API，我们可以通过过滤api术语来搜索它们，如图 4.12所示：
图 4.12 – 通过 API 过滤并选择 ASP.NET Core Web API
一旦我们选择了模板，我们必须根据我们的需求填写补充信息，如图图 4.13所示：
图 4.13 – 配置 ASP.NET Core Web API 项目
在下一个窗口中，我们将被要求选择框架版本以及是否需要某种类型的身份验证，以及其他我们在.NET Core 模板部分中已经看到的数据。然而，我们有一些额外的选项，在正常的 ASP.NET Core 项目中看不到，如下所示：
-
用户控制器：如果选择此选项，将启用从配置中使用的控制器文件。如果不选择，将使用名为最小 API 的功能，这将创建实现功能 API 所需的最少代码。
-
启用 OpenAPI 支持：Swagger 是一组基于 OpenAPI 规范的开放源代码工具，它将允许我们以简单、易于和结构良好的方式描述我们创建的 API，为 API 用户提供良好的文档。
对于我们的示例，我们将保留两个选项都选中，如图图 4.14所示，以便您可以看到生成的结构：
图 4.14 – 选择 ASP.NET Core Web API 项目附加信息中的选项
一旦创建项目，我们可以看到已创建一个名为Controllers的文件夹作为项目的一部分：
图 4.15 – ASP.NET Core API 项目的结构
在 Controllers 文件夹中，我们将找到作为 API 部分创建的控制器。请记住，我们可以看到这个文件夹中的控制器，是因为我们在 图 4.14 中选择了 Use controllers 选项。
要运行或执行应用程序，我们需要使用标准工具栏中的绿色箭头或播放图标：
图 4.16 – 在 Visual Studio 中启动项目的播放按钮
我们可以开启或关闭调试来启动项目。在这种情况下，任何一种选择都可以。我们只是想看看项目的外观。
重要提示
有一些有用的快捷键可以启动项目。您可以使用键盘上的 F5 以调试模式运行项目，或者使用 Ctrl + F5 来启动不带调试的项目。
如果我们继续运行应用程序，它将立即带我们到一个 URL 以 /swagger/index.html 结尾的窗口：
图 4.17 – ASP.NET Web API 项目的 Swagger 页面
在这里，我们将能够找到通过 Swagger 文档的所有 API 功能 – 这意味着我们项目中的控制器创建的所有端点。Swagger 是一个使用 OpenAPI 标准来显示所有端点的库，包括所需的参数和返回值的类型。
从这个页面，我们将能够测试每个端点，以验证它们，并在某些端点不符合预期时进行必要的调试。如您所欣赏，这个工具在开发目的和为用户提供创建的 API 文档方面都非常有帮助。
这个模板为我们提供了从头开始创建我们自己的现代 API 所需要的一切。现在，让我们看看可用于与 .NET Framework 一起工作的模板。
.NET Framework 模板
.NET Framework 是 .NET 的原始实现，由微软于 2002 年发布。长期目标是使这个框架成为一个多平台框架。不幸的是，由于 API 限制，它始终在 Windows 设备上官方运行。为了解决这个问题，创建了特定版本的框架来支持不同的平台，这导致了平台的碎片化。通过从这些随着时间的推移推出的项目中积累的经验，微软团队最终成功地统一了 .NET 平台。
由于多年来 .NET Framework 平台一直是开发 .NET 应用程序的主要框架，因此世界上许多公司使用基于 .NET Framework 的 ASP.NET Web Forms、MVC 或 Web API 应用程序。这就是为什么 .NET Framework 模板仍然包含在 Visual Studio 中的原因。但这并不意味着建议使用这些模板创建应用程序。您应该始终选择使用具有当前和持续支持的现代技术。
虽然有几个带有 .NET 框架的模板，但有一个真正吸引我们的用于 Web 开发。这被称为 net framework 术语，如 图 4.18 所示：
图 4.18 – 使用 .NET 框架进行搜索
选择模板后，在下一个窗口中，您将看到许多需要填写字段，这些字段对您来说应该是熟悉的，例如项目名称和位置，以及其他数据。重要的是要注意，我们有一个下拉菜单，显示我们可以工作的 .NET 框架的多个版本。在这个例子中，我们将选择最后一个版本，如 图 4.19 所示：
图 4.19 – 配置 ASP.NET Web 应用程序 (.NET 框架)
一旦我们选择了框架，我们就可以选择我们想要创建的应用程序类型 – 选项包括一个干净的项目、Web 表单模板、基于 MVC 的项目、Web API 和单页应用程序，如 图 4.20 所示：
图 4.20 – Visual Studio 中 .NET Framework 的 Web 应用程序类型
这些模板的选择将取决于应用程序的需求，尽管，如本节开头所述，建议选择面向 .NET 的模板。
让我们继续审查 SPA 模板的类别，该类别旨在创建用户将与之交互的应用程序。
单页应用模板
单页应用（SPA）是 Web 项目的绝佳架构，其中所有元素都使用单个 超文本标记语言（HTML）文件进行渲染。有许多库和框架使用这个概念 – 例如，Angular、React.js 和 Blazor WebAssembly。
使用这些模板创建的任何项目都将包含创建单体应用程序所需的所有组件，后端使用 ASP.NET，前端使用单页应用库或框架。
让我们使用 Visual Studio 创建我们的第一个 SPA 项目。您可以通过搜索 ASP.NET Core with 来找到单页应用的模板：
图 4.21 – 使用 ASP.NET Core 进行搜索
在 图 4.21 中，您可以看到使用 ASP.NET Core with 进行搜索的结果。我们可以选择三个模板来处理 SPA：
-
ASP.NET Core with Angular
-
ASP.NET Core with React.js
-
ASP.NET Core with React.js and Redux
我们将使用 React.js 创建一个项目，因此让我们选择 ASP.NET Core with React.js，然后点击 下一步 继续操作：
图 4.22 – 配置 ASP.NET Core 与 React.js 项目
重要提示
你将要创建的项目将用于本书接下来的练习，因此将此代码保存在你偏好的永久文件夹中非常重要。
然后，你应该选择.NET 6（长期支持）作为框架目标，并在身份验证类型中选择无，最后点击创建，如图图 4.23所示：
图 4.23 – 填写附加信息部分
点击创建后，你可以看到使用 SPA 模板创建的项目，并分析其架构：
图 4.24 – 在 Visual Studio 中创建的包含 React.js 项目的 ASP.NET Core 项目
在这个模板中，有三个重要的文件夹需要突出：
-
ClientApp: 包含客户端应用程序 – 在这种情况下，一个 React.js 应用程序
-
Controllers: 包含与服务器上业务逻辑相关的所有控制器
-
Pages: 包含 razor 页面，这意味着在服务器上渲染的 UI 组件
该模板包含一个WeatherForecastController.cs文件的演示。这是一个简单的演示，返回一些随机数据。
让我们通过点击播放按钮来运行项目，如图图 4.25所示，以查看应用的外观：
图 4.25 – 在 Visual Studio 中运行项目的选项（绿色箭头或播放图标）
当项目运行时，你可以看到一个简单的 HTML 页面，解释了模板的工作原理，包括两个演示，计数器和获取数据：
图 4.26 – ASP.NET Core 与 React.js 项目运行状态
该模板简单但包含了我们使用单体架构创建新 Web 应用所需的所有内容，并在后端和前端方面遵循最佳实践。如果你需要一个高性能安全的 Web 应用，这个模板是一个不错的选择。React.js 使用 JavaScript 作为语法，因此对于这个模板，你需要更多关于这种语言以及 C#（后端）的知识。在我们分析的.NET Core 模板部分中，C#对于编写我们的 UI 和业务逻辑比 JavaScript 更重要。
我们将对这个项目进行一些修改，并默认使用文件和演示来分析 Visual Studio 中的工具，并学习如何利用这些惊人的功能。
摘要
Visual Studio 在创建项目方面有不同的选项，根据安装过程中添加的工作负载使用模板。我们有四个过滤器来快速搜索模板。虽然我们可以按语言、平台和项目类型进行筛选，但我们也有可能使用搜索栏通过术语或特定单词来查找我们的模板。
选择要使用的模板后，我们必须始终输入项目名称以及项目将要创建的文件夹。然后，我们必须选择目标框架和一些可选信息。在屏幕上选择创建后，Visual Studio 将打开项目，因此我们可以立即开始工作。
使用解决方案资源管理器，我们可以查看项目的结构，包括应用中使用的文件夹。通常，使用模板创建的项目包含一个演示，帮助我们验证应用程序是否运行良好。
在第五章“调试和编译您的项目”中，我们将调试我们创建的 SPA 项目。我们将了解为什么这个工具很重要，并检查在执行之前编译项目的选项。
第五章：调试和编译你的项目
作为软件开发人员，应该尽早学习的一项技能是程序调试。这适用于 .NET 项目，也适用于任何其他软件开发技术。
如果你想要充分利用 Visual Studio 2022，你必须熟悉其不同的窗口，这些窗口可以帮助你观察信息以修复错误，并了解如何使用它提供的调试工具，包括断点。断点提供了停止应用程序执行的功能，让你能够查看每个对象的状态并证实其行为。
因此，在本章中，我们将讨论 Visual Studio 2022 的调试，可用的不同断点，状态检查工具，以及每个工具的最佳使用场景。
本章我们将讨论以下主题：
-
在 Visual Studio 中调试项目
-
探索 Visual Studio 中的断点
-
调试的检查工具
让我们学习如何在 Visual Studio 2022 中进行调试，以检测程序中的可能错误。
技术要求
要跟随本章中展示的示例，必须安装带有 Web 开发工作负载的 Visual Studio 2022，如第一章中所示，开始使用 Visual Studio 2022。
同样，代码实现将在第四章中创建的项目上执行，创建项目和模板，特别是Program.cs文件，以便于测试。
你可以在以下链接中找到本章中修改过的Program.cs文件：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/blob/main/Chapter05/Program.cs。
在 Visual Studio 中调试项目
在深入讨论 Exploring breakpoints in Visual Studio 2022 部分的断点主题之前，了解调试世界中以及 Visual Studio 中使用的某些技术方面很重要。
理解调试的技术方面
了解调试器和调试之间的区别很重要，这样你才能在我提到这些术语时理解我的意思，无论是本章还是整本书中。
首先，调试这个术语指的是查找代码中的错误的行为。这并不一定包括使用像 IDE 这样的工具。例如，你可以在一张纸上查找代码中的错误，而你仍然在进行调试。
这通常不可行，因此通常会使用一个名为调试器的工具。这个工具会附加到你将要运行的应用程序进程上，允许你在应用程序运行时分析你的代码。
区分调试模式和运行模式
在 Visual Studio 中区分调试模式和运行模式非常重要，因为这对第一次接触 IDE 的人来说可能会造成混淆。
让我们首先分析调试模式。此选项通过选择 调试 配置（默认情况下已预选）并点击位于项目名称相同空间中的绿色按钮来激活，如图 图 5.1 所示：
图 5.1 – Visual Studio 的调试模式选项
当按下此选项时，调试器将附加到应用程序的执行，这将允许我们使用诸如在应用程序中的特定断点处停止等函数。
另一方面，我们还可以在下拉列表中选择第二个配置，如图 图 5.2 所示，称为 发布：
图 5.2 – Visual Studio 的发布模式选项
当选择此选项并继续启动应用程序的执行时，调试器将不会附加，这将让您更好地了解应用程序如何对最终用户表现。这意味着您将无法执行代码调试或查看异常发生的位置，但您将获得性能提升。
项目调试初始化选项
作为应用程序的调试和执行选项的一部分，我们必须知道我们有一组选项可用于执行我们的测试。
如果您下拉带有您项目名称的绿色按钮旁边的选项，如图 图 5.3 所示，您将能够看到一组用于应用程序部署的配置：
图 5.3 – 调试的服务器配置选项
例如，前三个选项用于选择您想要用于测试的服务器。默认情况下，使用名为 Kestrel 的服务器。但也可以使用 IIS Express，或者如果您的应用程序更倾向于基于 Linux 的环境，甚至可以使用 WSL。
在 图 5.4 中，我们可以观察到以下选项来更改浏览器、启用脚本调试以及查看项目的调试属性：
图 5.4 – 调试的附加选项
如果您，例如，想要使用特定的浏览器来使用其自己的工具，这些选项非常有用。
如果应用程序已配置为调试模式，您将在 IDE 的上半部分看到允许您控制应用程序执行的按钮，如图 图 5.5 所示。从左到右，这些按钮用于执行以下操作：
-
暂停应用程序
-
停止应用程序
-
重新启动应用程序
图 5.5 – 控制应用程序流程的按钮
现在我们已经了解了 Visual Studio 中的现有调试概念，让我们来分析断点。
探索 Visual Studio 中的断点
断点是软件开发的基本组成部分。它们允许你在任何想要检查对象状态的地方停止应用程序的流程。
要在 Visual Studio 中设置断点，我们只需将光标定位在行号旁边即可。这将开始显示一个灰色圆圈，当我们将光标移过行号时，它会出现和消失，如图所示：
![图 5.6 – 在 Visual Studio 中放置断点的位置
![图 5.06 – 设置断点的选项
图 5.6 – 在 Visual Studio 中放置断点的位置
一旦我们找到想要调试的行，我们只需单击一次左键，这将导致圆圈变成红色，如图 图 5.7 所示。一旦你这样做，如果你将光标移出圆圈，你将能够看到它保持原样，如图所示：
![图 5.7 – 设置断点
![图 5.07 – 设置断点的选项
图 5.7 – 设置断点
如果我们继续执行带有断点的应用程序，我们将看到应用程序流程在启动应用程序后立即停止，如图 图 5.8 所示：
![图 5.8 – 调试断点
![图 5.08 – 设置断点的选项
图 5.8 – 调试断点
一旦应用程序在断点处停止，我们将有不同工具可用，我们可以使用它们来查看应用程序的状态 – 例如，如果我们定位在调试行之前的变量上，我们将能够看到其当前状态。如果是原始数据，你将立即看到其值，而如果是对象，你将能够进入其属性以检查每一个，如图 图 5.9 所示：
![图 5.9 – 检查对象属性
![图 5.09 – 设置断点的选项
图 5.9 – 检查对象属性
有更多选项可以设置断点 – 例如，如果你将自己放在一个灰色圆圈上，并用鼠标右键点击它，将会出现一系列断点，我们将在 条件断点、临时断点 和 依赖断点 部分进行分析，以便你可以插入它们：
![图 5.10 – 设置断点的选项
![图 5.10 – 设置断点的选项
图 5.10 – 设置断点的选项
同样，如果你在已放置的任何断点上右键单击，你将看到添加功能到它们的选项：
![图 5.11 – 修改断点的菜单
![图 5.11 – 修改断点的菜单
图 5.11 – 修改断点的菜单
这是向你的项目添加断点最简单的方法。然而，你经常会需要某些特定情况下才会激活的特殊断点，因此我们将在下一节中继续回顾它们。
重要提示
Visual Studio 为我们即将执行的大多数操作创建了键盘快捷键。因此，随着我们继续本章的阅读，我将为您提及它们作为笔记。
可以通过将光标放在想要调试的行上并按 F9 键来快速插入断点。
在断点之间导航
一旦我们知道了如何在源代码中放置断点，我们就可以通过菜单上方的按钮以不同的方式继续应用程序的执行：
![Figure 5.12 – 应用程序执行的调试选项
![img/Figure_5.12_B17873.jpg]
图 5.12 – 应用程序执行的调试选项
它们将按照以下方式执行代码：
-
进入：这允许我们逐行执行所有源代码。如果我们作为流程的一部分调用我们通过源代码可以访问的方法，我们将自动跟随逐行调试导航到它。
-
跳过：这允许我们仅遍历当前方法中的代码行，而不进入当前方法调用的任何方法。
-
跳出：此按钮用于我们处于方法内部时。它将允许我们跳出方法的执行，仅返回到方法调用的下一行。
重要提示
每个选项都分配了一个快捷键：
进入：F11 键
跳过：F10 键
跳出：Shift + F11 键
如果我们希望检查项目中所有的断点，可以通过激活断点窗口来完成。这可以通过调试 | 窗口 | 断点菜单来完成，如图图 5.13所示：
![Figure 5.13 – 显示断点窗口的选项
![img/Figure_5.13_B17873.jpg]
图 5.13 – 显示断点窗口的选项
这将显示一个新窗口，显示我们在项目中放置的所有断点的列表。
条件断点
有时候，你需要断点在满足某些条件时停止。在这种情况下，使用条件断点是最佳选择。要插入此类断点，只需在侧边栏上右键单击，这将显示可用的不同类型的断点，如在断点之间导航部分所示。选择条件断点类型，这将打开一个带有预选选项的窗口，如图图 5.14所示：
![Figure 5.14 – 条件断点的选项
![img/Figure_5.14_B17873.jpg]
图 5.14 – 条件断点的选项
在条件断点中，我们可以配置条件表达式条件、命中次数条件或过滤器条件，这些内容我们将在下一节中讨论。
重要提示
要插入条件表达式，可以使用 Alt + F9 键，然后按 C 键。
条件表达式
如 图 5.15 所示的 条件表达式 选项，将允许我们在满足我们之前指定的真条件或对象值发生变化时停止应用程序：
图 5.15 – 可以使用条件表达式评估的表达式类型
在第一种情况下，我们可以指定一个布尔表达式，范围从一对值的比较到复杂对象的比较。
在 图 5.17 中，创建了一个 for 循环，打印从 1 到 10 的数字，以便更好地理解示例。此外，我在 i 变量上放置了一个图钉，您可以通过在应用程序运行时简单地悬停在任何变量上并点击图钉符号来放置它，如图所示：
图 5.16 – 可以使用条件表达式评估的表达式类型
作为条件，我们已指定我们只想在 i 的值大于数字 5 时停止应用程序。启动应用程序后，断点停止，就在 i 的值为 6 时：
图 5.17 – 调试条件表达式
在第二种情况下，我们可以监视一个对象、属性或字段，以便断点仅在它发生变化时停止。这可以在 图 5.18 中以实际的方式看到，其中 i 变量：
图 5.18 – 使用 When changed 参数评估条件表达式
因此，当断点第一次执行时，i 的值等于 1。
命中计数
如 图 5.19 所见，25：
图 5.19 – 评估命中计数表达式
这将导致应用程序在 i 的值为 25 时停止。
过滤
最后一种条件断点是 过滤 条件。这将允许我们根据一系列预定义的表达式触发断点。这些表达式可以在 图 5.20 中找到的 过滤 框中找到，范围从机器名，通过进程，到线程属性：
图 5.20 – 过滤条件选项
这些是条件断点的类型，对于执行值比较非常有用。现在，让我们看看函数断点。
函数断点
函数断点类型，正如其名称所示，将允许我们在方法执行时进行调试，即使我们没有像在“条件断点”部分那样设置断点。如果你有成百上千行的代码并且知道你想要调试的函数名称，这将非常有用。
与我们在“条件断点”部分看到的断点不同，这个断点是以不同的方式放置的。首先，如图 5.21所示，你可以转到调试 | 新建断点 | 函数断点菜单，并在窗口中插入我们想要设置断点的函数名称，而不是在代码中放置红色圆点：
![Figure 5.21 – 从调试菜单添加函数断点
![img/Figure_5.21_B17873.jpg]
图 5.21 – 从调试菜单添加函数断点
下一种方式是从断点窗口添加断点函数，如图 5.22所示：
![Figure 5.22 – 从调试菜单添加函数断点
![img/Figure_5.22_B17873.jpg]
图 5.22 – 从调试菜单添加函数断点
一旦我们点击了具有以下格式的Program.cs文件：
void StopHere()
{
Console.WriteLine("Hi!");
}
如果我们知道要评估的函数名称，我们可以在函数名称框中输入它。我们可以通过几种方式来做这件事：
-
输入函数名称
-
使用特定的重载指定函数名称
-
如果我们有源代码，指定
dll名称
在我们的例子中，我们将只放置StopHere函数的名称：
![Figure 5.23 – 填写我们感兴趣调试的函数名称
![img/Figure_5.23_B17873.jpg]
图 5.23 – 填写我们感兴趣调试的函数名称
在建立了数据后，我们将执行应用程序，在此之前已经调用了这个新方法。这将导致应用程序在方法开始处停止（如图 5.23中指定），如图 5.24*所示：
![Figure 5.24 – 通过函数断点执行断点的演示
![img/Figure_5.24_B17873.jpg]
图 5.24 – 通过函数断点执行断点的演示
重要提示
可以通过按下Ctrl + K键，然后按B键来添加函数断点。
毫无疑问，当我们想要快速调试方法时，这种类型的断点会使我们的生活变得更轻松。如果你想要根据对象的数据来触发断点，你可以使用数据断点，我们将在下一节中看到。
数据断点
如果你想要能够在对象属性更改时放置断点，那么数据断点是你最好的选择。如果你尝试从断点窗口添加这样的断点，你会看到该选项被禁用。
这是因为我们首先需要在想要开始监控属性之前放置一个断点。一旦完成，启动应用程序直到断点被激活，在名为 EnvironmentName 属性的 app 对象的一个窗口中：
图 5.25 – 当 EnvironmentName 属性更改时添加数据断点
一旦我们选择该选项，我们将看到如何自动创建一个新的断点，该断点将检测我们指定的属性何时发生变化，如图 5.26 所示：
图 5.26 – 在断点窗口中创建的数据断点
假设，随后我们继续修改属性数据 – 例如，通过以下代码：
app.Environment.EnvironmentName = "Testing Data Breakpoints";
现在，当我们运行应用程序时，我们将看到之前放置的断点是如何被达到的，如图所示：
图 5.27 – 属性更改时断点的演示
最后，你会发现当你重新启动应用程序或停止它时，断点将从窗口中消失。这是因为对象引用已丢失。
依赖断点
这种类型的断点是一种特殊断点，它只有在另一个断点首先被达到时才会执行。也许在简单场景中，它不是非常有用，但在复杂场景中，当数百个功能发挥作用时，它可以非常有帮助。
例如，想象一下你有一个在应用程序的几个地方被调用的方法，你正在测试一个调用它的新功能。如果你要在该方法上放置一个普通断点，它会在每次被调用时停止。使用依赖断点，你可以指定只有当你的新功能断点被达到时才停止执行。
为了演示此功能，我在 Program.cs 文件中添加了几个方法，如下所示：
void NewMethod()
{
Console.WriteLine("New Method");
}
void CommonMethod(string message)
{
Console.WriteLine(message);
}
CommonMethod 函数的思路是我们可以看到作为参数传递的字符串的内容，并知道断点在哪个点停止。考虑到这一点，让我们添加一些额外的行，我们将首先调用 CommonMethod，然后调用 NewMethod，最后再次调用 CommonMethod：
CommonMethod("Before invocation of NewMethod()");
NewMethod();
CommonMethod("After invocation of NewMethod()");
要放置一个依赖断点，我们首先将在我们想要依赖的代码行上放置一个普通断点 – 即，必须首先执行以使依赖断点执行的断点。在我们的例子中，我们将它放在 NewMethod 功能中，因为它是我们想要测试的方法，如图 5.28 所示：
图 5.28 – 依赖断点所依赖的断点放置
然后，您必须在想要创建依赖断点的行上右键单击，如图 图 5.29 所示：
图 5.29 – 插入依赖断点
此选项将显示 “断点设置” 窗口，您将被告知要依赖哪个断点来启动依赖断点。在我们的示例中，我们将选择我们项目中唯一的断点，如图所示：
图 5.30 – 我们可以依赖以执行依赖断点的断点列表
一旦此窗口关闭，您将看到如何创建一个特殊的断点，如果您将其悬停，它将告诉您它依赖于哪个其他断点，如图所示：
图 5.31 – 依赖断点的视图
最后，当运行应用程序时，您将看到它首先在 NewMethod 调用处停止，而不是在首先调用的 CommonMethod 处。如果您继续执行，依赖断点将停止，并显示 “NewMethod() 调用之后” 消息，如图 图 5.32 所示：
图 5.32 – 依赖断点的执行
如您所见，这种类型的断点可以非常有帮助，以避免不断的方法调用。
临时断点
如其名称所示，临时断点是一旦执行就会自动删除的断点。要放置其中一个，您必须在断点行上右键单击并选择 “插入临时断点” 选项，如图 图 5.33 所示：
图 5.33 – 插入临时断点的菜单
如果您运行应用程序，您将看到一旦应用程序在断点处停止，它将自动删除。这种类型的断点可以在我们想要评估循环的第一个迭代时使用。
重要提示
要快速插入临时断点，请使用 F9 + Shift + Alt 键，然后按 T 键。
现在我们已经检查了 Visual Studio 中可用的不同类型的断点，让我们看看我们如何利用它们使用不同的检查工具，这些工具将在下一节中介绍。
调试检查工具
在使用断点时，了解我们想要可视化的信息在哪里以及它是否正确非常重要。为此，在 Visual Studio 中，我们有一系列窗口，将允许我们可视化不同类型的信息。因此，让我们来看看它们。
观察窗口
观察窗口将允许我们在逐步执行代码时跟踪变量或属性值。当我们有多次重复的代码片段，如循环或常用方法时，这尤其有用。要访问此窗口，我们必须首先在代码中设置一个断点并执行应用程序。
一旦应用程序在断点处停止，我们就可以部署调试 | 窗口菜单。这将显示一组新的调试窗口，我们只能在应用程序运行时访问它们。让我们选择观察选项来选择一个窗口，如图图 5.34所示：
![Figure 5.34 – 达到观察窗口的菜单
![img/Figure_5.34_B17873.jpg]
图 5.34 – 达到观察窗口的菜单
一旦窗口已打开，我们可以添加我们想要监控的不同变量和属性的名称。只要我们为当前作用域输入了有效的变量名，我们将在值列中看到其对应的值，如图图 5.35所示：
![Figure 5.35 – 通过观察窗口监控变量值和属性
![img/Figure_5.35_B17873.jpg]
图 5.35 – 通过观察窗口监控变量值和属性
另一种非常简单的方法是将变量添加到观察窗口中，是在应用程序运行时右键单击要监控的变量，并选择添加观察选项。
重要提示
要快速访问任何观察窗口，你可以使用Ctrl + Alt + W快捷键，然后输入窗口编号（从1到4）。
快速观察
如此可见的for循环（在击中计数部分中看到）：
![Figure 5.36 – 从调试菜单中选择快速观察选项
![img/Figure_5.36_B17873.jpg]
图 5.36 – 从调试菜单中选择快速观察选项
此选项将激活一个模态窗口，这意味着我们无法继续运行应用程序，直到我们关闭它。在这个窗口中，我们将能够看到诸如表达式名称、值和数据类型等数据。
在此窗口中，非常有用的一点是我们将能够修改表达式。这意味着我们将能够评估其他变量，甚至可以执行一些我们想要测试的操作。在图 5.37中，我们看到这是如何实现的，我们输入了一个新的表达式来评估其结果是否为true或false：
![Figure 5.37 – 在快速观察窗口中修改表达式
![img/Figure_5.37_B17873.jpg]
图 5.37 – 在快速观察窗口中修改表达式
如我们所见，这提供了巨大的优势，因为我们可以在实时中快速测试变量和属性。
重要提示
你可以使用Shift + F9快捷键快速访问快速观察窗口。
自动和局部窗口
自动和局部窗口允许我们查看变量和属性信息，而无需像观察窗口那样将它们添加到某个地方。
然而，这些窗口具有特定的作用域。当 Autos 窗口显示我们放置断点周围的变量值时，局部变量 窗口将只显示当前作用域的值 – 也就是说，通常是断点所在的函数或方法。
关于这些窗口的另一个重要点是，它们只有在运行应用程序并放置断点后才会显示。
为了演示这对窗口，我在我们的 Program.cs 文件中添加了一个新方法并放置了一个断点，如图 5.38 所示：
图 5.38 – 测试 TestLocalsAndAutos 方法，放置断点以演示局部变量和 Autos 窗口
一旦我们调用该方法，并且只有当应用程序正在运行时，我们才能通过 调试 | 窗口 | Autos 菜单和 调试 | 窗口 | 局部变量 菜单来显示窗口：
图 5.39 – 从调试菜单访问 Autos 和局部变量窗口
让我们先检查 i 和 currentString 变量，它们属于 TestLocalsAndAutos 方法：
图 5.40 – 局部变量窗口
另一方面，如果我们查看 i 变量，因为它是在断点作用域内的信息，这意味着 for 循环：
图 5.41 – Autos 窗口
这对窗口非常有用，可以一眼看到我们变量的所有可用信息。
重要提示
可以通过以下快捷键显示这些窗口：
Autos: Ctrl + D，然后按 A 键
局部变量: Ctrl + D，然后按 L 键
调用栈
虽然我们在 监视窗口、快速监视 和 Autos 和局部变量窗口 部分看到的窗口使用方法是错误纠正中最常用的方法，但我们还有一些其他方法来跟踪方法之间的调用流程。
其中一个这样的窗口称为 调用栈，当我们放置断点时，将显示到达相同点的调用堆栈。要显示窗口，我们必须从 调试 | 窗口 | 调用栈 中选择选项。此菜单项仅在应用程序运行时可用，但如果你希望窗口在每次调试会话中显示，可以使用图钉图标将其停靠。
在 图 5.42 中，我们执行了与 自动和局部变量窗口 部分相同的代码，并在相同的断点处停止。如图所示，调用栈 窗口显示了应用程序由于断点而停止时所在的代码行，以及为达到断点而调用的方法之间的调用集合：
图 5.42 – 调用栈窗口
在 图 5.42 中，如果我们双击任何一个调用，我们还可以看到每个调用中应用程序的状态。这将使我们能够看到在应用程序流程中的某个特定点的属性和变量的值。
这将带我们到调用方法的代码部分，并且将以不同的颜色突出显示，以便我们不会与断点的颜色混淆。
重要提示
要显示 调用栈 窗口，您也可以按下 Ctrl + Alt + C 键。
立即窗口
另一个非常有兴趣的窗口是 立即 窗口。这个窗口，我们可以从 调试 | 窗口 | 立即 菜单中打开，将允许我们评估表达式、执行语句，并打印变量和属性的值。
当您打开这个窗口时，您一定会对里面什么都没有感到惊讶。这是因为这个窗口将允许您在上面写入，输入变量或属性的名称，甚至调用方法（如果它们在作用域内），加上您在编写表达式时将拥有所有潜在的 IntelliSense 功能。IntelliSense 是 Visual Studio 的自动完成帮助，它通过人工智能得到增强，我们将在 第七章，使用 AI 和代码视图高效编码 中更多地讨论它。
在 图 5.43 中，TestLocalsAndAutos 方法的调用再次执行，我们获得了主 currentString 字符串的子串：
图 5.43 – 立即窗口
这个窗口的一个很大的优点是，我们可以执行尽可能多的表达式，保留我们获得的所有结果列表以及输入的表达式。
重要提示
如果您按下 Ctrl + Alt + I 键，可以显示 立即 窗口。
摘要
Visual Studio 为调试源代码提供了许多选项。在本章中，我们学习了什么是断点，不同类型的断点，以及我们可以激活以跟踪变量和属性数据的关联窗口。这些信息至关重要，因为它将帮助您在遇到问题时解决代码中的问题。
在下一章，第六章**，添加代码片段中，你将了解代码片段的概念，它允许你在不同的项目中重用常见的代码片段，并快速调整以满足你的需求。
第二部分：工具和生产力
在这部分，你将学习如何利用 Visual Studio 2022 提供的工具，以及如何通过一些技巧和窍门提高你的生产力。
本部分包含以下章节：
-
第六章, 添加代码片段
-
第七章, 使用 AI 和代码视图高效编码
-
第八章, Web 工具和热重载
-
第九章, 样式和清理工具
-
第十章, 发布项目
第六章：添加代码片段
编码是一项美好的活动，但有时我们有一些重复的语句来解决一些已知的情况，这使得编码更像是一个单调的过程。“代码片段”是重用代码的好资源，在需要的地方可以重用代码片段。Visual Studio 有一些默认的代码片段，我们可以在编码时使用，但我们也有一些工具来创建自己的代码片段。
在本章中，我们将学习 Visual Studio 如何通过代码片段帮助我们更快地编写代码，以及如何创建自己的代码片段。
我们将回顾以下关于代码片段的主题和功能：
-
什么是代码片段？
-
创建代码片段
-
删除代码片段
-
导入代码片段
让我们开始了解代码片段的概念以及它们在 Visual Studio 中的工作方式。
技术要求
要完成本书本章的演示，你必须已经安装了带有 Web 开发工作负载的 Visual Studio 2022，如第一章“Visual Studio 2022 入门”中所示。拥有我们在第四章“创建项目和模板”中创建的 SPA 基础项目非常重要。
你可以在以下链接中检查对WeatherForecastController.cs所做的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/blob/main/Chapter06/WeatherForecast.cs。
什么是代码片段？
通过创建生成常见语句的模板，代码片段是一种简单且易于重用代码的方式，例如条件语句、循环或注释结构。
Visual Studio 为几乎所有支持的技术和编程语言提供了许多默认的代码片段。在 Visual Studio 中有许多使用代码片段的方法，让我们来看看。
重要提示
代码片段是软件开发中的一个常见概念。几乎所有的 IDE 和代码编辑器都提供代码片段或具有包含代码片段的扩展。
使用在第四章“创建项目和模板”中创建的 SPA 项目，你将在WeatherForecastController.cs文件中通过导航创建一个新的条件来在Get方法中返回一个空集合。只需写下单词if，就可以看到 Visual Studio 建议的代码片段（见图 6.1）：
图 6.1 – Visual Studio 建议的 if 语句代码片段
由于条件语句是非常常见的代码片段，Visual Studio 为你提供了快速创建此代码的选项。你可以点击if或继续编写，如果你不想执行任何操作。你也可以按tab键两次来自动创建if语句。
在智能代码补全（也称为 IntelliSense，关于这一点我们将在 第七章，*使用 AI 和代码视图高效编码）建议中有一个选项，你可以看到所有按你输入的字符过滤的代码片段。参见 图 6.2 中标记为红色的代码片段过滤器：
图 6.2 – Visual Studio 中的代码片段过滤器
当 if 条件的代码片段被突出显示时，你可以按 tab 键两次来生成 if 语句的代码，包括括号（见图 6.3）：
图 6.3 – Visual Studio 创建的 if 语句
你将得到一个 if 语句，包括花括号和默认值 true。你需要将 true 替换为你的条件。在这种情况下，你可以添加一个条件，当操作系统是 Linux 时返回一个空集合：
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
if (OperatingSystem.IsLinux())
{
return new List<WeatherForecast>();
}
return Enumerable.Range(1, 5).Select(index =>
new WeatherForecast
{
Date = DateTime.Now.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = Summaries[Random.Shared.Next
(Summaries.Length)]
})
.ToArray();
}
在前面的代码块中，我们在 Get 方法中的默认逻辑之前添加了一个条件，以检查应用程序运行的操作系统是否为 Linux。在条件内部，我们返回一个空列表。
默认情况下，C# 包含了许多有用的代码片段，但以下是最受欢迎的：
-
try: 为try/catch语句创建结构 -
for: 使用局部变量i生成for语句 -
ctor: 自动创建类的构造函数 -
switch: 生成一个switch语句 -
prop: 在当前类中创建一个新的属性
你可以在 C# 代码中尝试一些这些代码片段，以查看 Visual Studio 生成的代码，并在需要时使用它们。
让我们看看使用 CSS 文件的一个例子。导航到 custom.css CSS 文件（见图 6.4）：
图 6.4 – 在 Visual Studio 中加载的 custom.css 文件
在 custom.css 文件中，你可以编写 columns 属性，并查看 Visual Studio 如何建议一个代码片段。参见 图 6.5 中为此演示提供的代码片段：
图 6.5 – 当你输入单词 "columns" 时 Visual Studio 提供的代码片段
再次使用键 tab 两次，你可以自动生成这个属性的代码。参见 图 6.6 中生成的代码：
图 6.6 – 代码片段生成的代码
在这种情况下，Visual Studio 将为每个浏览器生成四个属性，以确保代码与所有浏览器兼容（Chrome、Mozilla 和其他）。我们可以保留默认的inherit值，因为此操作的提议只是为了查看 Visual Studio 如何生成代码。
现在，您已经准备好在 Visual Studio 中使用代码片段。您可以识别 Visual Studio 提供的哪些建议是代码片段，以及如何过滤它们。现在是时候学习如何创建自己的代码片段并在代码中使用它们了。
创建代码片段
要在 Visual Studio 中创建代码片段，我们需要创建一个具有snippet扩展名的文件。此文件具有 XML 格式，并且有一个基本模板，我们可以更新它以包含代码片段的信息。以下代码是一个模板示例：
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/
VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title></Title>
<Author></Author>
<Description></Description>
<Shortcut></Shortcut>
</Header>
<Snippet>
<Code Language="">
<![CDATA[]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
让我们回顾一下这个 XML 中的所有属性，并了解如何创建我们的第一个代码片段。
在标题部分，我们有以下内容：
-
标题：名称或一般信息 -
作者：创建者或作者 -
描述：您的代码片段执行的操作 -
快捷键：在您输入时调用代码片段的快捷键
在Snippet中，我们有以下内容：
-
语言：代码的编程语言 -
[CDATA[]：包含代码
现在，我们可以创建一个代码片段来检测代码正在运行的操作系统是 Linux 还是不是：
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Title>If Linux condition</Title>
<Author>Myself</Author>
<Description>Conditional to now if the
operating system is Linux</Description>
<Shortcut>ifln</Shortcut>
</Header>
<Snippet>
<Code Language="CSharp">
<![CDATA[if (OperatingSystem.IsLinux())
{
return new List<WeatherForecast>();
}]]>
</Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>
您可以在文档中创建一个新文件夹或为此次活动创建任何新文件夹，并将文件保存为snippet扩展名（见图 6.7）：
图 6.7 – Windows 资源管理器中的代码片段文件
现在，最后一步是将此文件夹添加到 Visual Studio 中的代码片段部分。导航到工具 | 代码片段管理器，在语言下拉菜单中，选择CSharp（见图 6.8）：
图 6.8 – Visual Studio 中的代码片段管理器
重要提示
您可以使用Ctrl + K快捷键，然后按Ctrl + B打开代码片段管理器。
语言选项包括 Visual Studio 支持的所有编程语言和技术，这取决于已安装的工作负载。
您可以点击添加...并选择您的代码片段创建的文件夹。
添加文件夹后，您将在列表中看到一个新文件夹，包括新的代码片段。如果您选择此代码片段，您将在右侧面板上看到详细信息，如图图 6.9所示：
图 6.9 – if linux 条件代码片段的详细信息
现在，您已经准备好在任何 C#文件中使用您的代码片段。打开WeatherForecastController.cs文件，并在Get方法中尝试您的新代码片段：
Figure 6.10 – 在 Visual Studio 中使用 if linux 条件代码片段
您可以在图 6.10中看到 Visual Studio 如何建议您的新代码片段，在工具提示中，有您提供的描述。通常，您可以按tab键两次来生成代码片段的代码。
重要提示
想要了解更多关于如何创建和设计代码片段的信息，请查看官方文档：docs.microsoft.com/visualstudio/ide/code-snippets。
到目前为止，您已经创建了您的第一个代码片段，并知道如何创建满足您需求的代码片段。但您还可以使用代码片段执行其他操作。所以，让我们看看如何在下一节中删除代码片段。
删除代码片段
由于人为错误，我们可能会添加不需要的代码片段，或者可能选择了错误的代码片段。在这些情况下，Visual Studio 有一个选项可以删除代码片段。要查看此选项，导航到CodeSnippets文件夹。此文件夹包含您在创建代码片段部分中包含的代码片段。如果您使用了不同的名称，请选择正确的文件夹。您可以在图 6.11中看到删除按钮的位置：
Figure 6.11 – 代码片段管理器中的删除按钮
删除按钮将删除整个文件夹，包括其中的所有代码片段。在 Visual Studio 2022 中，无法逐个删除代码片段，因此我们需要为我们的代码片段创建一个合适的文件夹名称。删除文件夹后，Visual Studio 将不再建议代码片段。
重要提示
当您在 Visual Studio 中删除代码片段时，原始文件和文件夹不会从您的本地系统中删除。只有 Visual Studio 中对文件的引用将被删除。
到目前为止，您已经学会了如何创建和删除代码片段。我们还可以在 Visual Studio 中导入代码片段，所以让我们看看如何操作。
导入代码片段
如果我们想在代码片段管理器中已创建的文件夹中包含代码片段，我们可以使用导入…选项：
Figure 6.12 – 代码片段管理器中的导入…按钮
在模态窗口中单击.snippet扩展名（见图 6.13）：
Figure 6.13 – 在文件系统中选择代码片段文件 (.snippet)
选择在创建代码片段部分中创建的代码片段，然后单击打开。最后，您必须通过选择代码片段的位置文件夹并单击完成来完成导入过程：
图 6.14 – 导入代码片段的选择位置
完成导入后，你会看到代码片段被添加到所选文件夹中。请参阅 图 6.15 中的导入代码片段：
图 7.1 – 安装代码地图和实时依赖验证功能
现在我们已经了解了技术要求，让我们学习如何使用它们，以充分利用 Visual Studio。
理解 CodeLens
CodeLens 是一套强大的工具，用于在代码中查找引用、查看不同组件之间的关系、查看代码变更历史、关联的缺陷、代码审查、单元测试等。
在本节中，我们将分析此功能最重要的工具。让我们先看看我们如何在我们的代码中找到引用。
在代码中查找引用
CodeLens 从我们第一次使用 Visual Studio 时就在我们的代码文件中呈现。我们可以通过访问任何类、方法或属性并验证是否出现一个句子来检查这一点，该句子指示项目中关于它的引用数量。在图 7.2 中，我们可以看到我们打开了WeatherForecastController.cs文件，这显示我们找到了关于WeatherForecastController类的三个引用：
图 7.2 – WeatherForecastController 类的引用
这意味着WeatherForecastController类在我们的项目中使用了三个地方。如果我们通过点击标题为WeatherForecastController类的图例 – 特别是第14行和16行：
图 7.3 – WeatherForecastController 类中引用的代码位置
不仅如此，我们还可以定位到任何找到的行上，这将显示围绕引用的四个最近代码行的部分。这样，我们可以更好地了解使用它的目的，如图 7.4 所示：
图 7.4 – 找到的代码引用的预览
如果我们是在一个新项目中，需要快速了解代码的某些部分的功能，这非常有用。
现在，让我们看看 CodeLens 的一个实用工具，它将允许你以可视化的方式看到代码之间的关系。
重要提示
有时，即使引用的数量为零，也可能有对其他 GUI 文件的引用，例如.xaml和.aspx文件。
代码图
代码图是一种快速高效地可视化代码中关系的方法。这个工具允许创建，正如其名称所示，从代码中生成的可视化地图。使用这个工具，我们将能够看到实体的结构、它们的不同属性和关系，这让我们知道我们做出的更改可能产生多大的影响。
创建代码图有几种方法。第一种是通过选择.dgml扩展名，我们将被指示从解决方案资源管理器、类视图或对象浏览器中拖动文件，如图 7.5 所示：
图 7.5 – 空的代码图文件
让我们做一个测试 – 点击SPAProject.Controllers命名空间。这将显示WeatherForecastController类，如图 7.6 所示：
图 7.6 – 将要拖入代码图文件的 WeatherForecastController 类的可视化
接下来，将WeatherForecastController类拖动到代码映射文件中。这将自动生成一个图表，我们可以看到拖动的class、包含它的namespace，以及它所在的.dll文件，如图图 7.7所示：
Figure 7.7 – 代码映射中的 WeatherForecastController 类
此外，如果我们展开图中的WeatherForecastController类，我们将看到类中包含的成员，例如其属性和行为，以及作为同一类一部分可以找到的关系：
Figure 7.8 – 通过代码映射找到的关系
在图 7.8中，我们可以看到WeatherForecastController类的代码映射，其中所有成员都已展开。这迅速展示了字段、属性和方法之间的关系。
从源代码创建代码映射的另一种方法是转到我们感兴趣的成员所在的文件，例如WeatherForecast.cs文件。一旦我们打开了文件，我们可以将光标定位在类、方法、属性或字段上，然后右键单击，这将显示代码映射 | 在代码映射上显示选项，如图图 7.9所示：
Figure 7.9 – 从类的上下文菜单中将类添加到代码映射的选项
此选项将创建一个新的.dgml文件，或者如果您已经创建了一个，就像我们的情况一样，在之前打开的文件中添加带有其相应关系的引用。
重要提示
如果您想将代码映射图居中，您可以在任何时候点击图表的任何空白区域来居中它。同样，如果您双击图表中的任何实体或成员，相应的代码将打开以在图表旁边查看。
由于向图中添加了新的类，我们可以看到WeatherForecast类正在WeatherForecastController类的Get方法中使用，如图图 7.10所示。这样，我们很容易就发现了这种关系：
Figure 7.10 – 通过代码映射显示的类之间的关系
重要提示
代码映射图中的箭头指示实体之间的关系，随着实体的选择而出现和消失，这为图表提供了更多空间和理解。我鼓励您选择图表中的每个元素，以便您可以看到完整的关系。
最后，如果我们想能够在不逐个添加实体的前提下看到我们的解决方案中的关系，从架构菜单中，我们可以选择为解决方案生成代码映射选项，如图图 7.11所示：
![Figure 7.11 – 在解决方案级别生成代码图的菜单选项
![img/Figure_7.11_B17873.jpg]
图 7.11 – 在解决方案级别生成代码图的菜单选项
这将启动生成整个解决方案相应代码图的进程。根据您代码中的引用数量，这个过程可能需要更多或更少的时间。
重要提示
虽然代码图只能在 Visual Studio Enterprise Edition 中创建，但您可以从任何版本的 Visual Studio 中查看它们，包括社区版，但除了企业版之外，您无法从任何版本编辑它们。
现在我们已经看到 CodeLens 如何帮助我们更好地、更快地理解代码，让我们看看 Visual Studio 中可用的窗口，它们将使我们能够轻松地处理代码。
使用代码视图
除了 CodeLens 之外，还有几个窗口可以帮助我们更快地检查项目及其成员的类。在本节中，您将了解它们以及它们如何帮助您在 Visual Studio 中分解项目的代码。
类视图
类视图是一个窗口，允许您查看 Visual Studio 项目的元素，如命名空间、类型、接口、枚举和类，使您能够快速访问这些元素中的每一个。也许如果您在 Visual Studio 中处理过小型项目，您可能不会认为它很有用。但像我一样，如果您处理的是可以包含多达 20 个或更多项目的解决方案，那么它是一个检查代码的绝佳选项。
要访问此窗口，您必须从菜单中选择视图 | 类视图选项，这将显示类视图窗口，显示当前打开的解决方案的所有元素，如图7.12所示：
![Figure 7.12 – 加载项目的类视图窗口
![img/Figure_7.12_B17873.jpg]
图 7.12 – 加载项目的类视图窗口
如您所见，通过一眼查看项目被划分到的命名空间，我们可以迅速了解我们项目的结构。如果我们展开每个命名空间下的节点，我们还可以看到这些命名空间中包含的不同类，如图7.13所示：
![Figure 7.13 – 显示 WeatherForecastController 类成员的类视图窗口
![img/Figure_7.13_B17873.jpg]
图 7.13 – 显示 WeatherForecastController 类成员的类视图窗口
此外，如果我们选择项目中的任何元素，例如一个类，我们将在窗口的下半部分看到组成它的属性和方法（如图7.13所示）。
这个窗口的另一个巨大优势是，您甚至不需要重新编译项目来查看更改，因为它们将自动且即时地完成。
在图 7.13 的窗口顶部，我们还可以看到一系列按钮，我们可以使用这些按钮来创建新文件夹，在选定的元素之间导航，配置显示选项，并可能将一个类添加到代码映射文件中。
这当然是一个在项目类之间导航的极好窗口，但如果我们想导航到不属于我们项目的类呢？在这种情况下，对象浏览器可以帮助我们，我们将在下一部分进行探讨。
对象浏览器
对象浏览器是一个自 Visual Studio 之初就存在的非常有用的窗口。此窗口包含有关项目中使用的所有程序集的信息，并允许您深入了解它们。要访问此窗口，我们可以从 视图 | 对象浏览器 菜单中进行操作。
一旦我们选择 对象浏览器 选项，它将打开并加载作为我们解决方案一部分使用的程序集。我们可以看到程序集列表相当长，这是因为我们可以检查我们使用的框架中的程序集以及我们自己创建的程序集，如图 7.14 所示：
图 7.14 – 对象浏览器窗口
如图 7.15 所示，在顶部有一个过滤器，我们可以展开以选择我们想要检查的框架或库集：
图 7.15 – 显示对象浏览器选项以在各个类之间导航
此列表（在先前的屏幕截图中）将根据在 Visual Studio 安装中选择的负载而变化。
您还将拥有一个强大的搜索引擎可供使用，您可以在其中输入搜索词，它将返回所有可能的匹配项，包括找到的任何类型的数据，如图 7.16 所示：
图 7.16 – 在对象浏览器中执行搜索
最后，如果您从列表中选择任何项，您将在右侧面板中看到一个第二列表，如图 7.17 所示，它将包含所选类型的所有成员，例如它们的方法、属性、结构、枚举以及其他可用的类型，底部是所选成员的描述：
图 7.17 – 在对象浏览器中显示类的成员
如您所见，此窗口非常有用，不仅可以看到您自己的项目成员，还可以查看整个框架的成员。
现在，让我们看看一个名为 IntelliCode 的新功能，它将使我们能够更高效地编写代码。
使用 Visual IntelliCode
IntelliCode 是集成到 Visual Studio 2022 中的工具，它通过人工智能使您能够更快地编写代码。这是一个经过训练的工具，使用了 GitHub 上托管的上千个流行开源项目，尽管它已经在 Visual Studio 2019 中开始展示其潜力的一小部分，但所有功能都是在这一版本中实现的。
当您编写代码时，IntelliCode 可以建议模式和样式，根据您所处的上下文提供准确的建议，因此您可以完成代码行。IntelliCode 还能够显示您最可能使用的函数和属性，并支持多种编程语言的完成，如下所示：
-
C#
-
C++
-
XAML
-
JavaScript
-
TypeScript
-
Visual Basic
让我们以下小节中检查这个神奇工具是如何工作的。
整行完成
IntelliCode 在帮助您完成整行代码方面可以非常有用。最好的是，代码预测将根据您的代码中的不同条目显示，如下所示：
-
变量名称
-
函数名称
-
使用的 IntelliSense 选项
-
项目中使用的库
在 Visual Studio 2022 中，有两种方法可以接收整行完成提示：
- 第一种方法是在您编写代码时自动提供的。在图 7.18中，我们可以看到这一功能是如何工作的，因为我们开始在一个名为
WeatherForecast.cs的文件中编写一个新的string类型的属性：
图 7.18 – IntelliCode suggesting a full line completion
根据 IntelliCode 模型学习到的所有内容，它建议一个新的属性名为Description，我们可以通过按tab键来接受它，或者通过继续编写代码来拒绝它。
- 通过 IntelliCode 使用第二种整行完成的方法是通过从 IntelliSense 建议列表中选择一个项目。例如，如果我们为
WeatherForecast类创建一个构造函数并输入字母S，将出现一个 IntelliSense 建议列表。我们可以浏览每一个，在大多数情况下，IntelliCode 将显示自动完成建议，如图图 7.19所示：
图 7.19 – IntelliCode 推荐完成 IntelliSense 元素
我们可以通过按tab键两次来接受这一行，或者继续编写代码以忽略建议。
现在我们已经看到了两种整行完成的方法，让我们看看 IntelliCode 是如何根据其建议帮助我们编写代码的。
IntelliCode 建议
IntelliCode 建议是一种辅助方式，在我们的项目中执行类似的代码编辑。基本上，IntelliCode 会跟踪我们正在编写的代码，如果它检测到可以应用于我们代码的代码重复，它将通过建议让我们知道。
IntelliCode 令人惊讶的一点是，它基于代码的语义结构，因此它还可以帮助我们检测我们可能错过的变化，例如公式的变化。
例如，假设我们有一些方法可以让我们计算一些静态值，如下面的示例所示：
public float Calculate1()
{
var minValue = 25;
return (float)((minValue + 126) * (Math.PI / minValue));
}
public float Calculate2()
{
var minValue = 88;
return (float)((minValue + 126) * (Math.PI / minValue));
}
我们可以看到计算遵循相同的结构，唯一改变的是minValue变量的值，因此我们决定创建一个新的方法，名为Calculate，它将通过接收一个参数来执行相同的操作：
public float Calculate(int value)
{
return (float)((value + 126) * (Math.PI / value));
}
随后，我们决定将Calculate1方法的代码替换为调用新创建的Calculate方法：
public float Calculate1()
{
var minValue = 25;
return Calculate(minValue);
}
如果我们进入Calculate2方法并开始输入Calculate方法的名称，IntelliCode 提示将会出现，如图图 7.20所示：
图 7.20 – IntelliCode 建议代码重复的实现
IntelliCode 提出的建议告诉我们，我们可以将相同的调用应用于新方法，我们可以通过按tab键来实现，或者我们可以忽略建议并继续编写代码。
重要提示
非常重要的是要注意，IntelliCode 建议仅在开发会话期间可用。这意味着如果你重新启动 Visual Studio，之前的提示将不会再次出现。
正如我们所见，IntelliCode 通过建议提供了一种更快地编写代码的方法，这可以每天为你节省几分钟。
摘要
Visual Studio 包含一系列工具和窗口，在开发项目时可以为我们提供很大帮助。
我们已经看到 CodeLens 如何帮助我们通过代码和视觉方式找到引用和关系。同样，我们已经研究了不同的代码窗口，这些窗口有助于检查项目中的类成员。最后，我们已经看到 IntelliCode 是 IDE 的一个新功能，它通过人工智能帮助我们通过各种建议快速编写代码。
在第八章，“Web 工具和热重载”中，我们将看到几个专注于 Web 开发的工具，以及 Visual Studio 2022 中包含的新功能，该功能可以帮助我们在更改后重新加载 Web 项目。
第八章：Web 工具和热重载
Visual Studio 有许多工具可以用于 .NET 应用程序和所有 Microsoft 生态系统，但它也有许多工具用于其他编程语言和技术。这包括 Web 开发技术，如 JavaScript、CSS 和 HTML。
在 Visual Studio 2022 中，还有一些新的改进可以帮助我们在前端更快地编码。这意味着为 Web 开发者提供与 CSS、JavaScript 和 HTML 一起工作的设计工具。有了这些工具，您在处理这些技术时不需要使用其他编辑器或 IDE 来完成您的活动。
在本章中，您将了解 Visual Studio 中的 Web 工具，以及如何利用它们在开发一些常见语句时简化操作。这些工具将帮助您自动生成代码，安装和指定 Web 库的版本，检查 JavaScript 中的代码，并自动刷新应用程序以实时查看更改。
我们将学习以下与 Web 工具相关的话题：
-
使用脚手架
-
安装 JavaScript 和 CSS 库
-
JavaScript 调试
-
热重载
我们将开始使用脚手架，这是创建项目文件的主要工具，使用 Visual Studio 2022 中默认包含的模板。
技术要求
要完成本书本章的演示，您必须之前已安装带有 Web 开发工作负载的 Visual Studio 2022，如 第一章 中所示，Visual Studio 2022 入门。拥有在 第四章 中创建的 SPA 基础项目非常重要，创建项目和模板。
您可以通过以下链接检查本章完成的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter08。
使用脚手架
脚手架是 Visual Studio 中对开发者最有益的功能之一。通过使用脚手架，我们可以通过点击一些选项来自动生成代码，从而节省时间。
必须明确指出，脚手架是软件开发中的一个流行概念，这并不仅限于 Visual Studio。通常，脚手架与 模型-视图-控制器（MVC）组件的代码生成相关联。MVC 是创建 Web 应用程序的一个流行模式。使用 MVC，您必须将创建 Web 应用程序的责任分配到三个不同的组件：
-
模型：负责保存数据
-
视图：与用户交互的界面
-
控制器：负责处理在视图中用户执行的所有操作
要在 Visual Studio 中使用脚手架，您可以在解决方案资源管理器中选择文件夹，然后右键单击它以打开选项来选择 新建脚手架项…（见 图 8.1）:
图 8.1 – 项目菜单中的新脚手架项…选项
使用此选项，我们可以在项目中创建与 MVC 结构相关的新元素。
点击新脚手架项…后，Visual Studio 将提供我们可以使用脚手架工具创建的元素列表：
图 8.2 – 添加新脚手架项的模态选项
在这种情况下，我们将选择GET、POST、PUT和DELETE动词。选择名称GeneratedController.cs并点击添加：
图 8.3 – 创建具有读写操作的 API 控制器
Visual Studio 将默认在Controllers文件夹中生成一个新的控制器，并带有端点：
图 8.4 – 在 Controllers 文件夹中创建的 GeneratedController
创建基本模板后，您可以替换数据类型和方法名称以匹配您的模型。
让我们再举一个使用脚手架创建视图页面的例子。再次使用添加新脚手架项选项，我们将选择Razor 视图（参见图 8.5）：
图 8.5 – 添加新脚手架项中的 Razor 视图选项
我们可以选择一些模板，包括空。在这种情况下，您应该选择创建，取消选中使用布局页选项，并选择默认包含在模板中的WeatherForecast模型（如图 8.6所示）：
图 8.6 – 使用脚手架创建新视图页面的配置
通过点击Pages文件夹，我们可以完成创建过程。Visual Studio 将分析模型，然后为模型中的每个属性创建一个新的表单，考虑到属性类型（参见图 8.7）：
图 8.7 – 使用脚手架和 WeatherForecast 模型创建的视图
在View.cshtml文件中，有一个从WeatherForecast模型创建新项的模板。脚手架添加了一个标签、一个输入和一个用于控制错误的 span，如本例所示：
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger">
</span>
</div>
重要提示
脚手架与 ASP.NET 代码相关；我们可以创建控制器和视图，但不能创建 JavaScript 组件。
现在您已经知道如何在项目中使用脚手架并使用 Visual Studio 提供的一些基本模板来节省时间。让我们看看 Visual Studio 中的另一个工具，它可以帮助我们在项目中包含 JavaScript 和 CSS 库。
安装 JavaScript 和 CSS 库
要开始一个项目，我们可以使用 Visual Studio 的模板来轻松创建一个 概念验证（POC）、演示或基础项目，但项目在功能和服务的增长方面存在可能性。在这种情况下，我们将需要包含库以潜在化和优化我们的项目，并扩展基础模板中集成的功能。
要在我们的 SPAProject 中包含新的 JavaScript 库，您可以打开 ClientApp 文件夹。在菜单中，您将找到 客户端库… 选项（见 图 8.8）：
图 8.8 – Visual Studio 中的客户端库…功能
在点击此选项后，您将获得一个模态窗口，允许您从不同资源包含 Web 库。默认情况下，cdnjs 被选中，但您也可以选择 Visual Studio 支持的其他来源：
图 8.9 – Visual Studio 2022 支持的提供者
我们可以在项目中包含三个公开和受信任的 CSS 和 JavaScript 库。Visual Studio 支持不同的库来源；让我们来回顾一下：
-
cdnjs: Cloudflare 支持的开源库的快速可靠的内容分发
-
filesystem: 我们本地系统中的自定义包
-
jsdelivr: 集成 GitHub 和 npm 的免费内容分发网络
-
手动包含
libman.json文件，在 json 文件中包含库，然后使用 Visual Studio 安装它们。有关更多信息，您可以在docs.microsoft.com/aspnet/core/client-side/libman/libman-vs查看文档。
要分析 Visual Studio 如何将库添加到您的项目中，您应该选择 cdnjs 并通过 bootstrap. Bootstrap 是一个强大的库，可以轻松使用 CSS 类创建 Web 接口。有关更多信息，您可以在 getbootstrap.com/ 查看官方文档和快速入门指南。
一旦开始输入，Visual Studio 将建议与输入的键词相关的库列表（见 图 8.10）：
图 8.10 – Visual Studio 推荐的库
在选择 bootstrap@5.1.3（见 图 8.11）之后。您可以选择与库关联的所有组件，但通常您只使用精简版本。您可以使用 bootstrap.min.js 文件选择所需的文件，这是使用此库所需的唯一文件：
图 8.11 – 选择的自定义库和 bootstrap.min.js 文件
现在，您可以通过点击 安装 将 Bootstrap 包含到我们的项目中。
安装此库后，你将在 ClientApp 文件夹中看到一个包含所有与 Bootstrap 相关文件的新文件夹。此外，你还将看到一个名为 libman.json 的新文件，该文件包含使用 Visual Studio 在项目中安装的库：
图 8.12 – 在 SPAProject 中添加的 Bootstrap 库
此文件帮助 Visual Studio 在项目仓库中没有这些库的文件时从服务器获取库。
Visual Studio 将自动执行所有过程并创建 libman.json 文件，我们可以在此文件中看到每个库的版本和项目中的目标文件夹。
你现在知道如何使用 Visual Studio 支持的不同选项将 JavaScript 和 CSS 库包含到你的项目中。让我们学习如何在 Visual Studio 中调试 JavaScript 代码，以便在开发过程中快速找到并解决问题。
JavaScript 调试
当我们的应用程序出现异常行为、问题或阻塞时，我们必须调试项目。Visual Studio 支持多种编程语言的调试，包括 JavaScript。考虑到我们可以使用相同的 IDE 调试前端（例如，使用 JavaScript）和后端（例如，使用 C#），这是一个很棒的功能。
要使用 Visual Studio 调试 JavaScript 和 TypeScript 代码，我们需要检查 脚本调试（启用） 选项。此选项位于项目的执行菜单中：
图 8.13 – 项目执行菜单中的脚本调试（启用）选项
然后，我们可以在调试模式下运行项目，但在那之前，我们需要添加一个断点来检查代码。导航到 ClientApp | src | components | Counter.js 并在行号 13 处创建一个新的断点（见 图 8.14）：
图 8.14 – Counter.js 内 incrementCounter 方法的断点
现在，使用横幅中的选项或按 F5 执行项目，然后导航到计数器模块。一旦你点击 JavaScript 中的 incrementCounter 方法。在 图 8.15 中，你可以看到这个预期行为：
图 8.15 – 在 incrementCounter 方法中设置断点时的调试过程
在这一点上，我们可以检查此文件中的变量——例如，在 图 8.16 中，我们可以看到 Counter.name 和 currentCount 的值：
图 8.16 – 调试期间检查 Counter.name 和 currentCount
Counter.name 等于 "Counter"，currentCount 等于 0。在执行 incrementCounter 异步方法后，currentCount 状态中的变量将具有 1 的值。
你可以使用选项来执行与检查变量的工作流程相关的代码行，如图 8.17 所示：
图 8.17 – 调试过程步骤覆盖和工具
你现在可以在 Visual Studio 中调试 JavaScript 代码，并使用我们在 第五章 中回顾的相同工具和操作，调试和编译你的项目。
在下一节中，我们将回顾 Visual Studio 2022 中的一个新功能，该功能在代码中进行更改后刷新 UI。
热重载
多年来，C# 开发者一直在等待一个功能，允许他们看到 Web 应用程序中的实时更改。这个挑战的难点在于 C# 作为一种编程语言的直观性，因为 C# 是一种编译型语言。编译型语言需要转换为低级语言，以便由解释器使用，这个过程在机器上消耗时间和资源。在 图 8.18 中，你可以看到一个新的火焰形状图标。点击此图标后，你将在浏览器中刷新更改，或者你可以选择在文件保存时热重载选项，在保存更改后自动重新加载 Web 应用程序：
图 8.18 – Visual Studio 执行期间启用的热重载选项
热重载功能有一些设置，我们可以根据需要修改。当启用热重载按钮时，你可以使用设置选项访问功能，或者你可以导航到工具 | 选项 | 调试 | .NET / C++ 热重载：
图 8.19 – Visual Studio 2022 中热重载的设置
让我们回顾这些选项：
-
在调试时启用热重载和继续编辑：此选项在调试模式下启用热重载。
-
在启动时启用热重载：此选项启用热重载而不进行调试。
-
在文件保存时应用热重载：在任意文件中进行更改并保存后，应用程序将重新加载。
注意
如果你没有启用在文件保存时应用热重载选项，你需要使用热重载按钮来刷新 Web 应用程序并查看更改。
要在 Visual Studio 中测试此功能，你可以通过按 F5 或使用 NavMenu.js 文件中的选项来运行项目，并将 NavLink 的名称从 Counter 更改为 Counter Module：
图 8.20 – NavMenu.js 中的 Counter Module NavLink
在使用Ctrl + S或文件 - > 全部保存菜单保存文件后，你将在网页浏览器中实时看到更改。检查图 8.21中显示的更改：
图 9.1 – 图像和 3D 模型编辑器单个组件选择
你可以在以下存储库中找到已添加到项目中的代码片段：
github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter09
使用 CSS 样式工具
对于前端 Web 开发者来说，拥有编辑 CSS 文件的工具是一个优势，因为它允许他们快速轻松地编辑这些文件。这就是为什么 Visual Studio 包含几个在创建和编辑这些文件时非常有帮助的工具。
让我们从检查 CSS3 代码片段开始。
CSS3 代码片段
即使在今天，样式显示仍然存在跨浏览器兼容性问题。肯定发生过这样的情况，当你实现一个 CSS 属性时，它在每个浏览器上看起来都不同。
正是因为这个原因，Visual Studio 实现了 CSS3 代码片段完成系统，它允许跨浏览器兼容性，而无需为每个浏览器编写代码。
为了以实际的方式看到这一点，我们可以打开SPAProject | ClientApp | src | components | NavMenu.css文件，并定位到.box-shadow样式。在这个样式内，我们可以开始输入术语border-radius，这将显示 IntelliSense 推荐列表，如图 9.2 所示：
图 9.2 – border-radius 术语的推荐
您可以看到这个列表中有两种类型的图标，一些是蓝色的几何形状，而另一些是白色的正方形。在这些图标中，我们感兴趣的是白色图标，因为它们是 CSS3 片段。我们可以使用键盘上的键滚动列表，一旦我们选择了感兴趣的片段，只需按两次 tab 键，这将导致实现跨浏览器的 CSS3 片段，如下所示：
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-moz-border-radius: inherit;
-webkit-border-radius: inherit;
border-radius: inherit;
}
在最常见的多浏览器 CSS3 样式中，我们可以找到以下内容：
-
对齐样式
-
动画样式
-
背景样式
-
边框样式
-
盒子样式
-
列样式
-
弹性样式
-
网格样式
-
遮罩样式
-
文本样式
-
过渡样式
如您所见，这些片段可以通过有效攻击跨浏览器兼容性来帮助您创建样式。现在让我们看看 Visual Studio 如何通过缩进来帮助我们更快地理解 CSS 样式。
分层 CSS 缩进
样式缩进是一种视觉辅助工具，通过在行的开头显示空格来显示样式的内容，以及属于父样式的子样式，可以显著提高生产力。
Visual Studio 允许您在样式文件中创建快速缩进。例如，如果您想创建一个名为 .main 的样式以及影响 .main 样式内所有 div 元素的子样式，如下所示：
.main {
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.main div {
border: 25px;
}
在原则上，如果您在相同的缩进级别编写了样式，您可以通过转到 编辑 | 高级 | 格式文档 菜单来应用缩进，从而对整个文档进行分层缩进，如下面的代码块所示：
.main {
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.main div {
border: 25px;
}
如果您只想对特定选择的样式集应用缩进，可以选择 编辑 | 高级 | 格式选择 选项。
注意
可以通过 工具 | 选项 | 文本编辑器 | CSS | 制表符 选项来自定义缩进值。
现在，让我们看看 Visual Studio 中的颜色选择器功能。
颜色选择器
在处理样式时，选择元素颜色的功能非常有用。幸运的是，Visual Studio 有一个内置的颜色选择器，虽然看起来非常简单，但它的工作做得很好。
为了测试它，让我们编辑在 分层 CSS 缩进 部分中创建的 .main 样式。输入 background-color: 属性，这将显示一个带有指定名称的预定义颜色列表的垂直显示，您可以选择。忽略此列表，而是输入 # 符号。立即，您将看到一个新的预定义颜色水平列表，如图 9.3 所示：
图 9.3 – 预定义颜色的水平列表
如果您想设置自定义颜色，可以点击颜色列表末尾的按钮，这将显示颜色选择器，如下所示：
图 9.4 – CSS 颜色选择器
这样，就可以从颜色选择器中选择一个颜色，改变颜色的色调，为所选颜色添加不透明度或透明度，甚至可以使用吸管工具从外部源，如图片中选取颜色。对于这个演示，我已经选择了 图 9.5 中看到的 #1b0b8599 代码的颜色：
图 9.5 – 从颜色选择器中选择自定义颜色
这个工具的一个巨大优势是它会将自定义选择的颜色内部存储，因此你可以在整个 CSS 文件中反复使用它们。例如，如果我们去 .main div 样式并想要将自定义颜色分配给 color 属性，我们会看到在水平颜色列表中，我们在 图 9.5 中使用的自定义颜色被列出，如下所示：
图 9.6 – 存储的先前使用的自定义颜色列表
毫无疑问，颜色选择器是我们需要分配自定义颜色时非常有帮助的工具。现在，让我们来看看 IntelliSense 如何帮助我们更快地在 CSS 文件中编写代码。
样式文件中的 IntelliSense
就像 IntelliSense 在创建源代码时可以提供非凡的帮助一样，它在创建样式文件时也非常有用。
让我们看看 IntelliSense 的实际使用示例。让我们转到 ClientApp | src | components | NavMenu.css 文件。在这个文件内部，让我们继续创建一个名为 .intellisense 的新样式，正如我们在这里可以看到的那样：
.intellisense{
}
如果我们定位在样式内部并按下 Ctrl + 空格键 组合键，将显示可以添加到新创建样式的所有属性的列表。如果我们开始输入属性名，它将开始过滤与我们所输入的匹配项的列表，正如 图 9.7 中所示：
图 9.7 – IntelliSense 显示推荐
此外，还可以从列表中选择一个项目，并通过按下 Tab 键来完成项目名称。
对于这个演示，让我们假设我们需要使用 background 属性，但我们不知道可以分配给它的可能值。IntelliSense 可以通过以可视化的方式向我们展示每个属性的用法来帮助我们，正如我们可以在以下图中看到的那样：
图 9.8 – IntelliSense 显示背景属性的可能的用法
不仅如此，IntelliSense 还会根据所选属性的上下文调整结果。例如，假设我们需要将一组字体分配给样式的font-family属性。如果我们输入font-family属性，Visual Studio 将提供与font-family属性相对应的值列表，如图图 9.9所示：
图 9.9 – IntelliSense 推荐的 font-family 属性值
如果我们想要为font-weight属性分配一个值，我们将根据此属性看到结果，如图图 9.10所示：
图 9.10 – IntelliSense 推荐的 font-weight 属性值
毫无疑问，IntelliSense 是创建样式的优秀辅助工具。现在，让我们继续分析图像编辑器。
处理图片
在 Visual Studio 中不太为人所知的工具是图片编辑器。此工具必须按照技术要求部分所述进行安装，毫无疑问，它可以帮助我们对项目中的图片进行基本编辑。
这里有一些图像编辑器有用的场景：
-
当我们需要调整图片大小比例时
-
当我们需要将某个部分的颜色更改为另一种颜色时
-
当我们需要旋转图片时
-
当我们需要在图片上添加文本时
-
当我们需要对图片应用过滤器时
在技术要求部分提到的仓库中，我已经添加了一个位于SPAProject | ClientApp | public | visualstudiologo.png的图片，用于使用图片编辑器进行不同的测试。
一旦我们打开图片（在这种情况下，visualstudiologo.png），我们将看到两个工具栏 – 一个位于左侧，称为图像编辑器工具栏，另一个位于顶部，称为图像编辑器模式工具栏，如图以下所示：
图 9.11 – Visual Studio 图像编辑器
首先，让我们分析图像编辑器工具栏。这是一个出现在编辑器左侧的栏，其中包含允许你在图片上执行某些操作的工具，例如添加几何形状或旋转图片。
在顶部，我们有图像编辑器模式工具栏。此工具栏包含执行高级命令的按钮，例如不规则选择、魔杖选择、平移、缩放和图像属性。
让我们看看一个实际例子。假设我们需要在图片上执行以下任务：
-
将图片转换为灰度。
-
水平翻转图片。
-
在图片上写上文本
Visual Studio Logo。
要执行这些任务，我们必须按照以下步骤依次进行：
- 在图像编辑器模式工具栏中，选择高级 | 过滤器 | 黑白选项，如图以下所示：
图 9.12 – 将图像转换为灰度
- 在图像编辑工具栏中，双击旋转图像按钮，如图所示：
图 9.13 – 旋转图像
- 选择文本工具，如图 9.14 所示：
图 9.14 – 选择文本工具
- 在属性窗口中添加文本
Visual Studio Logo，如图 9.15 所示：
图 9.15 – 在属性窗口中更改文本值
应用这些编辑后，我们将得到如图 9.16 所示的结果：
图 9.16 – 应用更改后的结果
最后一步是将图像保存，以便永久应用更改。通过这个例子，我们能够看到图像编辑器在需要编辑我们的图像时可以非常有用。
在下一部分，让我们了解代码分析如何帮助 .NET 开发者拥有干净和高质量的代码。
使用代码分析工具清理代码
Visual Studio 2022 包含一系列 C# 或 Visual Basic 代码分析器，允许我们在源代码中维护良好的代码质量和一致的风格。要默认使用此功能，项目必须在 .NET 5 或更高版本的框架版本上配置。为了区分编译错误，分析违规将显示为代码质量分析违规时的 CA 前缀，以及样式分析违规时的 IDE。
代码分析工具对应于代码质量分析和代码风格分析，因此我们将了解它们是什么，它们如何帮助我们，以及如何设置和运行带有代码清理配置文件。让我们首先看看如何利用代码质量分析。
代码质量分析
代码质量包括拥有安全、性能最佳和设计良好的源代码，以及其他特性。幸运的是，Visual Studio 可以通过默认启用的规则帮助我们维护高质量的代码。
为了以实际的方式可视化这些违规之一，让我们转到 Program.cs 文件，并在文件末尾添加以下行：
int value1 = 1;
int value2 = 1;
Console.WriteLine(Object.ReferenceEquals(value1, value2));
现在，要编译项目，右键单击项目名称，然后单击以下图示中的构建选项：
图 9.17 – 编译项目
在执行编译时，我们不会立即看到错误；然而，如果你导航到 int 到 ReferenceEquals 方法，因为它会因为值类型的 装箱 操作（从 值 类型转换为 引用 类型）而始终返回一个 false 值：
图 9.18 – 代码质量警告
重要提示
有时，Visual Studio 可能会通过错误上的灯泡图标建议代码修复来修复代码中的警告。您还可以在以下 URL 看到完整的代码质量规则列表：github.com/dotnet/roslyn-analyzers/blob/main/src/NetAnalyzers/Core/AnalyzerReleases.Shipped.md。
让我们现在看看应用于代码样式的规则。
与代码样式一起工作
代码样式是配置，对于 C#和 Visual Basic 开发者来说非常有用，可以帮助他们保持项目命名的一致性，尤其是当项目由团队的多位成员使用时。
可以为特定项目或安装在机器上的 Visual Studio 实例创建代码样式。
使用代码样式的办法是打开工具 | 选项 | 文本编辑器 | C# 或 Visual Basic | 代码样式 | 常规部分：
图 9.19 – 代码样式配置窗口
一旦我们在这个窗口中，我们将能够看到当前机器的代码样式配置。我们可以更改这些选项中的任何一个以适应我们需要的代码命名约定。
如果我们需要指定一个配置文件作为解决方案的一部分来应用，即使它在另一台机器上打开，我们也可以修改配置值。一旦我们有了想要在整个解决方案中遵循的设置，我们应该点击从设置生成 .editorconfig 文件按钮，如图所示：
图 9.20 – 生成配置文件的按钮
这将打开一个对话框，询问配置文件的名称和保存路径。在这个例子中，它已经被保存为config.editorconfig，如图所示：
图 9.21 – 创建的配置文件
如果我们打开我们创建的文件，文本编辑器将打开。在这里，我们将能够以文本格式看到应用的配置，并能够快速更改预选参数。这些更改将伴随解决方案，以确保所有属于项目且具有相同代码命名的源文件。
现在，让我们谈谈代码清理配置文件，它将控制代码清理时应应用哪些方面。
配置代码清理配置文件
代码清理配置文件是一种配置，您可以通过它来指定想要应用到项目中的代码清理类型。有多种方法可以访问配置文件窗口，但一般方法是前往工具 | 选项 | 文本编辑器 | 代码清理 | 配置代码清理菜单。这将显示以下图示：
图 9.22 – 配置代码清理窗口
正如您所看到的，可以配置两个清理配置文件，其中配置文件 1是默认执行的。同样，在窗口中我们有两个部分：
-
包含的修复程序列表包含我们希望在项目中应用的具体活动操作。
-
可用修复程序列表包含当前已禁用的操作，但我们可以随时将它们添加到活动操作中。
可以轻松启用或禁用修复程序，如图 9.22中标记的箭头按钮所示。
执行代码清理
一旦我们创建了代码清理文件并确定了将应用于清理的修复程序，让我们看看如何应用此清理。
要这样做，我们将光标移至编辑器的底部，然后按下带有扫帚图标的按钮，如图图 9.23所示：
图 9.23 – 执行代码清理的按钮
如配置代码清理配置文件子节所述，这将仅应用活动清理配置文件中配置的规则。例如，假设我们在默认配置配置文件中有以下配置：
图 9.24 – 一组选定的测试修复程序
然后，我们决定修改WeatherForecast.cs文件，使用以下无缩进的代码，并且包含一个未使用的using System.Data.Common命名空间：
using System.Data.Common;
namespace SPAProject
{
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC /
0.5556);
public string? Summary { get; set; }
}
}
现在，当我们应用代码清理时，将得到干净的代码，如图所示：
namespace SPAProject
{
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF => 32 + (int)
(TemperatureC / 0.5556);
public string? Summary { get; set; }
}
}
毫无疑问，这个工具可以帮助我们保持一致和干净的样式，无论我们是单独工作还是与开发团队一起工作。
注意
可以通过工具 | 配置 | 文本编辑器 | 代码清理中的在保存时运行代码清理配置文件选项配置 Visual Studio，在每次保存文件时执行代码清理。
摘要
在本章中，我们学习了 Visual Studio 为前端和后端开发者提供的不同工具。
我们学习了 CSS3 代码片段如何帮助我们快速创建跨浏览器兼容的样式。同样，层次化的 CSS 缩进有助于保持样式可读。此外，颜色选择器可以帮助我们快速选择颜色，我们还看到了当需要编辑 CSS 文件时 IntelliSense 的存在，最后，图像编辑器提供了有用的工具，如果我们需要对我们图像进行基本编辑的话。
在代码分析的情况下，我们已经了解到代码质量分析如何帮助我们拥有安全可靠的代码，而代码样式分析则帮助我们维护命名约定，无论我们是单独工作还是与开发团队一起工作。
在第十章，发布项目，你将学习在各个平台上发布 Web 项目的最常见方法。
第十章：发布项目
在完成一个 概念验证（POC）或 最小可行产品（MVP）（这意味着一个具有主要功能实现的演示或试点项目，如 第八章，Web 工具和热重载 中所述）后，我们需要将我们的更改部署到实际场景中，以查看项目的工作情况，并与我们的客户分享已发布的项目。Visual Studio 提供了一套部署我们项目的工具。我们可以选择在本地环境中部署项目的选项，但也可以使用云中的服务。
在本章中，您将学习如何通过几步点击即可使用 Visual Studio 2022 部署您的项目。这些工具将帮助您在需要部署时节省时间并降低复杂性。
我们将讨论和回顾以下主题，即使用 Visual Studio 2022 发布项目的选项：
-
发布项目的选项
-
在文件夹中发布
-
在 互联网信息服务（IIS）中发布
-
在 Microsoft Azure 中发布
让我们深入探讨，了解所有关于发布项目的内容。
技术要求
要按照本章提供的步骤发布项目，您必须之前已安装带有 Web 开发工作负载的 Visual Studio 2022，如 第一章，使用 Visual Studio 2022 入门 所示。拥有您在 第四章，创建项目和模板 中创建的 SPA 基础项目非常重要。
对于 在 Microsoft Azure 中发布 部分，您需要一个带有积分的 Azure 账户来完成部署。
您可以在以下链接中查看对项目所做的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter10。
发布项目的选项
Visual Studio 有两种方式来访问 发布选项，然后显示用于部署项目的集成可能性。
在菜单中，我们可以通过导航到 构建 | 发布 [项目名称] 来访问此选项。默认情况下，当前解决方案中的主项目被选中，如下所示：
Figure 10.1 – 构建菜单中的发布 SPAProject 选项
另一种可能性是在 解决方案资源管理器选项卡中右键单击我们想要发布的项目（参见 Figure 10.2）：
Figure 10.2 – 右键单击菜单后的发布…选项
无论选择哪个选项，Visual Studio 都会显示一个模态窗口，显示解决方案中主项目或所选项目的支持部署类型，如下截图所示：
图 10.3 – 在 Visual Studio 中发布项目的选项
让我们逐一回顾这些选项：
-
Azure: 项目将使用服务在 Azure 中部署，具体取决于所使用的技术。
-
Docker 容器注册表: 此选项帮助我们发布包含网站的 Docker 容器。
-
文件夹: 此选项将项目发布到文件系统中选择的文件夹。
-
FTP/FTPS 服务器: 使用此选项，出版物的文件将被传输到 FTP 服务器。
-
Web 服务器 (IIS): 在 IIS 中部署项目，Windows 的默认服务器。
-
导入配置文件: 允许我们导入另一个配置来发布已创建的项目。
在接下来的几节中，我们将回顾一些这些选项。我们将使用 Azure、文件夹 和 Web 服务器 (IIS) 选项来转换项目，因为 Docker 容器注册表 设置起来稍微复杂一些，并且对于 FTP/FTPS 服务器，我们需要有一个运行的 FTP 服务器，这在现代解决方案中并不常见。
到目前为止，您已经知道如何访问 Visual Studio 中的 发布 选项来部署 Web 应用程序。现在，让我们探索一些发布项目在 Visual Studio 中的首选选项。
在文件夹中发布
发布项目最常见的选择之一是使用我们的文件系统并将网站保存在文件夹中，包括所有用于在本地服务器（如 IIS、Apache 或 NGINX）中使用的资源。Visual Studio 有一个选项，可以轻松地使用这种方法发布我们的项目。
您可以使用任何选项导航到我们之前在 发布项目的选项 部分中回顾的发布功能，然后选择 文件夹，接着点击 下一步：
图 10.4 – 发布项目的文件夹选项
在下一个窗口中，我们可以使用 浏览… 选项指定我们想要保存已发布项目的文件夹。我们可以使用绝对路径和相对路径。然后，我们可以通过点击 完成 来完成配置：
图 10.5 – 发布项目的文件夹位置
重要提示
选定的文件夹必须是空的。如果您选择一个包含文件的文件夹，这可能会在文件中创建冲突。Visual Studio 将尝试使用发布过程中生成的文件替换同名文件。
完成发布配置后，Visual Studio 将生成一个以 .pubxml 扩展名结尾的文件，该文件包含我们之前选择的选项，并以 XML 格式存储。现在，我们可以使用 发布 按钮将项目发布到所选文件夹：
图 10.6 – 使用配置创建的 .pubxml 文件
点击发布后，Visual Studio 将显示发布到文件夹…消息和一个控制台日志，您可以在其中检查在此过程中执行的所有步骤。在图 10.7中，您可以在输出面板中看到日志：
图 10.7 – 点击发布后的发布进度
最后，等待几秒钟后，我们将看到发布成功确认消息，这意味着过程没有问题完成（见图 10.8）：
图 10.8 – 发布成功消息和发布文件夹
在图 10.8中，我们可以看到右侧的文件夹包含与我们项目发布相关的所有文件。
我们有一些可以使用铅笔图标更改的附加设置：
图 10.9 – 在目标位置删除现有文件的选项
点击删除现有文件选项后，我们将看到一些我们可以根据需要更改的附加设置（见图 10.10）：
图 10.10 – 发布项目时的附加设置
让我们回顾一下图 10.10中的所有选项：
-
配置：我们可以选择调试和发布。后者针对生产进行了优化。
-
目标框架：通常，它与项目中使用的版本相同，但我们可以选择一个特定的版本来运行我们的项目。
-
部署模式：我们可以选择框架依赖，这意味着框架应该安装在服务器上，或者自包含，这意味着发布将包括框架以及运行项目所需的所有依赖项。
-
目标运行时：这是应用程序将发布的系统架构和操作系统。
-
在发布前删除所有现有文件：这允许 Visual Studio 删除为发布项目所选文件夹中的所有现有文件。
重要提示
最好勾选在发布前删除所有现有文件选项，以避免在发布过程中与现有文件发生冲突。
您现在知道如何在 Visual Studio 中发布到文件夹。您只需选择您希望部署应用程序的文件夹，然后使用发布选项。
在 IIS 中发布
IIS 是 Windows 生态系统中最受欢迎的服务器。它默认包含在所有 Windows Server 版本中，并且可以在 Windows 上安装它。
要在 Windows 8、10、11 或更高版本中安装 IIS，您可以在 Microsoft 文档的步骤 1 – 安装 IIS 和 ASP.NET部分中遵循此指南：
docs.microsoft.com/windows/msix/app-installer/web-install-iis
您可以使用 Visual Studio 轻松地在 IIS 中部署 Web 应用程序。首先，您需要打开我们在发布项目选项部分审查的发布选项，并选择Web 服务器（IIS）（见图 10.11）：
图 10.11 – 发布项目的 Web 服务器（IIS）选项
重要提示
如果发布配置文件夹中已经存在.pubxml文件，您需要删除它以创建一个新的配置。
在选择Web 服务器（IIS）后，您可以点击下一步并继续该过程。您将看到两个选项可供选择（见图 10.12）：
图 10.12 – 在 IIS 中部署的选项 – Web Deploy 和 Web Deploy 包
在 IIS 中部署我们有两种选项：
-
Web Deploy：在 IIS 中部署文件夹，包括所有文件。
-
.zip文件，包括发布文件夹内的所有文件。
在这种情况下，我们将选择Web Deploy并点击下一步。
您需要填写服务器、网站名称和目标 URL字段（见图 10.13）：
图 10.13 – 在 IIS 中发布到默认网站的配置
我们将使用在 IIS 中创建的默认网站。如果您已经使用此网站与其他应用程序一起使用，您可以在 IIS 中设置另一个网站名称。
使用验证连接按钮，您可以检查 Visual Studio 是否可以使用提供的设置创建网站并完成发布。您可以使用完成按钮来完成设置。
重要提示
您需要以管理员身份执行 Visual Studio 以授予对 IIS 的访问权限；否则，您将收到错误。
完成所有步骤后，您将收到准备发布的消息和一些编辑配置的选项。我们现在可以使用发布按钮：
图 10.14 – 使用 IIS 准备发布的项目
自动地，Visual Studio 将在浏览器的新窗口中打开，显示我们在配置中设置的网站的 URL（见图 10.13）在http://localhost：
图 10.15 – 发布后在 IIS 中运行的项目
您刚刚学习了如何使用 Visual Studio 在 IIS 中部署 Web 应用程序。Visual Studio 简化了完成设置的步骤，并将所有文件设置在 IIS 内部的一个文件夹中。现在，让我们回顾另一种使用 Azure 部署应用程序的方法。
在 Microsoft Azure 中发布
Azure 是由微软创建的云服务提供商，它是初创公司和 .NET 开发者中最受欢迎的之一。由于 Azure 和 Visual Studio 由同一家公司和社区支持，因此这些技术之间有很好的集成。
要在 Azure 中部署我们的 SPAProject，我们需要使用我们在“发布项目的选项”部分中审查的方法选择发布选项，选择 Azure，然后在下一屏幕上选择 Azure App Service (Windows)：
图 10.16 – 在 Azure 中发布的可能性
记得删除项目中的任何 .pubxml 文件以创建新的配置。
重要提示
要完成本节中的步骤并在 Azure 中发布 SPAProject，您需要一个带有积分的 Azure 账户。
Visual Studio 提供了一些在 Azure 中部署的选项。让我们来回顾一下：
-
Azure App Service (Windows)：使用 Windows 作为操作系统在 平台即服务（PaaS）容器中发布项目。
-
Azure App Service (Linux)：使用 Linux 作为操作系统在 PaaS 容器中发布项目。
-
Azure App Service 容器：在 Azure App 中使用 Azure App Service 容器运行容器。
-
Azure 容器注册库：将应用程序作为 Docker 镜像发布。
-
Azure 虚拟机：在虚拟机中发布文件夹，然后手动使用 IIS 运行应用程序。
点击 下一步 后，您将获得一个新窗口以在 Azure 中进行身份验证并连接到您的账户中的服务和资源：
图 10.17 – Azure 账户登录
在 图 10.17 中，我们看到一个新窗口，我们需要使用 登录… 按钮通过 Azure 进行身份验证以继续设置并将 Visual Studio 与 Azure 账户中的资源集成。身份验证完成后，我们可以选择订阅并使用绿色十字按钮创建一个新的 Web 应用实例（见 图 10.18）：
图 10.18 – 选择订阅并创建新的应用服务的选项
我们需要为我们的 SPAProject 选择托管计划：
图 10.19 – 新应用服务的托管计划
在这种情况下，我们可以使用 Azure 中的免费计划（有限时间运行我们的 Web 应用）来运行我们的 Web 应用。这对于进行演示和尝试此发布功能非常完美。
重要提示
要分析和比较 Azure 中的其他计划，您可以导航到以下链接：azure.microsoft.com/pricing/details/app-service/windows/。
在创建托管计划后，我们可以通过为我们的项目选择一个名称和资源组来完成配置（见 图 10.20）：
图 10.20 – SAPProject 的应用服务配置
在 图 10.21 中，我们可以看到创建的项目预览，并可以使用 完成 按钮完成操作：
图 10.21 – 创建的 SPAProject 的 Web 应用
最后，在最后一步，我们有两种选择来完成与 Azure 的集成（见 图 10.22）：
图 10.22 – Azure 中的部署选项
让我们回顾这些选项以进行选择：
-
.pubxml文件包含配置。我们需要使用 发布 按钮手动发布项目。 -
.yml文件包含 持续集成（CI）和 持续部署（CD）配置，以便在代码更改后部署项目。
对于这个示例，我们将选择 发布（生成 pubxml 文件）并点击 完成 以完成设置。
与 图 10.14 类似，我们将看到创建的 .pubxml 文件和 发布 按钮。点击 发布 以在 Azure 中发布我们的项目。项目发布后，Visual Studio 将使用 Azure 的 URL 打开网站：
图 10.23 – 在 Azure 中使用应用服务运行的 SPAProject
在 图 10.23 中，我们可以看到 Visual Studio 打开的新标签页，显示了 Azure 中项目的 URL。这个 URL 包含项目的名称，后面跟着 azurewebsites.net 域名。
您现在知道如何仅使用 Visual Studio 的 UI 和一些点击来发布项目。要了解更多关于 Visual Studio 和 Azure 之间集成细节的信息，请查看此链接：docs.microsoft.com/aspnet/core/tutorials/publish-to-azure-webapp-using-vs。
在回顾了使用 Visual Studio 部署应用程序的主要选项后，我们本章到此结束。
摘要
在阅读完本章后，您将知道如何在 Visual Studio 中导航以访问 .pubxml 文件。
在 第十一章 中，实现 Git 集成，我们将回顾 Visual Studio 中包含的所有用于连接 Git 仓库和 GitHub 的工具。您将学习如何使用可视化界面查看更改的状态，并轻松地将项目发布到公共或私有仓库。
第三部分：GitHub 集成和扩展
在本部分中，你将学习如何在 Visual Studio 扩展中添加更多功能，如何使用 Live Share 与其他开发者协作，以及如何管理 Git 仓库。
本部分包含以下章节：
-
第十一章, 实现 Git 集成
-
第十二章, 使用 Live Share 共享代码
-
第十三章, 在 Visual Studio 中使用扩展
-
第十四章, 使用流行扩展
-
第十五章, 学习键盘快捷键
第十一章：实现 Git 集成
对于软件项目的开发来说，拥有一个变更控制平台对于良好的项目管理至关重要。有许多不同的版本控制系统，但Git是目前最广泛使用的系统，这也是为什么越来越多的 IDE 都开始集成基于此技术的仓库管理工具。
这正是 Visual Studio 所发生的，它集成了一系列选项，使我们能够与基于 Git 的仓库一起工作。
在本章中，您将学习如何基于GitHub（目前最受欢迎的仓库托管平台）使用 Git 仓库。
本章我们将讨论的主要主题如下：
-
开始使用 Git 设置
-
创建 Git 仓库
-
克隆 Git 仓库
-
获取、拉取和推送 Git 仓库
-
管理分支
-
查看仓库中的更改
技术要求
要跟随本章内容，您必须已安装带有从第一章“使用 Visual Studio 2022 入门”中设置的负载的工作负载的 Visual Studio。
由于前几章的主要仓库中的项目已经具有 GitHub 配置，因此我们将在本章中创建一个新项目来进行练习。因此，需要一个 GitHub 账户，可以在以下链接创建：github.com/signup。
开始使用 Git 设置
在 Visual Studio 2022 中开始使用 Git 工具非常简单，因为它们是作为安装本身的一部分包含的，所以您可以立即安装 Visual Studio 并开始处理您的项目。
要访问托管在 GitHub 上的代码项目管理，您必须首先使用 Microsoft 账户登录，如第一章“使用 Visual Studio 2022 入门”中所述。登录后，点击账户个人资料图标并选择账户设置…选项，如图所示：
图 11.1 – 访问账户设置
这将打开账户定制窗口，我们可以通过+添加按钮添加 GitHub 账户，如图所示：
图 11.2 – 添加 GitHub 账户的按钮
一旦我们按下按钮，我们将被重定向到 GitHub 身份验证门户，在那里我们可以使用现有的 GitHub 账户登录，或者如果没有账户，可以创建一个账户。身份验证成功后，我们将被要求授权 Visual Studio 与 GitHub 服务交互，因此必须按下显示授权 github的按钮：
图 11.3 – 连接 Visual Studio 和 GitHub 的授权按钮
在此步骤之后，GitHub 账户将作为与主要 Visual Studio 账户关联的账户之一被添加，因此我们可以开始使用 GitHub 账户的存储库，如图 11.4 所示：
图 11.4 – 已添加到账户列表中的 GitHub 账户
现在我们已经关联了 GitHub 账户，让我们学习如何在 GitHub 中创建 Git 存储库。
创建 Git 存储库
在 Visual Studio 项目中从 GitHub 创建存储库非常容易。在本节中，您将通过创建一个新的 GitDemo 来测试您的知识。
要从您创建的项目在 GitHub 中创建新存储库，只需选择 Git | 创建 Git 存储库 菜单选项并填写存储库信息，根据图 11.5 所示的数据：
图 11.5 – 在 GitHub 上创建新存储库时填写信息
让我们简要解释每个选项：
-
本地路径：这设置本地机器上托管源代码的路径（通常是创建项目的路径）。
-
.gitignore 模板：这允许您选择一个模板，该模板确定一组不会上传到存储库的文件 – 例如，由所选模板选择的文件是在编译后生成的，可以在不同的计算机上重新生成。
-
许可证模板：这允许您为存储库代码选择一个许可证，它表明用户可以对项目代码做什么以及不能做什么。
-
描述存储库目的的
readme文件。 -
账户：这允许您选择将存储库发布到的 GitHub 账户。如果之前尚未关联账户，则可以在此处关联账户。
-
所有者：这允许您设置如果账户属于多个工作团队，哪个 GitHub 账户将是存储库的所有者。
-
存储库名称：这允许您设置存储库的名称，尽管通常使用项目自己的名称。这将影响最终存储库的 URL。
-
描述：这允许您输入创建的存储库的描述。
-
私有存储库：这允许您设置存储库是公开的还是私有的。
一旦设置了这些值，只需点击 创建和推送 按钮即可开始存储库创建过程。在您的 GitHub 账户中遵循此步骤非常重要，这样您才能执行以下章节中的活动。
如图 11.6 所示，有几个标志可以用来识别项目是否属于 Git 存储库，例如源文件左侧的锁定图标，表示它们是原始存储库文件：
图 11.6 – 使用 Git 识别版本化项目的标志
另一个识别项目是否属于 Git 仓库的标志是（如图 11.6 所示），在底部有一个分支图标，指示我们正在工作的分支。在我们的例子中，分支是 master。
现在我们已经知道了如何创建一个新的仓库，让我们看看如何将仓库克隆到我们的本地机器上。
克隆 Git 仓库
可能的情况是你想克隆一个现有的仓库而不是从头开始，因为你需要团队合作，或者简单地说，在浏览 GitHub 网站时，你遇到了一个引起你注意的仓库。
克隆仓库的最简单方法是从 Visual Studio 的初始窗口开始，可以通过启动 Visual Studio 的新实例、关闭一个打开的项目或从 文件 | 启动窗口 菜单访问。在这个窗口中，第一个选项是 克隆仓库 按钮：
图 11.7 – 启动窗口中的克隆仓库选项
一旦我们按下这个按钮，就会打开一个新的窗口（如图 11.8 所示），要求我们指定远程仓库的 URL 和源代码文件将存储的本地路径：
图 11.8 – 克隆仓库的窗口
为了演示的目的，我们将使用在 创建 Git 仓库 部分创建的仓库的 URL，它应该看起来像这样：https://github.com/{你的 GitHub 用户名}/GitDemo。
因为我们在 创建 Git 仓库 部分已经创建了一个同名项目，我们必须为项目指定不同的路径。为了简单起见，我们将文件夹的名称更改为 GitDemo2，如图 11.8 所示：
在窗口中填写完信息后，我们将点击 克隆 按钮，这将开始本地克隆仓库的过程。一旦过程完成，解决方案资源管理器 窗口将显示文件夹视图：
图 11.9 – 解决方案资源管理器窗口中的文件夹视图
要从文件夹视图切换到解决方案视图，并且能够处理源文件，你必须通过点击 GitDemo.sln 文件来打开解决方案。这将打开解决方案及其所有文件，使我们能够处理源文件，就像我们迄今为止所做的那样。
重要提示
可以通过选择位于 Git | 设置 | Git 全局设置 | 打开 Git 仓库时自动加载解决方案 的选项来将默认的文件夹视图更改为解决方案视图。
现在我们已经学会了如何克隆仓库，让我们看看我们如何在仓库上执行推送和拉取操作。
获取、拉取和推送 Git 仓库
在处理 Git 仓库时，最重要的命令与获取、拉取和推送操作有关。执行这些操作有两种主要方式：
- 第一种方式是通过访问 Git 菜单，如图所示：
图 11.10 – 从菜单访问获取、拉取和推送操作
- 第二种方法是启用 Git 变更 窗口，您可以通过 视图 | Git 变更 菜单打开它，如图 11.11 所示：
图 11.11 – 从 Git 变更窗口访问获取、拉取和推送操作
在这一点上，你可能想知道这些操作各自的作用。那么，现在让我们简要地解释一下。
获取仓库
获取操作允许您检查是否有远程提交应该合并到本地仓库中。
要运行此示例，请转到 GitHub 门户，如果您尚未登录，请登录，并打开我们在 创建 Git 仓库 部分创建的名为 GitDemo 的仓库。一旦您进入仓库，请转到 Program.cs 文件并点击铅笔图标，这将允许您编辑文件，如图所示：
图 11.12 – 编辑仓库文件的按钮
我们将通过在第四行字符串末尾添加一对感叹号来做一个非常简单的更改：
app.MapGet("/", () => "Hello World!!!");
一旦完成此更改，请滚动到页面底部并点击绿色按钮以提交更改：
图 11.13 – 在仓库上提交更改的按钮
如果我们现在转到 Visual Studio 并点击 获取 按钮，如图 11.14 所示，我们可以看到一个 0 个外出 / 1 个传入 的消息，指示仓库中有一个更改尚未应用到本地项目：
图 11.14 – 从仓库获取的按钮
此外，如果我们点击此消息，将打开一个新窗口，显示项目的版本历史，显示我们尚未应用本地的更改：
图 11.15 – 显示要应用到本地仓库的挂起更改的窗口
应该注意的是，获取操作不会在本地或远程仓库中做出任何更改，而拉取和推送操作则会。我们将在下一节讨论这些操作。
拉取仓库
拉取操作是指从仓库下载最新更改到我们的本地项目。在 获取仓库 部分中，我们看到了一个待应用更改。因此，我们将继续点击如图 图 11.16 所示的 拉取 按钮，以应用它：
图 11.16 – 拉取更改的按钮
一旦更改已下载，将出现一条消息，指示已应用到当前项目的哪个提交，如图 图 11.17 所示：
图 11.17 – 显示已应用提交及其更改的窗口
如果我们点击提交的名称，将出现一个窗口，显示已应用到项目的更改，如图 图 11.17 所示。
在本节中，尽管我们从主 GitHub 网站对远程仓库进行了更改，但最常见的方法是从 Visual Studio 本身进行。这就是为什么在下一节中，我们将分析如何执行向仓库的推送操作。
推送到仓库
推送操作是指将更改上传到仓库。为了演示此操作的工作原理，让我们打开 Program.cs 文件并修改第四行，将 Hello World 字符串更改为 Hello Git：
app.MapGet("/", () => "Hello Git!!!");
立即，你将看到 解决方案资源管理器 中的文件图标变为红色勾选标记，表示本地仓库已发生更改，我们可以将其上传到 GitHub 上的仓库：
图 11.18 – 表示原始文件已被修改的勾选标记
同样，在 Git 更改 窗口中，你会看到可以上传到仓库的更改文件列表，如图 图 11.19 所示：
图 11.19 – 可以上传到远程仓库的更改文件列表
在前面的图中，我们还可以看到一个带有 提交所有 标识的按钮。此按钮用于在本地创建提交，而不会影响远程仓库。这是一个包含更多我们可以使用的选项的下拉按钮，例如 提交所有并推送 选项。此选项将更改推送到远程仓库。
在我们的演示中，我们将添加 修改后的 Program.cs 消息，如图 图 11.20 所示，并点击 提交所有并推送 选项，以在服务器上应用更改：
图 11.20 – 添加的消息以及“提交所有”和“推送”选项
如果你访问你 GitHub 账户中的在线仓库，你会看到更改已成功应用。
重要提示
建议在执行推送操作之前，您始终先执行拉取操作，以尽可能避免合并冲突。您可以使用同步（先拉后推）按钮依次执行这两个操作。
现在我们已经分析了如何在 GitHub 中执行最常见的操作，让我们看看如何在 Visual Studio 中处理分支。
管理分支
到目前为止，我们一直在使用我们项目的master主分支进行工作。想象这个分支就像一个时间线，其中每个事件都是由一个提交执行的。当存在冲突并需要回到之前的版本，撤销特定提交的更改时，这非常有用。
然而，如果您在团队中工作，通常您需要在将此功能合并到主分支之前，在某种沙盒中添加该功能。在这种情况下，Git 分支将帮助我们，允许我们从现有的仓库分支创建一个新的项目分支，并在此分支上工作，而不会影响主仓库的功能。
要创建一个新分支，只需转到Git | 新建分支菜单。这将打开一个新窗口，要求输入分支名称、新分支将基于的分支，以及一个标记为检出分支的复选框，如果选中，则在创建后将切换到新分支。
对于这个演示，让我们使用branch01作为分支名称，它将基于master分支，并保持复选框选中，如图 11.21 所示：
图 11.21 – 创建新分支
一旦创建了新分支，我们就可以应用所需的任何更改。在我们的例子中，我们将打开Program.cs文件，再次修改第四行，代码如下：
app.MapGet("/", () => "Hello Git!!! - branch01");
一旦进行了此更改，我们将按照推送到仓库部分所示推送代码，确保将更改应用到branch01，如图 11.22 所示：
图 11.22 – 将更改推送到新分支
这允许我们在不影响master分支操作的情况下，在隔离的远程仓库中添加功能。
一旦您的代码经过测试，您可能希望将其集成回主分支。这可以从视图 | Git 仓库窗口完成。在这个窗口中，我们将有一个名为分支的部分，其中我们将看到项目中不同分支的列表。只需右键单击master分支并选择检出选项以切换到主分支，这是我们将在其中添加branch01更改的地方。然后，右键单击branch01分支并选择将 'branch01' 合并到 'master'选项：
图 11.23 – 合并分支
这将导致 branch01 分支与 master 分支合并，这意味着新功能将被集成到项目中。
现在我们已经看到了如何创建分支和合并它们，现在是时候看看 Visual Studio 如何在编辑源代码时可视化更改了。
查看仓库中的更改
Visual Studio 有几种方式帮助我们可视化仓库中的更改。第一种是通过如图所示的 Git Repository 窗口：
图 11.24 – Git 仓库窗口
此窗口允许我们通过 Incoming 可视化本地仓库中是否有未应用版本，通过 Outgoing 可视化本地提交但未推送到服务器的提交，以及 Local History。
如果我们想可视化不同提交之间的更改，只需在两个或多个提交上右键单击并选择 比较提交… 选项：
图 11.25 – “比较提交…” 选项
这将显示一个新窗口，显示不同源文件之间发生的变化。
另一种查看单个文件更改的方法是在 解决方案资源管理器 中右键单击文件，然后选择 Git | 查看历史 选项，这将仅打开所选文件的更改窗口，如图 11.26 所示：
图 11.26 – 查看特定文件更改历史的选项
最后，我们已经在 第七章 中讨论了 CodeLens 功能，使用 AI 和代码视图高效编码，它还包含查看类成员更改的功能，例如更改历史和谁对成员进行了修改。
摘要
在本章中，我们学习了 Visual Studio 如何集成工具，使我们能够轻松使用 Git 和 GitHub 管理项目。
对于所有希望以更受控的方式管理项目，以便对项目结构的前版本有一个概览的开发者来说，了解如何使用基于 Git 的项目是必不可少的。
同样，如果你与其他开发者合作，你将能够共享项目任务，独立测试它们，并在代码可靠时合并它们，以避免损坏已测试的源代码。
正因如此，我们学习了如何在 Visual Studio 中设置 GitHub 账户，如何创建和克隆仓库，如何执行获取、拉取和推送操作，如何管理项目中的分支，以及最后如何可视化仓库中的更改。
在下一章，第十二章，使用 Live Share 共享代码，你将学习如何利用 Live Share 实时与开发团队在同一项目上协作。
第十二章：使用 Live Share 共享代码
协作工具是远程工作的一种新方式，它使一个团队更容易实现一个共同目标。看到我们如何能够与其他用户实时编辑相同的文档、记录或共享资源，真是令人惊叹。如果我们想在编码或进行结对编程（一种两名程序员共同编写同一代码的技术）时进行协作，我们需要在同一地点、同一台机器上工作，或者使用一个工具通过视频通话来执行这些活动。
Visual Studio（VS）Live Share 或简称为 Live Share，是 VS 默认包含的新工具，它帮助我们与其他使用 VS 和 VS Code 的程序员共享代码。
本章我们将审查以下主题：
-
理解 VS Live Share
-
使用 Live Share
-
进行实时编辑
-
与其他协作者共享终端
首先，我们需要了解 Live Share 的基本知识，并知道如何找到它。
技术要求
要在 VS 2022 中使用 VS Live Share，您必须之前已安装带有 Web 开发工作负载的 VS 2022，如第一章中所示，Visual Studio 2022 入门。同样重要的是，您需要在第四章中创建 SPA 基础项目，创建项目和模板。
您可以通过以下链接检查本章中项目所做的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter12。
理解 VS Live Share
VS Live Share 是为使用 VS 和 VS Code 的程序员提供的实时协作工具。Live Share 作为 VS 2017 的扩展发布，当时提供了一些试用功能。在 VS 2022 中，它默认包含并包含所有功能。
Live Share 完全免费，并且也可以通过安装一个扩展在 VS Code 中使用，您可以在以下链接中找到该扩展：marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare。
Live Share 提供了编辑、调试、共享终端和为远程开发者执行项目的工具。我们不需要克隆存储库或安装额外的扩展来查看代码并与之交互。
为了补充本章提供的信息以及您将在下一节中审查的功能，您可以阅读以下 URL 的文档：docs.microsoft.com/visualstudio/liveshare/。
这类协作工具并不新鲜。其他 IDE 也提供了扩展和组件来共享代码和实时工作。您可以尝试以下工具，并将它们与 Live Share 进行比较：
-
Teletype for Atom（
teletype.atom.io/）：一个创建开发者之间共享工作区的协作工具 -
Duckly (
duckly.com/)：一个具有视频通话和其他功能，与许多 IDE 兼容的实时协作工具 -
CodeTogether (
www.codetogether.com/)：一个支持 VS Code、IntelliJ IDEA 和 Eclipse 的共享编码会话工具重要提示
对于 VS，没有其他免费协作工具。Live Share 由微软和社区支持。
在本节中，我们简要介绍了 VS Live Share 的概述、其历史以及执行类似任务的替代工具。现在，让我们开始使用 Live Share。
使用 Live Share
要开始使用 Live Share，我们可以转到 VS 主窗口右上角的图标，如图 图 12.1 所示：
图 12.1 – 主窗口中的 Live Share 按钮
点击此图标后，您将看到一个新窗口，其中您可以选择用于创建新实时共享会话的账户。此账户是必需的，并且默认选择 VS 中使用的账户。我们还可以看到位于 Live Share 按钮位置的 共享中… 消息（见图 图 12.2）：
图 12.2 – Live share 账户窗口
您可以选择要使用的账户，然后点击 选择。然后，您将收到确认消息，共享会话的链接将自动添加到剪贴板。实时共享按钮显示 共享中…，这确认了会话是活跃的（见图 图 12.3）：
图 12.3 – VS Live Share 中的实时会话
您可以将邀请链接与其他开发者、同事或朋友分享，以尝试此工具。这是 VS Live Share 生成的链接示例：prod.liveshare.vsengsaas.visualstudio.com/join?7E72234CE1703CF92015D01564C560706AE1。
当有人在浏览器中打开链接时，他们将看到 Visual Code for the web。这是一个作为网页运行的 VS Code 编辑器版本，不依赖于操作系统或额外要求。要获取更多信息，请访问此链接：code.visualstudio.com/docs/editor/vscode-web。在 VS Code for the web 中，您可以选择匿名继续或使用 GitHub 账户登录：
图 12.4 – 在浏览器中打开的会话
我们可以使用 匿名继续 来继续并加入会话。将显示三个选项，我们可以选择在代码中编辑和导航（见图 图 12.5）：
图 12.5 – 使用链接打开会话的选项
让我们进一步回顾这三个选项：
-
在 Web 中继续：选择此选项，您将继续在浏览器中使用 VS Code。
-
在 Visual Studio Code 中打开：此选项将在您的计算机上打开 VS Code，您可以在那里编辑代码。
-
在 Visual Studio 中打开：此选项将在您的本地机器上执行 VS，您可以在那里编辑代码。
您可以使用在 Web 中继续使用浏览器加入会话。创建会话的用户将看到一个新通知消息，其中您可以查看尝试加入会话的协作者。您可以选择新协作者并继续会话（见图 12.6）：
图 12.6 – Live Share 发送的接受新协作者的通知
接受访客用户后，Live Share 将共享代码并实时显示更改。在这种情况下，访客用户可以看到由创建会话的Miguel Teheran执行的代码中的操作。在图 12.7中，黄色部分显示了跟随 Miguel Teheran的消息，同时也显示了在 VS Code 和 VS 中打开会话的选项：
图 12.7 – 在 VS 中打开会话的选项
在 VS 中，有一个菜单，我们在会话期间可以使用不同的选项：
图 12.8 – 实时会话期间的 Live Share 菜单
让我们进一步回顾这些选项和功能：
-
查看实时共享窗口：查看会话状态，包括会话详情和会话中的协作者。
-
复制链接：复制剪贴板中的链接与他人分享。
-
管理共享服务器：打开一个新窗口，我们可以在此窗口中将我们的本地服务器与其他会话中的用户共享。
-
共享终端（只读）：以只读模式共享终端，以与他人共享控制台日志和结果。协作者不能在终端中执行任何命令。
-
共享终端（读/写）：与会话中的其他用户共享终端，并具有远程执行命令的可能性。
-
结束实时共享会话：结束所有连接用户的会话。
让我们点击查看实时共享窗口来查看会话状态。它将在右侧面板中显示一个新窗口，正如我们在图 12.9中看到的那样：
图 12.9 – 会话期间的 Live Share 窗口
在Program.cs文件中。我们还可以看到共享的终端和服务器。使用红色方块，我们可以在任何时间结束所有参与者的会话。
重要提示
访客用户以只读模式加入会话，这意味着他们不能修改或更新代码。这是一个安全要求。要了解更多关于 Live Share 中的安全信息，请访问docs.microsoft.com/en-us/visualstudio/liveshare/reference/security。
使用 Live Share 创建和共享会话非常简单。我们可以看到协作者随时连接和结束会话。让我们看看如何实时编辑或更新代码。
进行实时编辑
我们可以将 Live Share 会话与其他人共享，但那些用户只能以编辑或只读模式加入。默认情况下，所有访客用户都是只读模式，因此让我们使用登录用户通过 VS 加入会话。
选择在 Visual Studio 中打开后，如图 12.5所示，VS 将加载项目并显示加载消息，最终显示带有活动会话的代码。我们将有一个菜单，其中包含用于管理会话的实时共享按钮，作为协作者（见图 12.10）：
图 12.10 – 协作者加入会话时的 VS
在前面的图中，我们还可以看到左侧的一些图标，代表会话中的活动协作者。我们可以点击已加入来查看作为活动会话中的协作者所拥有的选项（见图 12.11）：
图 12.11 – 协作者使用的 Live Share 菜单
让我们逐一查看此菜单中的每个选项：
-
查看 Live Share 窗口：此选项允许您查看会话状态，包括会话详情和会话中的协作者。
-
会话聊天：此选项打开一个新窗口，您可以在其中键入并与其他协作者共享消息。
-
查看共享服务器：使用此选项，您可以在当前会话中可视化共享服务器。
-
显示共享终端：此选项打开一个新窗口，您可以在其中查看当前共享的终端。
-
关注参与者：使用此选项，您将保持关注其他协作者正在做什么或正在编辑的内容。
-
离开 Live Share 会话：使用此选项，您将离开当前会话，而其他协作者可以继续会话。
重要提示
主持人是唯一可以结束会话的参与者。当会话结束时，会话中的所有协作者都将收到通知。有关更多信息，请访问
docs.microsoft.com/visualstudio/liveshare/use/share-project-join-session-visual-studio。
现在，您可以编辑代码的任何部分，并查看 Live Share 是如何工作的。例如，在Program.cs文件的第七行，我们可以为build方法添加注释（见图 12.12）：
图 12.12 – 在 Live Share 会话期间添加注释
一旦协作者开始输入，会话中的主机和其他用户可以实时看到文件中的更改。协作者的名字将在特定行显示，并用随机颜色突出显示（见 图 12.13）：
图 12.13 – 主机实时查看协作者所做的更改
重要提示
Live Share 将随机为每个新的协作者分配一种颜色，以便在会话期间轻松识别每个用户。
您可以编辑文件以执行建议，但您也可以使用 文件 | 保存所选项 菜单或 Ctrl + S 快捷键来保存文件。
现在我们已经了解了 Live Share 的工作原理以及我们可以在共享会话期间使用的某些功能，我们准备审查在会话期间与其他协作者共享终端的选项。
与其他协作者共享终端
在 Live Share 中，我们还可以与其他开发者共享终端。通过共享终端，我们允许其他开发者通过命令行查看项目的更多详细信息。在创建新会话后，我们可以使用 共享终端 选项允许其他人使用我们的终端（见 图 12.14）：
图 12.14 – Live Share 菜单中的共享终端选项
在点击 共享终端（读/写） 后，我们将看到一个带有标记的新终端窗口，该标记表示终端已共享。在 图 12.15 中，我们可以看到在 VS 底部面板中添加的新终端：
图 12.15 – Live Share 会话期间共享的终端
其他协作者在加入会话时将自动看到这个共享终端（见 图 12.16）：
图 12.16 – Live Share 会话期间共享的终端
会话中的协作者可以执行项目中的任何命令以获取更多详细信息或使用窗口命令添加信息。在这种情况下，我们可以使用 .NET dotnet build 命令。要了解更多关于 .NET CLI 的信息，您可以查看以下链接中的文档：docs.microsoft.com/dotnet/core/tools/.
在终端中，我们将在编译过程中看到警告和错误（见 图 12.17）：
图 12.17 – 协作者在共享终端中执行 dotnet build 命令
会话中的主机和其他协作者可以看到在终端中执行的所有命令及其结果。命令是在主机环境中执行的，这意味着创建会话的用户（见 图 12.18）：
图 12.18 – 会话的主机正在查看 dotnet build 命令的结果
如果终端默认未显示或您想查看会话中共享的其他终端，您可以转到 Live Share 窗口并查看当前会话的状态，包括共享终端及其权限（见 图 12.19）：
图 12.19 – 共享终端的 Live Share 窗口
现在您已经知道如何在 VS 2022 中作为主机和协作者使用 Live Share，您可以邀请其他人协作您的项目，并在需要时共享终端。
摘要
Live Share 是一个实时与他人协作的神奇工具。随着全球化的发展，这个工具现在比以往任何时候都更加重要，考虑到全球开发团队可能包括世界各地、不同时区和不同工具工作的开发者。
您已经学会了如何使用 Live Share 来作为团队工作，并与其他开发者在同一项目上进行协作。您知道如何在 VS 中加载 Live Share 会话，查看会话中的参与者，共享终端，并在需要时结束会话。此外，您还回顾了一些与其他 IDE 和编辑器一起使用的 Live Share 的替代方案。
在 第十三章 中，在 Visual Studio 中使用扩展，您将学习如何使用扩展来增加 VS 默认包含的工具和功能。您将学习如何在 VS 中搜索、安装和设置扩展，以及如何利用它们来提高您的生产力。
第十三章：在 Visual Studio 中使用扩展
我们不能否认，Visual Studio 的原生功能在执行任务方面，如我们迄今为止所看到的，是惊人的。然而，可能有时您想通过简单的功能扩展 IDE 的功能，例如使用自定义颜色应用新主题，或者通过代码重构工具等复杂功能。
在这种情况下，Visual Studio 扩展非常有帮助，这也是为什么我们将专门用一整章来分析它们的使用。
我们将要看到的主要主题如下：
-
使用扩展工具
-
搜索和安装扩展
-
检查 Visual Studio 市场 place
-
设置扩展
-
创建新的主题作为扩展
让我们从扩展的视角开始游览 Visual Studio，感谢扩展。
技术要求
要跟随本章，您必须已安装带有 Web 开发工作负载的 Visual Studio，如 第一章，开始使用 Visual Studio 2022 中所示。
此外，要创建一个作为扩展的主题，如 创建新的主题作为扩展 部分所示，你必须安装 Visual Studio 扩展开发 工作负载，如图 图 13.1 所示：
图 13.1 – 安装 Visual Studio 扩展开发工作负载
您可以在开始阅读 创建新的主题作为扩展 部分之前或创建扩展时安装它，如图中所示。
由于本章侧重于展示在 Visual Studio 中使用扩展，因此不需要代码库。
让我们看看如何从 Visual Studio 使用扩展工具。
使用扩展工具
Visual Studio 中扩展的主要目的是，您可以使用可能对特定任务具有某种特定性的功能来提高您日常的生产力，例如提供代码最佳实践的建议、执行代码清理、在输出窗口中突出显示消息、在代码文件中添加视觉功能或与 SQLite 数据库交互。允许开发者为 Visual Studio 创建新功能并与全世界分享是微软团队的一项优秀举措。
重要提示
在本节中，我将向您展示一些简单的扩展，以便您熟悉扩展的概念。在 第十四章，使用流行扩展 中，您将了解开发者最广泛使用和首选的扩展，以及如何使用它们。
但我们如何访问这些扩展呢？最直接的答案是通过扩展工具，您可以通过 扩展 | 管理扩展 菜单找到它，如图 图 13.2 所示：
图 13.2 – 扩展工具
在左侧，我们可以找到以下类别，这些类别允许我们过滤扩展：
-
已安装：这些是我们之前在 Visual Studio 实例中安装的扩展。
-
在线：在这个类别中，你可以找到可以添加到 Visual Studio 的扩展。在上部，我们有一个带有按排序图例的过滤器，它允许我们以不同的方式过滤扩展。
-
更新：这个类别显示了有挂起更新的扩展，无论是错误修复还是扩展改进。
-
漫游扩展管理器：这个类别允许你查看与 Microsoft 账户关联的、之前在 Visual Studio 实例中安装的扩展，因此它们可以在当前的 Visual Studio 实例中安装。这意味着如果你在另一台计算机上登录并安装了一个扩展，你将能够在这个列表中看到它，因此你不需要记住扩展的名称，可以轻松安装。
现在，让我们看看如何利用这个工具来搜索和安装扩展。
搜索和安装扩展
如图 13.3所示，扩展工具具有位于右上角的搜索框，我们可以在此输入搜索词以查找与某些技术或工具相关的扩展。需要注意的是，搜索将在我们讨论的使用扩展工具部分中提到的所选类别内进行。
如果你想要在所有扩展中进行搜索，最好的做法是转到javascript:
图 13.3 – 扩展工具中的结果列表
扩展列表的顺序将根据顶部下拉项的设置出现，默认情况下显示为按相关性排序，但我们也可以选择其他选项，例如按下载量最多、最新、趋势或评分最高显示。
让我们再进行一次测试，这次是安装一个扩展。让我们查找与css相关的扩展，在列表中，你会看到一个名为颜色预览的扩展。要安装扩展，只需点击下载按钮，这将开始下载过程：
图 13.4 – 搜索和安装扩展
扩展下载完成后，窗口底部将出现一条消息，说明您的更改将被安排。所有 Microsoft Visual Studio 窗口关闭后，将开始修改。这条消息非常详细，因此我们将重新启动 Visual Studio 以执行安装。
一旦我们关闭 Visual Studio，安装过程将开始，它将显示将在 Visual Studio 实例上安装的扩展，以及额外的信息，例如 数字签名 和 许可证 类型：
图 13.5 – 扩展安装窗口
如果我们同意显示的信息，如 图 13.5 所示，我们必须点击 修改 按钮，这将启动 IDE 中的安装过程。
安装过程完成后，您必须重新打开一个 Visual Studio 实例。尽管乍一看似乎没有任何变化，但此扩展已添加了将所选颜色应用于 css 文件属性并在 IDE 中显示的功能，如 图 13.6 所示：
图 13.6 – Color Preview 扩展添加的功能
您可以将前面的屏幕截图与 第九章 中 “使用 CSS 样式工具” 部分所示的截图进行比较。
如果您想卸载一个扩展，只需再次打开扩展工具，在 已安装 部分查找该扩展。然后，点击 卸载 按钮，如 图 13.7 所示：
图 13.7 – 卸载扩展
在前面的屏幕截图中，您可以看到一个名为 禁用 的第二个按钮，它允许您暂时禁用扩展，直到您决定重新激活它。
现在我们已经看到了如何从扩展工具安装扩展，让我们看看 Visual Studio Marketplace。
检查 Visual Studio Marketplace
Visual Studio Marketplace 是寻找和安装 Visual Studio 2022 扩展的在线场所。在此市场中，您还可以找到 Visual Studio 家族其他产品的扩展，例如 Visual Studio Code 和 Azure DevOps。您可以通过网站：marketplace.visualstudio.com/vs 访问市场。
一旦您进入门户，您将有一个与扩展工具非常不同的用户界面，但核心操作是相同的。在主门户中，您将能够看到按 特色、趋势、最受欢迎 和 评分最高 排序的不同扩展。
为了测试市场，让我们搜索 icons 术语并查看结果列表。尽管当前列表产生了 49 个结果，但并非所有扩展都与 Visual Studio 的最新版本兼容。因此，建议应用 Visual Studio 2022 过滤器，如 图 13.8 所示：
图 13.8 – 在市场 place 中过滤 Visual Studio 版本
一旦应用了过滤器，找到 Visual Studio Iconizer 扩展并点击它以转到扩展页面：
图 13.9 – 在市场 place 中搜索扩展
在扩展页面上，你将能够找到提供关于扩展的一般信息，例如安装次数、评论次数、评分、变更日志和项目页面等数据。如果扩展的描述表明它可以帮助你解决问题，你可以点击下面的绿色 下载 按钮：
图 13.10 – 下载扩展的按钮
这将启动下载一个 vsix 扩展名的文件的过程 – 在这个特定的情况下，文件名为 VSIconizer.vsix。要在 Visual Studio 中安装扩展，你必须首先确保你已经关闭了所有 IDE 的实例，然后运行下载的文件，这将启动我们在 搜索和安装扩展 部分看到的相同的安装过程。
一旦安装过程完成并且 Visual Studio 2022 的一个实例被打开，我们可以看到 IDE 标签的外观如何改变，如图 图 13.11 所示，文本已被图标替代：
图 13.11 – Iconizer 扩展修改后的 IDE 标签外观
无论你选择使用扩展工具安装还是从市场 place 下载扩展，安装过程都非常简单。
现在，让我们看看如何配置我们安装的扩展。
设置扩展
不幸的是，没有标准化的方式来配置 Visual Studio 扩展，因为每个扩展都是独特的，服务于特定的目的。确实的是，大多数扩展都会为扩展添加配置选项，无论是通过一个特殊的窗口，还是从配置选项。
了解这些配置选项的最佳方式是通过扩展页面本身。例如，对于我们在 查看 Visual Studio 市场 place 部分安装的 Visual Studio Iconizer 扩展，其初始行为是在标签上仅显示图标。扩展页面告诉我们，这种行为可以被更改，以显示扩展添加的图标旁边的标签文本。这可以通过通过 工具 | 选项 | 环境 | Iconizer 菜单添加的选项来完成，如图 图 13.12 所示：
图 13.12 – Iconizer 扩展选项
大多数扩展程序会创建一个部分，如图中所示，而更复杂的扩展程序甚至为工具提供了一个特殊的新菜单，我们将在 第十四章，使用流行扩展 中讨论。
现在，让我们看看如何为 Visual Studio 创建一个新主题并将其导出为扩展，以便更多用户可以在他们的 Visual Studio 实例中应用它。
将新主题作为扩展创建
如果您想对 IDE 进行更定制的颜色配置，可以通过名为 Visual Studio Color Theme Designer 的扩展程序来实现。您可以在 Visual Studio 市场中搜索并下载此扩展程序，正如我们在 查看 Visual Studio 市场部分 中所看到的。
安装扩展后，您需要启动 Visual Studio 并选择如图所示的 创建新项目 选项：
图 13.13 – 创建新项目
在打开的窗口中，您必须从名为 VSTheme 项目 的列表中选择项目，该列表已通过之前添加的扩展程序安装。如果您一开始没有找到，可以在如图 图 13.14 所示的搜索框中进行搜索：
图 13.14 – 搜索 VSTheme 项目
在新的项目配置窗口中，如图 图 13.15 所示，您可以输入一个项目名称，该名称与您正在创建的主题相关。对于此示例，我将将其命名为 CustomTheme。您可以将其他参数保留为默认值。通过点击 创建 按钮来创建新项目：
图 13.15 – 项目配置
如果显示一个窗口指示您必须安装 Visual Studio 扩展开发 工作负载，请点击 安装：
图 13.16 – 安装 Visual Studio 扩展开发工作负载
这将使环境能够为 IDE 开发扩展。
重要提示
如果在安装如图 图 13.16 所示的工作负载后，您得到一个没有文件的解决方案，您必须重新创建项目，这将解决问题。
一旦 IDE 安装了扩展，新项目将以不同的元素创建。要配置您的新主题，在 解决方案资源管理器 窗口中双击具有 vstheme 扩展名的文件，如图所示：
图 13.17 – 打开主题配置文件
这将启动一个向导，它将允许你快速创建新的主题。你将从一个名为 快速开始 的选项卡开始，在那里你可以从已安装的主题中选择一个基础主题，以便对新主题进行修改：
图 13.18 – 设置新主题
在 图 13.18 中，已选择 深色 主题进行演示。从这里，你可以点击任何三个主要颜色之一，标记为 主色、强调色 和 次色，以选择不同的颜色，并通过点击图 13.19 中用红色突出显示的 确定 按钮来应用它：
图 13.19 – 更改颜色
如果你想要更详细的定制，你可以通过相同的步骤在 公共元素 和 所有元素 选项卡中完成，如图 13.18 所示。
最后，为了使用主题，你可以在窗口底部找到 预览 按钮来预览新配置下的更改效果，以及一个带有图例 应用 的按钮来将更改应用到 IDE：
图 13.20 – 预览和应用主题更改的按钮
要获取可安装的扩展文件，你必须编译项目。在 图 13.21 中显示的编译项目的方法之一：
图 13.21 – 构建项目
一旦项目成功编译，我们必须通过右键单击项目并选择 在文件资源管理器中打开文件夹 选项来进入编译目录：
图 13.22 – 在 Windows 资源管理器中打开项目文件夹的选项
这将打开项目位置的 Windows 文件资源管理器。在这个路径中，我们将继续查找位于 bin | Debug | CustomTheme.vsix 路径中的文件。文件名将来自项目的名称。在我们的示例中，项目的名称是 CustomTheme，如图 13.15 所示，因此如果你在创建项目时使用了另一个名称，你将找到具有该名称的文件。这是你可以分发以共享主题的文件，或者你可以将其上传到 Visual Studio 市场 place。
重要提示
你还可以将输出模式设置为 发布，如第 5 章 中所述，调试和编译你的项目。这将生成一个更小的文件，运行速度更快。
正如我们所见，利用 Visual Studio 扩展创建新主题非常简单。
摘要
在本章中，我们了解到扩展是我们扩展 Visual Studio 功能的一种方式，始终以改善我们的用户体验和优化开发时间为目标。我们测试了一些完全改变了 IDE 的一些功能的扩展，例如在 css 文件中预览颜色、将标签页改为图标以及创建用于分发的主题。
此外，我们还回顾了如何从扩展工具和 Visual Studio Marketplace 中搜索和安装扩展。我们分析了扩展是如何定期配置的，最后，我们创建了一个新的自定义主题，可以通过扩展与他人共享。
在第十四章，使用流行扩展中，我们将更深入地探讨扩展的主题，分析哪些扩展因其对 Web 开发的有用性而最受欢迎。
第十四章：使用流行扩展
在第十三章，“在 Visual Studio 中使用扩展”，我们学习了如何通过安装由 Visual Studio 社区和第三方供应商发布的扩展来扩展实用工具和功能。我们可以使用 Visual Studio 中的扩展管理器安装这些扩展，然后重新启动 Visual Studio 以查看用户界面的更改。
在本章中，我们将分析一些免费且有用的扩展，以提高生产力和改善我们使用 Visual Studio 的体验。我们将在以下部分安装和审查这些扩展：
-
添加 HTML 代码片段包
-
使用 CodeMaid 清理代码
-
使用 Web 编译器编译网络库
-
使用缩进引导识别空白
我们将从 HTML 代码片段包开始，这是一个帮助我们当编写 HTML 文件时在 Visual Studio 中包含一些额外代码片段的扩展。
技术要求
要在 Visual Studio 2022 中安装扩展，您必须已经安装了带有 Web 开发工作负载的 Visual Studio 2022，如第一章，“开始使用 Visual Studio 2022”中所示。在第四章，“创建项目和模板”中创建 SPA 项目也很重要。
您可以通过以下链接查看本章中项目所做的更改：github.com/PacktPublishing/Hands-On-Visual-Studio-2022/tree/main/Chapter14。
添加 HTML 代码片段包
在第六章，“添加代码片段”，我们回顾了代码片段如何在我们编码时提高我们的生产力。我们还学习了如何使用代码片段管理器创建、导入和删除代码片段。
在 Visual Studio 的扩展市场中，我们可以通过导航到 marketplace.visualstudio.com/ 并在搜索栏中输入 snippet 来找到许多扩展，这些扩展为不同的技术添加代码片段（见图 14.1）：
图 14.1 – 与 Visual Studio Marketplace 中的代码片段相关的扩展
对于网页开发者来说，最受欢迎的代码片段包之一是HTML 代码片段包。使用此扩展，你可以更快地编写 HTML 代码，在编辑器中输入一些字符后，创建代码片段和 HTML 元素。让我们安装这个扩展，看看我们如何使用代码片段轻松创建 HTML 元素。
下载和安装 HTML 代码片段包
在 Visual Studio 中，在搜索栏中导航到 HTML 代码片段。然后，选择 HTML 代码片段包 并点击 下载（见图 14.2）：
图 14.2 – 管理扩展工具中的 HTML 片段包
我们将收到通知，这意味着我们需要关闭并重新打开（重启）Visual Studio 以完成安装。再次打开 Visual Studio 后，它将要求确认安装扩展。点击 修改（见 图 14.3）：
图 14.3 – 安装 HTML 片段包
然后，我们将看到一个进度条，指示安装正在进行。最后，我们将看到一个成功消息：
图 14.4 – HTML 片段包扩展安装完成
点击 关闭 并继续使用 Visual Studio。
使用 HTML 片段包
我们需要导航到一个 HTML 文件来使用 HTML 片段包扩展，所以让我们转到 index.html。
在此文件中，我们可以在 body 元素中写下单词 article（见 图 14.5）：
图 14.5 – 在 index.html 中输入 article
在键入单词 article 后，按键盘上的 tab 键可以轻松生成此部分代码中的文章 HTML 元素。在 图 14.6 中，我们可以看到自动生成的文章元素：
图 14.6 – 使用代码片段生成的文章
正如我们生成了 article 元素一样，我们可以轻松地创建 li、ul、img、input 以及 HTML 标准中几乎所有的现有元素。
您可以在官方网站和仓库 github.com/madskristensen/HtmlSnippetPack 上阅读有关 HTML 片段包的更多信息。
现在我们来回顾一个不同的扩展来分析我们的代码。
使用 CodeMaid 清理代码
CodeMaid 是一个惊人的扩展，帮助我们简化并清理代码。它是免费的，并且与 C#、C++、F#、VB、PHP、PowerShell、R、JSON、XAML、XML、ASP、HTML、CSS、LESS、SCSS、JavaScript 和 TypeScript 兼容。
您可以在官方网站 www.codemaid.net/ 上阅读有关 CodeMaid 的更多信息。
让我们安装 CodeMaid 并看看我们如何使用它。
在 Visual Studio 2022 中安装 CodeMaid
要安装 CodeMaid，在搜索栏中导航到 codemaid，然后选择 CodeMaid VS2022（见 图 14.7）：
图 14.7 – 从管理扩展工具安装 CodeMaid
在搜索 codemaid 后，再次点击 SPAProject。您可以点击 修改 并等待安装完成：
图 14.8 – Visual Studio 2022 中的 CodeMaid 扩展安装程序
现在，您将在扩展菜单中看到一个新选项，其中包含与 CodeMaid 相关的所有功能性和配置（见图 14.9）：
图 14.9 – 扩展菜单中的新 CodeMaid 选项
使用 CodeMaid
在这种情况下，没有活动文档，因此许多选项被禁用，但我们可以使用清理所有代码…选项来对整个项目进行清理，使用 CodeMaid 中的默认设置。在开始过程之前，我们会收到一个确认消息。点击是以继续（见图 14.10）：
图 14.10 – 使用 CodeMaid 清理项目的确认
确认后，CodeMaid 将逐个分析每个文件，查找空白空间和空行，并对行进行排序等。您将看到一个进度条和当前正在处理的文件（见图 14.11）：
图 14.11 – 使用 CodeMaid 进行清理过程
在清理完成后，所有文件都将被保存。我们可以打开一个文件来查看更改，但使用 Visual Studio 中的 Git 集成，我们可以轻松地看到差异。这仅适用于您已经将项目连接到 Git 仓库的情况。您可以去查看 Program.cs 文件中的更改。更改的示例显示在图 14.12中：
图 14.12 – 使用 CodeMaid 进行清理过程
在 Program.cs 中，我们可以看到 CodeMaid 移除的 if 语句中的一些带有空格的行。
重要提示
减少代码中的行数意味着减少文件的大小。空白行和空白空间会使代码难以阅读，并在发布时增加项目大小。
CodeMaid 有一些我们可以根据需要打开或关闭的选项。导航到扩展 | CodeMaid | 选项并选择移除部分，以选择 CodeMaid 可以移除代码的场景（见图 14.13）：
图 14.13 – CodeMaid 的用户设置
CodeMaid 还有许多与删除空白行和空白空间相关的选项。默认情况下，所有选项都启用，但您可以选择禁用某些选项，以根据项目指南设置 CodeMaid。
您可以在官方网站上了解更多关于 CodeMaid 的信息：www.codemaid.net/.
现在您已经了解了 CodeMaid 的工作原理，并可以使用它来清理您的项目，让我们回顾下一个扩展，用于在 Visual Studio 中编译网络文件。
使用 Web 编译器编译网络库
如果你在一个项目中使用 TypeScript、LESS 或 Sass，你需要预编译代码以获取你 Web 项目的生产版本，这样浏览器就可以读取每一行代码。请注意，浏览器只能读取 CSS、HTML 和 JavaScript。在 Visual Studio 中使用 Web 编译器，你可以轻松完成此操作并直接查看预编译的代码。
既然我们已经知道了 Web 编译器是什么，那么让我们来安装它，并学习如何利用这个工具。
安装 Web 编译器
要安装 Web 编译器，请在搜索栏中转到 web compiler（见 图 14.14）：
图 14.14 – 在管理扩展中搜索 Web 编译器
现在，我们可以遵循与 添加 HTML 片段包 部分中相同的步骤来完成安装。关闭并重新打开 Visual Studio 后，您将看到新扩展的安装已完成。现在，我们将在我们的 SPAProject 中使用它。
使用 Web 编译器
要使用 Web 编译器，我们可以导航并选择项目中的任何 JavaScript 文件，右键单击后将在菜单中看到一个新选项。例如，让我们选择 aspnetcore-react.js（见 图 14.15）：
图 14.15 – 在项目中编译文件的 Web 编译器选项
使用 Web 编译器 | 编译文件 选项，我们可以编译文件并使用 ECMAScript 2009 (ES5) 生成一个新的版本，这是一个允许我们支持旧版浏览器的 JavaScript 规范。请参见 图 14.16 中生成的文件：
图 14.16 – 由 Web 编译器生成的 aspnetcore-react.es5.js
aspnetcore-react.es5.js 文件包含与 aspnetcore-react.js 相同的逻辑，但使用不同的语法。
以下代码表示 aspnetcore-react.js 文件的前 20 行：
// This script configures the .env.development.local file with additional environment variables to configure HTTPS using the ASP.NET Core
// development certificate in the webpack development proxy.
const fs = require('fs');
const path = require('path');
const baseFolder =
process.env.APPDATA !== undefined && process.env.APPDATA !== ''
? `${process.env.APPDATA}/ASP.NET/https`
: `${process.env.HOME}/.aspnet/https`;
const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0];
const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
if (!certificateName) {
console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
process.exit(-1);
}
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
aspnetcore-react.js 文件包含一些与后端 asp.net 应用程序和 React 应用程序之间交互相关的逻辑。此文件使用 JavaScript 的最新功能，因此 Web 编译器需要将代码编译到旧版本以支持旧浏览器并提高与其他库的兼容性。
以下代码表示 aspnetcore-react.es5.js 文件的前 20 行：
// This script configures the .env.development.local file with additional environment variables to configure HTTPS using the ASP.NET Core
// development certificate in the webpack development proxy.
'use strict';
var fs = require('fs');
var path = require('path');
var baseFolder = process.env.APPDATA !== undefined && process.env.APPDATA !== '' ? process.env.APPDATA + '/ASP.NET/https' : process.env.HOME + '/.aspnet/https';
var certificateArg = process.argv.map(function (arg) {
return arg.match(/--name=(?<value>.+)/i);
}).filter(Boolean)[0];
var certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
if (!certificateName) {
console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.');
process.exit(-1);
}
添加到 Web 编译器中的每个文件都将包含在一个名为 compilerconfig.json 的文件中。此文件与 Visual Studio 的编译过程相关联。这意味着我们可以正常构建和发布项目，相关文件将自动生成。
这是使用 aspnetcore-react.js 文件后 compilerconfig.json 文件的示例：
[
{
"outputFile": "ClientApp/aspnetcore-https.es5.js",
"inputFile": "ClientApp/aspnetcore-https.js"
},
{
"outputFile": "ClientApp/aspnetcore-react.es5.js",
"inputFile": "ClientApp/aspnetcore-react.js"
}
]
每个配置都是一个包含两个属性的 JSON 对象 – inputFile 是要编译的源文件的位置，而 outputFile 是 Web Compiler 生成的文件的位置。
重要提示
您可以使用 Shift + Alt + Y 编译 compilerconfig.json 中包含的所有文件。
更多信息，您可以在 GitHub 上的文档中阅读：github.com/failwyn/WebCompiler。
现在您已经了解了如何使用 Web Compiler 以及如何将 JavaScript 文件转换为使用 ES5。让我们看看另一个扩展，它扩展了我们的编辑器的功能，并允许我们查看一些指南，轻松区分空白和空白空间。
使用缩进指南识别空白
在第十三章“Visual Studio 中的扩展”，我们回顾了一些 Visual Studio 中的扩展，包括颜色预览。使用这些扩展，我们学习了如何扩展 Visual Studio 中的文本编辑器以提升我们的体验并提供更多针对某些技术和场景的工具。缩进指南就是这类扩展的另一个例子，它扩展了 Visual Studio 中的文本编辑器。
缩进指南是一个简单但实用的扩展，帮助我们识别代码结构中的额外空白和缩进。
安装缩进指南
要安装缩进指南，请在搜索栏中的缩进指南处进行操作（见图 14.17）：
![图 14.17 – 管理扩展中的缩进指南
![img/Figure_14.17_B17873.jpg]
图 14.17 – 管理扩展中的缩进指南
点击index.html文件，查看在文本编辑器中显示的新的指南，这些指南展示了文本和文本编辑器中的元素之间的空白和制表符（见图 14.18）：
![图 14.18 – Visual Studio 文本编辑器中的指南
![img/Figure_14.18_B17873.jpg]
图 14.18 – Visual Studio 文本编辑器中的指南
此工具对于改善我们文件的格式非常出色，并且与 Visual Studio 支持的所有编程语言兼容。还有一些额外的选项我们可以调整以适应我们的偏好。导航到工具 | 选项 | 缩进指南。在那里，我们将找到许多选项来更改外观、行为和突出显示，并设置快速启动或默认配置。
摘要
Visual Studio 有一个市场，其中包含许多我们可以通过使用 Visual Studio 管理扩展选项访问的扩展。在 Studio 市场中，我们可以找到许多与代码片段相关的扩展，并使用 HTML Snippet Pack 来提高我们在 HTML 文件中编码时的生产力。
你现在已经知道了如何使用 CodeMaid 来清理代码并提高项目中的代码质量。你可以轻松地删除空行和空白，并为项目中的所有文件创建自定义验证格式。你还学习了如何安装 Web Compiler 来编译和转换网页文件，例如 JavaScript 文件或库，如 LESS 和 Sass，将其转换为浏览器可以轻松读取的通用代码。最后，你探索了 Indent Guides 扩展，它显示了代码中的空白和空白字符，帮助我们识别如何改进文件的格式和结构。
在第十五章“学习键盘快捷键”中，你将回顾 Visual Studio 默认包含的最重要快捷键。有了这些知识，你将使用一些键盘键的组合在 Visual Studio 中执行常见操作。
第十五章：学习键盘快捷键
在这本书中，我们分析了一些帮助我们提高生产力的快捷键，通过组合一些键来执行 IDE 和源代码中的常见操作。Visual Studio 默认包含一些有用的快捷键，但我们也有可能根据我们的需求或我们每天需要执行的常见操作创建自己的快捷键。
在本章中，我们将提供 Visual Studio 2022 默认包含的最重要快捷键的总结，以及一个展示如何创建我们自己的快捷键的部分。
在本章中，我们将回顾以下主题：
-
在源代码中使用最频繁的快捷键
-
在 IDE 中使用的最常见快捷键
-
创建自定义快捷键
当使用 Visual Studio 时，了解键盘快捷键非常重要，这样我们才能快速执行操作。这将防止你在格式化整个源代码文件或重命名类成员等重复性任务上浪费时间。
重要的是你要将这些键盘快捷键付诸实践，并开始逐渐使用它们，即使开始时执行得慢一些。你会发现随着时间的推移，你会自动执行它们，而无需任何视觉辅助。
让我们学习如何通过快捷键提高我们的生产力。
技术要求
要使用此项目的快捷键，你必须已经安装了包含已安装的 Web 开发工作负载的 Visual Studio 2022，如第一章中所示，“Visual Studio 入门”。在第四章中创建的 SPA 基础项目也同样重要，“项目和模板”。
重要的是要注意，存在不同的键盘映射方案，可以完全修改快捷键。此外，如 ReSharper 这样的扩展也可以修改键盘快捷键。为了正确执行本章中显示的所有快捷键，你必须有一个默认键盘映射方案，可以从工具 | 选项 | 环境 | 键盘菜单中选择。
让我们进入快捷键的世界，这无疑会使你成为一个更高效、更有生产力的程序员。
在源代码中使用的快捷键
与源代码一起工作涉及处理数千行代码，即使是经验最丰富的开发者也可能感到头疼。这就是为什么 Visual Studio 中包含的强大搜索工具是搜索和导航代码行的绝佳方式。
同样，代码编辑和重构任务在项目中是持续进行的，更不用说在大项目中进行的调试和测试了。
这就是为什么在作为开发者的职业生涯中，使用提供即时访问这些工具的快捷键应该是一个优先事项。让我们看看这些键盘快捷键是什么。
用于搜索和导航源代码的快捷键
当在一个单类项目中工作时，快速查找类的成员可能看起来像是一项简单的任务，但如果您与包含数百个类或甚至在同一解决方案中包含几个项目的项目一起工作，您可能就不会这样认为。在这些时刻，以下键盘快捷键将非常有帮助。
让我们看看将帮助我们快速搜索和导航 Visual Studio 的快捷键：
-
Ctrl + Q: 显示 Visual Studio 搜索
-
Ctrl + T: 显示 转到所有 工具
-
Ctrl + -: 在当前会话中导航到打开的文档之间
-
Ctrl + Shift + -: 在当前会话中导航到打开的文档之间
-
F12: 导航到类定义
-
Alt + F12: 允许您在弹出窗口中查看和编辑您正在编写的代码文件的类代码
-
Ctrl + F12: 当错误列表窗口打开且列出多个错误时，导航到下一个错误行
-
Ctrl + Shift + F12: 当错误列表窗口打开且列出多个错误时，导航到下一个错误行
-
F8: 在当前窗口的结果列表中向前导航
-
Shift + F8: 在当前窗口的结果列表中向后导航
这里讨论的快捷键允许您在不离开键盘的情况下快速在文件、成员、结果和实现之间导航。现在，让我们看看编辑和重构中最常见的快捷键。
重要提示
您可以在以下链接中查看 Visual Studio 中所有最常用的快捷键：docs.microsoft.com/visualstudio/ide/default-keyboard-shortcuts-in-visual-studio?view=vs-2022。我们鼓励您下载该文件，打印出来，并将其放在您附近，以便快速参考这些快捷键。
编辑和重构的快捷键
我们将在本小节中看到的命令对应于允许您直接对源代码应用更改的命令。其中最常见的操作包括重命名成员、注释代码行以及上下移动行。让我们看看将使编写代码更加容易的快捷键列表：
-
Alt + Enter: 显示快速操作
-
Ctrl + K, Ctrl + I: 获取有关类成员的信息
-
Ctrl + K, Ctrl + C: 取消注释源代码中选中的多行
-
Ctrl + K, Ctrl + U: 取消注释源代码中选中的多行
-
Ctrl + Shift + L: 删除选中的行
-
Ctrl + Shift + V: 显示并允许从缓冲区中粘贴内容（它指的是之前已复制的元素的历史记录）
-
Ctrl + F: 在代码中查找特定文本
-
Ctrl + A: 选择当前文件中的所有行
-
Ctrl + S: 保存当前文件中的待处理更改
-
Ctrl + Shift + S: 保存所有打开文件中的待处理更改
-
Ctrl + Shift + .: 放大当前文件
-
Ctrl + Shift + ,: 从当前文件缩放出去
-
Ctrl + Up: 在代码文件中向上移动选定的行
-
Ctrl + Down: 在代码文件中向下移动选定的行
-
Ctrl + K, Ctrl + D: 将样式规则应用于整个文档
-
Ctrl + K, Ctrl + F: 仅在文档中选定的行上应用样式规则
-
Ctrl + K, Ctrl + S: 用于将代码封装在常见的子句之间，例如循环（
while、for等）、控制语句（if、switch等）或代码区域（#region）。 -
Ctrl + R, Ctrl + R: 重命名成员
-
Ctrl + R, Ctrl + E: 为类的字段创建属性
-
Ctrl + R, Ctrl + G: 在类中删除未使用的
using语句并按字母顺序排序 -
Ctrl + R, Ctrl + M: 从选定的代码创建方法
现在我们已经了解了编辑和重构代码的主要快捷键，让我们来看看那些将帮助我们优化调试和测试任务的快捷键。
调试和测试的快捷键
调试和代码执行是我们使用 Visual Studio 期间将执行的最常见任务之一。因此，了解可以帮助我们快速执行这些任务的键盘快捷键非常重要。因此，在本小节中，我们将提到最关键的快捷键，这些快捷键专注于这些任务：
-
F5: 以调试模式启动应用程序
-
Ctrl + F5: 不带调试模式启动应用程序
-
Shift + 5: 当应用程序正在运行时停止应用程序
-
Ctrl + Shift + F5: 停止应用程序执行，重新构建项目，并创建一个新的调试会话
-
F9: 设置或删除断点
-
F10: 在调试时跳过代码执行
-
F11: 逐行调试源代码
-
Shift + F11: 从方法执行中退出
-
Ctrl + R, Ctrl + A: 在调试模式下启动单元测试执行
-
Ctrl + R, A: 不带调试模式启动单元测试执行
这就完成了可以帮助我们提高使用源代码时时间的快捷键列表。现在，让我们回顾一下可以帮助我们在 IDE 环境中执行快速操作的快捷键。
在 IDE 中使用的最常见快捷键
知道如何在 Visual Studio IDE 中通过快捷键导航是一个避免浪费时间在菜单中搜索以激活特定面板的重要部分。例如，错误地关闭解决方案资源管理器或属性窗口，并且不知道哪个菜单包含打开它们的选项是很常见的。这就是为什么在本节中，我们将检查将加快这些任务性能的快捷键：
-
Ctrl + [ + S: 如果我们有一个文件打开，此快捷键允许我们在解决方案资源管理器窗口中快速选择它。
-
Ctrl + Alt + L: 打开解决方案资源管理器窗口。
-
Ctrl + Alt + O: 打开输出窗口。
-
Ctrl + **, E: 打开错误列表窗口。
-
Ctrl + **, Ctrl + M: 打开团队资源管理器窗口。
-
Ctrl + Alt + B: 打开 断点 窗口。
-
F4: 打开 属性 窗口。
-
Alt + F6: 允许您在打开的面板上的窗口之间向后滚动。
-
Shift + Alt + F6: 允许您在打开的面板上的窗口之间向前滚动。
-
Shift + Esc: 允许您关闭当前的工具窗口。
-
Ctrl + Alt + Pg Up: 允许在打开的文档之间向上滚动，即使它们不是同一个会话。
-
Ctrl + Alt + Pg Dn: 允许在打开的文档之间向下滚动，即使它们不是同一个会话。
-
Ctrl + Tab: 显示一个包含打开文档的特殊窗口，并选择最近的一个。
-
Ctrl + Shift + Tab: 显示一个包含打开文档的特殊窗口，并选择最不最近的一个。
-
Shift + Alt + Enter: 允许您将 Visual Studio 环境置于全屏，以便您专注于当前文档。使用相同的快捷键退出全屏模式。
-
Ctrl + K + K: 在我们定位的行中创建一个书签。如果该行上已经有一个书签，它将被删除。
重要提示
书签是 Visual Studio 的一个功能，允许您标记代码中的行，以便快速返回。您可以在以下链接中找到更多关于它们的信息：
docs.microsoft.com/en-us/visualstudio/ide/setting-bookmarks-in-code?view=vs-2022。 -
Ctrl + K + N: 允许您在项目的一部分中向前滚动不同的书签。
-
Ctrl + K + P: 允许您在项目的一部分中向后滚动不同的书签。
到目前为止，您已经学习了 Visual Studio 中最常见和最有用的快捷键，但有一种方法可以创建我们自己的快捷键来适应 Visual Studio 的需求。让我们一步一步分析如何创建自定义快捷键。
创建自定义快捷键
我们可以在 Visual Studio 中为特定的动作创建自己的快捷键，并且有多个选项可用于自定义当前快捷键。
您可以导航到 工具 | 选项 | 环境 | 键盘 来查看 Visual Studio 中所有当前快捷键（如图 15.1 所示）：
图 15.1 – 定制快捷键的键盘选项
您可以在 Visual Studio 中找到所有当前的功能快捷键和快捷键方案，您可以根据上下文设置它们。默认情况下，Visual Studio 包含不同的键盘方案，具有不同的快捷键配置。（见 图 15.2）：
图 15.2 – 快捷键映射方案
要创建一个新的快捷键，在 Apply the following additional keyboard mapping scheme 选项中选择（默认），然后选择 Analyze.RunDefaultCodeCleanUpOnSolution 命令。此命令执行一个过程来清理代码，以改善格式并删除不必要的代码。最后，你可以在 Press shortcut keys 选项中添加 Ctrl + Alt + Y 组合来为该命令分配快捷键（见 图 15.3）：
![Figure 15.3 – Assigning the Ctrl + Alt + Y shortcut to a command
![img/Figure_15.03_B17873.jpg]
图 15.3 – Assigning the Ctrl + Alt + Y shortcut to a command
现在，点击 Assign，然后点击 OK 以确认并添加此新快捷键到 Visual Studio，并在解决方案中快速执行默认的清理过程（见 图 15.4）：
![Figure 15.4 – The shortcut is assigned to the command
![img/Figure_15.04_B17873.jpg]
图 15.4 – 快捷键已分配给命令
在为选定的命令分配快捷键后，你可以在 Visual Studio 中尝试使用它。在这种情况下，Analyze.RunDefaultCodeCleanUpOnSolution 命令可以全局使用，因此你只需打开 SPAProject，然后按下 Ctrl + Alt + Y，Visual Studio 将对解决方案执行清理操作。
重要提示
你可以覆盖 Visual Studio 中默认包含的快捷键。然而，这不是最佳实践，因为你正在改变 Visual Studio 的正常行为，在其他环境中工作可能会变得困难。
摘要
在本章中，我们学习了 Visual Studio 中的快捷键，并回顾了我们可以在编码或使用工具或功能执行操作时使用的所有有用快捷键。
在了解了如何在日常工作中使用快捷键的知识后，你将越来越少地依赖键盘在 Visual Studio 中执行操作，这将使你成为一个高效的开发者。
我们还学习了如何创建自己的快捷键，并使用键组合在我们的项目中自动化常见任务。
从我们开始的地方——分析 Visual Studio 是什么（第一章，开始使用 Visual Studio 2022），可用的版本有哪些，以及如何在本地环境中安装它——到当前章节，我们学习了快捷键。
到目前为止，我们必须祝贺你完成了本书的阅读。我们希望你喜欢阅读它，就像我们喜欢写作它一样。下一步是开始工作，并将你在作为开发者日常工作中获得的知识付诸实践。编码愉快。
浙公网安备 33010602011771号