使用Angular 5片段和VS代码来提高工作流程-js教程-PHP中文网

Visual Studio Code 中的 Angular 5 代码片段可显着提高工作效率，减少编写重复代码的需求。 VS Code 市场提供各种针对不同编程语言（包括 Angular 5）的代码片段。这些代码片段可以安装并用于任何 Angular 5 项目。用户可以使用 TextMate 中定义的相同语法在 VS Code 中创建自己的代码片段。通过插入制表符停止符、占位符和选择列表，可以使这些自定义代码片段具有交互性。可以通过在项目根目录下创建 .vscode 文件夹并将其提交到存储库来与团队成员共享代码片段。为了更广泛地共享，可以将代码片段上传到公共服务器或作为扩展程序发布到 VS Code 市场。

本文重点介绍如何在 Visual Studio Code 中使用 Angular 5 代码片段来改进工作流程。我们将首先介绍使用和创建代码片段的基础知识。我们将了解如何在 Angular 项目中使用 VS Code 的 Angular 代码片段。然后，我们将了解如何创建自己的代码片段并与他人共享。

对于任何精通某种编程语言的人来说，一遍遍地键入相同的代码是多么无聊。最终，您会开始复制和粘贴代码片段，以避免手指再次编写 for 循环的痛苦。

如果您的编辑器可以在您键入时自动帮助您插入此常用代码，那将非常棒，对吧？

好吧，您可能知道它们被称为代码片段。这是当前所有现代 IDE 中都常见的特性。甚至 Notepad 也支持它们（尽管默认情况下未启用）。

先决条件

在开始之前，您需要在计算机上安装最新版本的 Visual Studio Code。我们还将介绍 Angular 5 代码片段。因此，至少具备 Angular 的基本知识会有所帮助，但并非必需。

您需要使用现有的或新的 Angular 5 项目才能试验代码片段。我假设您拥有最新版本的 Node.js，或者至少是 Node.js 6 以上的版本。如果您还没有，以下是安装 Angular CLI 工具的命令：

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

登录后复制

代码片段详解

代码片段是可以轻松插入重复代码的模板。首次安装 VS Code 时，它会预安装 JavaScript 代码片段。要查看它们，只需打开现有的 JavaScript 文件或在工作区中创建一个新文件，然后尝试键入以下前缀：

log
if
ifelse
forof
settimeout

键入时，将出现一个弹出列表，为您提供代码自动完成的选项。一旦突出显示正确的代码片段，只需按 enter 键即可插入代码片段。在某些情况下，例如 log 和 for，您可能需要按向下键来选择正确的代码片段。

您可能想知道这些 JavaScript 代码片段究竟来自哪里。好吧，您可以在以下位置找到确切的定义：

Windows – C:Program FilesMicrosoft VS Coderesourcesappextensionsjavascriptsnippetsjavascript.json
Linux –/usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

我们将研究如何创建自己的代码片段，但首先让我们探索一些第三方代码片段。

如何使用代码片段

在撰写本文时，Visual Studio 市场在代码片段类别中列出了 934 个扩展程序。您将找到为每种创建的编程语言（包括 Pascal！）编写的代码片段！这意味着您可能应该在创建自己的代码片段之前检查一下市场。如前所述，我们将介绍 Angular 5 代码片段。在您的工作区中找到现有的 Angular 5 项目，或者创建一个新的项目：

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

登录后复制

项目设置完成后，在 VS Code 中打开它。接下来，单击活动栏上的扩展图标以打开“扩展”面板。搜索 Angular 5。搜索结果应列出多个 Angular 扩展程序。安装作者为“John Papa”的扩展程序。安装完成后，单击重新加载按钮以重新启动 VS Code。此 Angular 5 代码片段扩展程序包含 50 多个代码片段。大约 70% 的代码片段是为 TypeScript 编写的，其余大部分是为 HTML 编写的。其中也有一些 Docker 代码片段。

Boosting Your Workflow with Angular 5 Snippets and VS Code

让我们尝试一些 Angular 5 代码片段。在 app 文件夹内创建一个名为 app.service.ts 的新文件。打开文件并开始键入“a-service”。键入时，将出现一个弹出列表。甚至在您完成键入之前，您也应该已经突出显示了正确的选项。按 enter 键插入模板。输入代码片段后，请注意，生成的类名已突出显示，以便您更改。

Boosting Your Workflow with Angular 5 Snippets and VS Code

只需键入“App”，整个类名将显示为“AppService”。非常方便，对吧？让我们尝试不同的方法。删除 app-service.ts 中的全部代码，然后键入以下前缀：

<code>ng new snippets-demo</code>

登录后复制

您应该会获得一个服务类定义，包括类构造函数中的导入和 HttpClient 注入。就像之前一样，将类名重命名为 AppService。

Boosting Your Workflow with Angular 5 Snippets and VS Code

接下来，让我们使用另一个代码片段来定义 HTTP GET 请求。让我们定义一个空的 GET 方法。对于这段代码，您必须键入；不要复制粘贴：

<code>a-service-httpclient</code>

登录后复制

当您开始键入“Observable”时，将出现它的代码片段选项。只需按 enter 键，Observable 类将自动导入。

Boosting Your Workflow with Angular 5 Snippets and VS Code

接下来，让我们使用另一个代码片段来完成该函数。开始键入以下前缀：“a-httpclient-get”。按 enter 键将为您插入此代码片段：

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

登录后复制

将 URL 更改为虚构路径——例如 /posts。显然，我们的代码无法运行，因为我们尚未设置任何 API。通过在 get 后添加来修复它。完整的 method 现在如下所示。

<code>ng new snippets-demo</code>

登录后复制

现在我们已经了解了如何使用 Angular 5 代码片段，让我们看看它们是如何创建的。

如何创建 Angular 5 代码片段

Visual Studio Code 中使用的语法与 TextMate 中定义的语法相同。事实上，您可以从 TextMate 复制代码片段，它将在 VS Code 中运行。但是，请记住，VS Code 不支持“插值 shell 代码”功能。

创建代码片段的最简单方法是通过命令面板 (ctrl shift p) 打开“首选项：配置用户代码片段”。选择它，然后选择您想要为其创建语法的语言。让我们现在为 TypeScript 创建一个。打开 typescript.json 后，将此代码片段模板放在开头和结尾括号内：

<code>a-service-httpclient</code>

登录后复制

让我介绍一下模板结构：

“Print Hello World”——代码片段模板的标题。您可以随意添加任何标题。
prefix——代码片段的触发关键字。
body——代码片段将插入的代码。
description——无需解释。

这基本上是您可以编写的最简单的代码片段模板。保存文件后，创建一个空白 typescript 并测试前缀 hello。键入时应出现弹出列表。

Boosting Your Workflow with Angular 5 Snippets and VS Code

一旦突出显示您的代码片段，只需按 enter 键即可。您应该已插入以下代码：

<code>getPosts(): Observable<any> {
}
</any></code>

登录后复制

很棒，对吧？现在让我们通过插入一些制表符停止符来使我们的代码片段模板具有交互性。

<code>return this.httpClient.get('url');
</code>

登录后复制

现在再次尝试您的前缀。此版本允许您插入您的姓名。完成键入后，只需按 Tab 键，光标将停留在新行上。$0 表示最终制表符停止符。您可以使用 $1 和更大的数字来创建多个制表符停止符。但是，如果我们想插入默认值怎么办？我们可以使用如下所示的占位符：${1:World}。这是完整的模板：

<code>getPosts(): Observable<any> {
  return this.httpClient.get<any>('/posts');
}
</any></any></code>

登录后复制

现在再次尝试代码片段。您可以更改默认值，也可以跳过默认值。现在让我们为开发人员提供一个选择列表：

Boosting Your Workflow with Angular 5 Snippets and VS Code

要实现选择列表，只需替换 console.log 行，如下所示：

<code>npm install -g @angular/cli

# 或
yarn global add @angular/cli
</code>

登录后复制

目前这些例子就足够了。我没有介绍变量名和转换。要了解更多信息，请查看 John Papa 在 GitHub 上的 Angular 代码片段。这是一个预览：

<code>ng new snippets-demo</code>

登录后复制

这是我们之前用来创建 HttpClient 服务的模板。我建议您浏览该项目，因为它包含许多您可以学习的非常有用的模板。

总结

既然您已经学习了如何创建代码片段，您可能希望与团队成员、朋友或公众共享它们。与您的队友共享代码片段最简单的方法是在您的项目根目录下创建一个 .vscode 文件夹。创建一个名为 snippets 的子文件夹，并将所有模板放在其中，如下所示：

Boosting Your Workflow with Angular 5 Snippets and VS Code

确保提交此文件夹，以便每个人都可以在存储库中找到它。要与您的朋友和公众共享，您可以使用多种选项：

您可以将代码片段上传到公共服务器，例如 Google Drive、Dropbox 甚至 Pastebin。
您可以将代码片段作为扩展程序发布到 VS Code 市场。

我希望这份关于使用代码片段的简要介绍能够帮助您简化编程工作！

关于在 VS Code 中使用 Angular 5 代码片段提高工作效率的常见问题解答

什么是 Angular 5 代码片段，它们如何在 VS Code 中提高工作效率？

Angular 5 代码片段是预定义的代码片段，可以轻松插入到 Visual Studio Code (VS Code) 中的代码库中。它们旨在通过减少编写重复代码的需求来节省时间并提高生产力。例如，如果您经常使用特定的 Angular 组件结构，您可以为其创建一个代码片段，并在需要时使用它。这样，您可以更多地关注应用程序的逻辑，而不是编写样板代码。