丁香五月天综合缴情网,凹凸国产熟女精品视频app,67194熟妇在线观看线路1

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

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

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

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

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

先決條件

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

您需要使用現(xiàn)有的或新的 Angular 5 項目才能試驗代碼片段。我假設您擁有最新版本的 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片段！這意味著您可能應該在創(chuàng)建自己的代碼片段之前檢查一下市場。如前所述，我們將介紹 Angular 5 代碼片段。在您的工作區(qū)中找到現(xiàn)有的 Angular 5 項目，或者創(chuàng)建一個新的項目：

<code>npm install -g @angular/cli

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

項目設置完成後，在 VS Code 中打開它。接下來，單擊活動欄上的擴展圖標以打開“擴展”面板。搜索 Angular 5。搜索結(jié)果應列出多個 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 文件夾內(nèi)創(chuàng)建一個名為 app.service.ts 的新文件。打開文件並開始鍵入“a-service”。鍵入時，將出現(xiàn)一個彈出列表。甚至在您完成鍵入之前，您也應該已經(jīng)突出顯示了正確的選項。按 enter 鍵插入模板。輸入代碼片段後，請注意，生成的類名已突出顯示，以便您更改。

Boosting Your Workflow with Angular 5 Snippets and VS Code

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

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

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

Boosting Your Workflow with Angular 5 Snippets and VS Code

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

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

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

Boosting Your Workflow with Angular 5 Snippets and VS Code

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

<code>npm install -g @angular/cli

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

將 URL 更改為虛構(gòu)路徑——例如 /posts。顯然，我們的代碼無法運行，因為我們尚未設置任何 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ā)關鍵字。
body——代碼片段將插入的代碼。
description——無需解釋。

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

Boosting Your Workflow with Angular 5 Snippets and VS Code

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

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

Boosting Your Workflow with Angular 5 Snippets and VS Code

要實現(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 服務的模板。我建議您瀏覽該項目，因為它包含許多您可以學習的非常有用的模板。

總結(jié)

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

Boosting Your Workflow with Angular 5 Snippets and VS Code

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

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

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

關於在 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)建一個代碼片段，並在需要時使用它。這樣，您可以更多地關注應用程序的邏輯，而不是編寫樣板代碼。