Visual Studio Code 中的 Angular 5 代碼片段可顯著提高工作效率，減少編寫重復代碼的需求。 VS Code 市場提供各種針對不同編程語言（包括 Angular 5）的代碼片段。這些代碼片段可以安裝并用于任何 Angular 5 項目。用戶可以使用 TextMate 中定義的相同語法在 VS Code 中創(chuàng)建自己的代碼片段。通過插入制表符停止符、占位符和選擇列表，可以使這些自定義代碼片段具有交互性?？梢酝ㄟ^在項目根目錄下創(chuàng)建 .vscode 文件夾并將其提交到存儲庫來與團隊成員共享代碼片段。為了更廣泛地共享，可以將代碼片段上傳到公共服務(wù)器或作為擴展程序發(fā)布到 VS Code 市場。

本文重點介紹如何在 Visual Studio Code 中使用 Angular 5 代碼片段來改進工作流程。我們將首先介紹使用和創(chuàng)建代碼片段的基礎(chǔ)知識。我們將了解如何在 Angular 項目中使用 VS Code 的 Angular 代碼片段。然后，我們將了解如何創(chuàng)建自己的代碼片段并與他人共享。

對于任何精通某種編程語言的人來說，一遍遍地鍵入相同的代碼是多么無聊。最終，您會開始復制和粘貼代碼片段，以避免手指再次編寫 for 循環(huán)的痛苦。

如果您的編輯器可以在您鍵入時自動幫助您插入此常用代碼，那將非常棒，對吧？

好吧，您可能知道它們被稱為代碼片段。這是當前所有現(xiàn)代 IDE 中都常見的特性。甚至 Notepad 也支持它們（盡管默認情況下未啟用）。

先決條件

在開始之前，您需要在計算機上安裝最新版本的 Visual Studio Code。我們還將介紹 Angular 5 代碼片段。因此，至少具備 Angular 的基本知識會有所幫助，但并非必需。

您需要使用現(xiàn)有的或新的 Angular 5 項目才能試驗代碼片段。我假設(shè)您擁有最新版本的 Node.js，或者至少是 Node.js 6 以上的版本。如果您還沒有，以下是安裝 Angular CLI 工具的命令：

<code>npm install -g @angular/cli

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

代碼片段詳解

代碼片段是可以輕松插入重復代碼的模板。首次安裝 VS Code 時，它會預安裝 JavaScript 代碼片段。要查看它們，只需打開現(xiàn)有的 JavaScript 文件或在工作區(qū)中創(chuàng)建一個新文件，然后嘗試鍵入以下前綴：

• log
• if
• ifelse
• forof
• settimeout

鍵入時，將出現(xiàn)一個彈出列表，為您提供代碼自動完成的選項。一旦突出顯示正確的代碼片段，只需按 enter 鍵即可插入代碼片段。在某些情況下，例如 log 和 for，您可能需要按向下鍵來選擇正確的代碼片段。

您可能想知道這些 JavaScript 代碼片段究竟來自哪里。好吧，您可以在以下位置找到確切的定義：

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

我們將研究如何創(chuàng)建自己的代碼片段，但首先讓我們探索一些第三方代碼片段。

如何使用代碼片段

在撰寫本文時，Visual Studio 市場在代碼片段類別中列出了 934 個擴展程序。您將找到為每種創(chuàng)建的編程語言（包括 Pascal?。┚帉懙拇a片段！這意味著您可能應(yīng)該在創(chuàng)建自己的代碼片段之前檢查一下市場。如前所述，我們將介紹 Angular 5 代碼片段。在您的工作區(qū)中找到現(xiàn)有的 Angular 5 項目，或者創(chuàng)建一個新的項目：

<code>npm install -g @angular/cli

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

項目設(shè)置完成后，在 VS Code 中打開它。接下來，單擊活動欄上的擴展圖標以打開“擴展”面板。搜索 Angular 5。搜索結(jié)果應(yīng)列出多個 Angular 擴展程序。安裝作者為“John Papa”的擴展程序。安裝完成后，單擊重新加載按鈕以重新啟動 VS Code。此 Angular 5 代碼片段擴展程序包含 50 多個代碼片段。大約 70% 的代碼片段是為 TypeScript 編寫的，其余大部分是為 HTML 編寫的。其中也有一些 Docker 代碼片段。

讓我們嘗試一些 Angular 5 代碼片段。在 app 文件夾內(nèi)創(chuàng)建一個名為 app.service.ts 的新文件。打開文件并開始鍵入“a-service”。鍵入時，將出現(xiàn)一個彈出列表。甚至在您完成鍵入之前，您也應(yīng)該已經(jīng)突出顯示了正確的選項。按 enter 鍵插入模板。輸入代碼片段后，請注意，生成的類名已突出顯示，以便您更改。

只需鍵入“App”，整個類名將顯示為“AppService”。非常方便，對吧？讓我們嘗試不同的方法。刪除 app-service.ts 中的全部代碼，然后鍵入以下前綴：

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

您應(yīng)該會獲得一個服務(wù)類定義，包括類構(gòu)造函數(shù)中的導入和 HttpClient 注入。就像之前一樣，將類名重命名為 AppService。

接下來，讓我們使用另一個代碼片段來定義 HTTP GET 請求。讓我們定義一個空的 GET 方法。對于這段代碼，您必須鍵入；不要復制粘貼：

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

當您開始鍵入“Observable”時，將出現(xiàn)它的代碼片段選項。只需按 enter 鍵，Observable 類將自動導入。

接下來，讓我們使用另一個代碼片段來完成該函數(shù)。開始鍵入以下前綴：“a-httpclient-get”。按 enter 鍵將為您插入此代碼片段：

<code>npm install -g @angular/cli

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

將 URL 更改為虛構(gòu)路徑——例如 /posts。顯然，我們的代碼無法運行，因為我們尚未設(shè)置任何 API。通過在 get 后添加 來修復它。完整的 method 現(xiàn)在如下所示。

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

現(xiàn)在我們已經(jīng)了解了如何使用 Angular 5 代碼片段，讓我們看看它們是如何創(chuàng)建的。

如何創(chuàng)建 Angular 5 代碼片段

Visual Studio Code 中使用的語法與 TextMate 中定義的語法相同。事實上，您可以從 TextMate 復制代碼片段，它將在 VS Code 中運行。但是，請記住，VS Code 不支持“插值 shell 代碼”功能。

創(chuàng)建代碼片段的最簡單方法是通過命令面板 (ctrl shift p) 打開“首選項：配置用戶代碼片段”。選擇它，然后選擇您想要為其創(chuàng)建語法的語言。讓我們現(xiàn)在為 TypeScript 創(chuàng)建一個。打開 typescript.json 后，將此代碼片段模板放在開頭和結(jié)尾括號內(nèi)：

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

讓我介紹一下模板結(jié)構(gòu)：

• “Print Hello World”——代碼片段模板的標題。您可以隨意添加任何標題。
• prefix——代碼片段的觸發(fā)關(guān)鍵字。
• body——代碼片段將插入的代碼。
• description——無需解釋。

這基本上是您可以編寫的最簡單的代碼片段模板。保存文件后，創(chuàng)建一個空白 typescript 并測試前綴 hello。鍵入時應(yīng)出現(xiàn)彈出列表。

一旦突出顯示您的代碼片段，只需按 enter 鍵即可。您應(yīng)該已插入以下代碼：

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

很棒，對吧？現(xiàn)在讓我們通過插入一些制表符停止符來使我們的代碼片段模板具有交互性。

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

現(xiàn)在再次嘗試您的前綴。此版本允許您插入您的姓名。完成鍵入后，只需按 Tab 鍵，光標將停留在新行上。$0 表示最終制表符停止符。您可以使用 $1 和更大的數(shù)字來創(chuàng)建多個制表符停止符。但是，如果我們想插入默認值怎么辦？我們可以使用如下所示的占位符：${1:World}。這是完整的模板：

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

現(xiàn)在再次嘗試代碼片段。您可以更改默認值，也可以跳過默認值。現(xiàn)在讓我們?yōu)殚_發(fā)人員提供一個選擇列表：

要實現(xiàn)選擇列表，只需替換 console.log 行，如下所示：

<code>npm install -g @angular/cli

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

目前這些例子就足夠了。我沒有介紹變量名和轉(zhuǎn)換。要了解更多信息，請查看 John Papa 在 GitHub 上的 Angular 代碼片段。這是一個預覽：

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

這是我們之前用來創(chuàng)建 HttpClient 服務(wù)的模板。我建議您瀏覽該項目，因為它包含許多您可以學習的非常有用的模板。

總結(jié)

既然您已經(jīng)學習了如何創(chuàng)建代碼片段，您可能希望與團隊成員、朋友或公眾共享它們。與您的隊友共享代碼片段最簡單的方法是在您的項目根目錄下創(chuàng)建一個 .vscode 文件夾。創(chuàng)建一個名為 snippets 的子文件夾，并將所有模板放在其中，如下所示：

確保提交此文件夾，以便每個人都可以在存儲庫中找到它。要與您的朋友和公眾共享，您可以使用多種選項：

• 您可以將代碼片段上傳到公共服務(wù)器，例如 Google Drive、Dropbox 甚至 Pastebin。
• 您可以將代碼片段作為擴展程序發(fā)布到 VS Code 市場。

我希望這份關(guān)于使用代碼片段的簡要介紹能夠幫助您簡化編程工作！

關(guān)于在 VS Code 中使用 Angular 5 代碼片段提高工作效率的常見問題解答

什么是 Angular 5 代碼片段，它們?nèi)绾卧?VS Code 中提高工作效率？

Angular 5 代碼片段是預定義的代碼片段，可以輕松插入到 Visual Studio Code (VS Code) 中的代碼庫中。它們旨在通過減少編寫重復代碼的需求來節(jié)省時間并提高生產(chǎn)力。例如，如果您經(jīng)常使用特定的 Angular 組件結(jié)構(gòu)，您可以為其創(chuàng)建一個代碼片段，并在需要時使用它。這樣，您可以更多地關(guān)注應(yīng)用程序的邏輯，而不是編寫樣板代碼。

如何在 VS Code 中安裝 Angular 5 代碼片段？

要在 VS Code 中安裝 Angular 5 代碼片段，您需要轉(zhuǎn)到擴展視圖 (Ctrl Shift X)，搜索“Angular Snippets”，然后安裝擴展程序。安裝完成后，您可以通過在代碼中鍵入代碼片段的前綴并在建議列表中選擇代碼片段來開始使用代碼片段。

我可以在 VS Code 中創(chuàng)建自己的代碼片段嗎？

是的，您可以在 VS Code 中創(chuàng)建自己的代碼片段。為此，請轉(zhuǎn)到文件 > 首選項 > 用戶代碼片段，選擇要為其創(chuàng)建代碼片段的語言，然后在打開的 JSON 文件中定義代碼片段。您可以指定代碼片段的前綴、主體和描述。

如何在 VS Code 中使用 Angular 5 代碼片段？

要在 VS Code 中使用 Angular 5 代碼片段，您只需在代碼中鍵入代碼片段的前綴并在建議列表中選擇代碼片段即可。然后，代碼片段將插入到光標位置。您還可以使用 Tab 鍵在代碼片段中的占位符之間導航。

有哪些有用的 Angular 5 代碼片段？

有很多有用的 Angular 5 代碼片段，例如用于創(chuàng)建循環(huán)的“ngFor”、用于添加條件語句的“ngIf”、用于雙向數(shù)據(jù)綁定的“ngModel”以及用于創(chuàng)建新組件的“ngComponent”。這些代碼片段可以大大加快您的編碼過程。

Angular 5 代碼片段與其他代碼片段相比如何？

Angular 5 代碼片段專門為 VS Code 中的 Angular 開發(fā)而設(shè)計。它們提供了一組在 Angular 應(yīng)用程序中常用的預定義代碼結(jié)構(gòu)，使其比通用代碼片段更高效、更方便。

我可以將 Angular 5 代碼片段用于其他版本的 Angular 嗎？

雖然 Angular 5 代碼片段是為 Angular 5 設(shè)計的，但其中許多代碼片段也可以用于其他版本的 Angular。但是，語法和功能可能存在一些差異，因此建議使用專門為您的 Angular 版本設(shè)計的代碼片段。

在 VS Code 中使用 Angular 5 代碼片段是否存在任何限制？

雖然 Angular 5 代碼片段可以大大提高您的生產(chǎn)力，但它們不能替代對底層代碼的理解。重要的是要知道每個代碼片段的作用以及它如何工作，以便有效地使用它們。

如何使用 VS Code 中的 Angular 5 代碼片段來改進我的工作流程？

除了使用 Angular 5 代碼片段外，您還可以通過使用 VS Code 的其他功能來改進您的工作流程，例如用于代碼完成的 IntelliSense、用于故障排除的調(diào)試工具以及用于版本控制的 Git 集成。

在哪里可以找到有關(guān) VS Code 中 Angular 5 代碼片段的更多資源？

您可以在官方 VS Code 文檔、Angular 文檔以及各種在線教程和論壇中找到有關(guān) VS Code 中 Angular 5 代碼片段的更多資源。這些資源可以為您提供有關(guān)如何有效使用 Angular 5 代碼片段的更詳細的信息和實際示例。

以上是使用Angular 5片段和VS代碼來提高工作流程的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！