Angular 5代码片段和VS Code提升您的工作流程

在本文中，我们将重点介绍如何在Visual Studio Code中使用Angular 5代码片段来改善工作流程。 我们首先从使用和创建代码片段的基础开始。 我们将研究如何在Angular项目中将Angular 代码片段用于VS Code 。 然后，我们稍后将看我们如何创建自己的代码片段并与他人共享。

对于精通编程语言的任何人，您都知道一次又一次地键入相同的代码是多么无聊。 您最终开始复制和粘贴代码片段，以免您为编写另一个for循环而烦恼。

如果您的编辑器可以帮助您在键入时自动为您插入此通用代码，该怎么办？ 那太棒了吧？

好吧，您可能将它们称为摘要 。 此功能在当前可用的每个现代IDE中都很常见。 甚至Notepad ++也支持它们（尽管默认情况下未启用）。

先决条件

在开始之前，您需要在计算机上安装最新版本的Visual Studio Code 。 我们还将讨论Angular 5片段。 因此，至少具有Angular的基本知识将有所帮助，但不是必需的。

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

npm install -g @angular/cli

# or
yarn global add @angular/cli

片段说明

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

• log
• if
• ifelse
• forof
• settimeout

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

您可能想知道这些JavaScript代码段的确切来源。 好了，您可以在以下位置找到确切的定义：

• Windows – C:\Program Files\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json
• Linux – /usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

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

如何使用摘要

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

ng new snippets-demo

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

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

只需键入“ App”，整个类名将显示为“ AppService”。 很方便吧？ 让我们尝试一些不同的东西。 删除app-service.ts的整个代码，然后输入以下前缀：

a-service-httpclient

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

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

getPosts(): Observable<any[]> {

}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

当您开始输入“可观察”时，将出现一个摘要选项。 只需按Enter键，Observable类将自动为您导入。

接下来，让我们使用另一个代码段来完成该功能。 开始输入以下前缀：“ a-httpclient-get”。 按Enter将为您插入以下代码段：

return this.httpClient.get('url');

将URL更改为假想的路径-假设/posts 。 显然，由于未设置任何API，因此我们的代码无法运行。 通过在get之后添加<any>进行修复。 现在，完整的方法如下所示。

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

现在我们对如何使用Angular 5片段有了一点了解，让我们看看它们是如何创建的。

如何创建Angular 5片段

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

创建代码段的最简单方法是通过使用命令面板（ ctrl + shift + p ）打开Preferences:Configure User Snippet 。 选择它，然后选择您要为其创建语法的语言。 现在为TypeScript创建一个。 打开typescript.json ，将此代码段模板放在右括号和右括号中：

"Print Hello World": {
  "prefix" : "hello",
  "body": [
    "console.log('Hello World!');"
  ],
  "description": "Print Hello World to console"
}

让我回顾一下模板结构：

• “打印Hello World”-摘要模板的标题。 您可以放置​​任何标题。
• prefix —代码段的trigger关键字。
• 正文-代码段将插入的代码。
• 说明-无需解释这一点。

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

您的代码段突出显示后，只需按回车即可。 您应该为您插入以下代码：

console.log('Hello World');

太好了吧？ 现在，通过插入一些制表位来使代码片段模板具有交互性。

"Print Hello World": {
  "prefix" : "hello",
  "body": [
    "console.log('Hello $1!');",
    "$2"
  ],
  "description": "Print Hello World to console"
}

现在再次尝试输入前缀。 此版本允许您插入名称。 输入完毕后，只需按Tab键，光标就会停在新的一行。 $0表示最后一个制表位。 您可以使用$1或更高$1创建多个制表位。 但是，如果我们想插入默认值怎么办？ 我们可以使用如下所示的占位符： ${1:World} 。 这是完整的模板：

"Print Hello World": {
  "prefix" : "hello",
  "body": [
    "console.log('Hello ${1:World}!');",
    "$0"
  ],
  "description": "Print Hello World to console"
}

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

要实现选择列表，只需像这样替换console.log行：

...
"console.log('Hello ${1|World,Earth,Terra|}!');",
...

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

"Angular HttpClient Service": {
    "prefix": "a-service-httpclient",
    "description": "Angular service with HttpClient",
    "body": [
      "import { Injectable } from '@angular/core';",
      "import { HttpClient } from '@angular/common/http';",
      "import { catchError } from 'rxjs/operators';",
      "",
      "@Injectable()",
      "export class ${1:ServiceName}Service {",
      "\tconstructor(private httpClient: HttpClient) { }",
      "\t$0",
      "}"
    ]
  }

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

摘要

既然您已经学会了如何创建代码片段，那么您可能想与他们的团队成员，朋友或公众分享这些代码片段。 与队友共享代码片段的最简单方法是在项目根目录下创建一个.vscode文件夹。 创建一个名为snippets的子文件夹，并将所有模板放在此处，如下所示：

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

• 您可以将片段上传到公共服务器，例如Google Drive，Dropbox甚至Pastebin。
• 您可以将片段作为扩展发布在VS Code Marketplace上 。

我希望这段关于片段的简短介绍将帮助您简化编程生活！

翻译自: https://www.sitepoint.com/boosting-workflow-angular-5-snippets-vs-code/