Angular 5スニペットとVSコードでワークフローをブーストする

ビジュアルスタジオコードのAngular 5コードスニペットは、生産性を大幅に向上させ、重複コードを作成する必要性を減らします。 VSコード市場は、Angular 5を含むさまざまなプログラミング言語向けのさまざまなコードスニペットを提供します。これらのコードスニペットは、Angular 5プロジェクトでインストールして使用できます。ユーザーは、テキストメイトで定義された同じ構文を使用して、VSコードで独自のコードスニペットを作成できます。これらのカスタムコードスニペットは、タブストップ、プレースホルダー、および選択リストを挿入することにより、インタラクティブにできます。 Project Root Directoryに.VSCODEフォルダーを作成し、リポジトリに送信することにより、コードスニペットをチームメンバーと共有できます。より広範な共有のために、スニペットをパブリックサーバーにアップロードしたり、VSコードマーケットプレイスへの拡張機能として公開したりできます。

この記事では、Visual StudioコードでAngular 5コードスニペットを使用してワークフローを改善する方法に焦点を当てています。まず、コードスニペットを使用および作成することの基本について説明します。 AngularプロジェクトでVSコードのAngular Code Snippetを使用する方法を学びます。次に、コードの独自のスニペットを作成し、他の人と共有する方法を学びます。

プログラミング言語に熟練している人にとって、同じコードを何度も入力することがどれほど退屈であるか。最終的には、コードスニペットのコピーと貼り付けを開始して、指で再びループを書き込む痛みを避けます。

編集者が入力するときにこの共通コードを自動的に挿入するのに自動的に役立つ場合は素晴らしいことですよね？

わかりました、おそらくそれらがコードスニペットと呼ばれていることを知っています。これは、すべての現代のIDEで一般的な機能です。メモ帳さえもそれらをサポートします（デフォルトでは有効ではありませんが）。

前提条件

開始する前に、コンピューターに最新バージョンのVisual Studioコードをインストールする必要があります。 Angular 5コードスニペットも紹介します。したがって、少なくともAngularの基本を持つことは役立ちますが、必ずしもそうではありません。

既存または新しいAngular 5プロジェクトを使用して、コードスニペットを実験する必要があります。 node.jsの最新バージョン、または少なくともnode.js 6以下があると仮定しています。まだ行っていない場合は、Angular CLIツールをインストールするコマンドを次に示します。

<code>npm install -g @angular/cli

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

• if
• ifelse
• forof
• settimeout
入力すると、ポップアップリストが表示され、コードをオートコンプリートするオプションが表示されます。正しいスニペットが強調表示されたら、

これらのJavaScriptコードスニペットがどこから来たのか疑問に思うかもしれません。さて、正確な定義はで見つけることができます

• Windows - C：プログラムfilesmicrosoft vs coderesourcesappextensionsjavascriptsnippetsjavascript.json
• linux - /usr/share/code/resources/app/extensions/javascript/snippets/javascript.json

独自のコードスニペットを作成する方法について説明しますが、最初にサードパーティのコードスニペットをいくつか見てみましょう。

コードスニペットの使用方法

執筆時点で、Visual Studio Marketplaceには、コードスニペットカテゴリの934拡張機能がリストされています。作成されたプログラミング言語（Pascalを含む！）ごとに書かれたコードのスニペットがあります！これは、おそらく独自のコードスニペットを作成する前に市場をチェックする必要があることを意味します。前述のように、Angular 5コードスニペットを導入します。ワークスペースで既存のAngular 5プロジェクトを見つけたり、新しいプロジェクトを作成したりします。

<code>npm install -g @angular/cli

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

を押して、キーを入力してテンプレートを挿入します。コードスニペットを入力した後、生成されたクラス名が強調表示され、変更できるように注意してください。

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

次に、別のコードスニペットを使用してHTTP Getリクエストを定義しましょう。空のGETメソッドを定義しましょう。このコードの場合、コピーして貼り付けないでください

「Observable」の入力を開始すると、コードスニペットオプションが表示されます。

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

次に、別のコードスニペットを使用して関数を完了しましょう。次のプレフィックスの入力を開始します：「a-httpclient-get」。 ENTERキーを押すと、このコードスニペットが挿入されます：

<code>npm install -g @angular/cli

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

URLを架空のパス（たとえば /投稿など）に変更します。明らかに、APIをまだ設定していないため、コードは実行されません。取得後にを追加して修正します。完全な方法を以下に示します。

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

Angular 5コードスニペットの使用方法を学んだので、それらがどのように作成されているかを見てみましょう。

Angular 5コードスニペットを作成する方法

Visual Studioコードで使用される構文は、Textmateで定義されている構文と同じです。実際、テキストメイトからコードスニペットをコピーすると、VSコードで実行されます。ただし、VSコードは「補間シェルコード」機能をサポートしていないことを忘れないでください。

コードスニペットを作成する最も簡単な方法は、コマンドパネルを介して「設定：ユーザーコードスニペットを構成する」を開くことです（ctrl Shift p ）それを選択し、構文を作成する言語を選択します。 TypeScript用の1つを今すぐ作成しましょう。 TypeScript.jsonを開いた後、このコードスニペットテンプレートを最初とエンディングブラケットに配置します：

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

テンプレート構造を紹介させてください：

• 「Print Hello World」 - コードスニペットテンプレートのタイトル。好きなようにタイトルを追加できます。
• プレフィックス - コードスニペットのトリガーキーワード。
• ボディ - コードスニペットが挿入するコード。
• 説明 - 説明は必要ありません。

これは基本的に、書くことができる最も簡単なスニペットテンプレートです。ファイルを保存した後、空白のタイプスクリプトを作成し、接頭辞helloをテストします。入力時にポップアップリストが表示されます。

コードスニペットが強調表示されたら、キーの入力を押してください。次のコードを挿入する必要があります

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

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

今すぐコードスニペットを試してみてください。デフォルト値を変更したり、デフォルト値をスキップしたりできます。それでは、開発者向けの選択肢のリストを提供しましょう：

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

選択リストを実装するには、次のようにコンソールの行を交換するだけです。

<code>npm install -g @angular/cli

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

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

要約

コードスニペットの作成方法を学んだので、チームメンバー、友人、または一般の人々と共有することをお勧めします。チームメイトとコードスニペットを共有する最も簡単な方法は、プロジェクトのルートに.VSCODEフォルダーを作成することです。スニペットという名前のサブフォルダーを作成し、すべてのテンプレートを次のように配置します。

このフォルダーを必ず送信して、全員がリポジトリで見つけることができるようにしてください。友達や一般の人々と共有するには、さまざまなオプションを使用できます。

コードスニペットを使用するこの簡単な紹介が、プログラミングを簡素化するのに役立つことを願っています！
• VSコードのAngular 5コードスニペットで生産性の向上に関するFAQ

VSコードでAngular 5コードスニペットを使用する方法は？

VSコードでAngular 5コードスニペットを使用するには、コードのコードスニペットのプレフィックスを入力し、提案リストでコードスニペットを選択するだけです。コードスニペットがカーソル位置に挿入されます。タブキーを使用して、コードスニペットでプレースホルダー間でナビゲートすることもできます。

Angular 5コードスニペットは何ですか？

ループを作成するための「ngfor」、条件付きステートメントを追加するための「ngfor」、双方向データ結合のための「ngmodel」、「ngcomponent」など、多くの有用なAngular 5コードスニペットがあります。これらのコードスニペットは、コーディングプロセスを大幅に高速化できます。

Angular 5コードスニペットは他のコードスニペットと比較してどのように比較されますか？

Angular 5コードスニペットは、VSコードの角度発達のために特別に設計されています。それらは、角度アプリケーションで一般的に使用される一連の事前定義されたコード構造を提供し、一般的なコードスニペットよりも効率的で便利なものにします。

Angularの他のバージョンにAngular 5コードスニペットを使用できますか？

Angular 5コードスニペットはAngular 5用に設計されていますが、これらのコードスニペットの多くは、Angularの他のバージョンでも使用できます。ただし、構文と機能にはいくつかの違いがある可能性があるため、Angularバージョン用に特別に設計されたコードスニペットを使用することをお勧めします。

VSコードでAngular 5コードスニペットを使用することに制限はありますか？

Angular 5コードスニペットは生産性を大幅に向上させることができますが、基礎となるコードを理解するための代替ではありません。各コードスニペットが何をし、それらを効果的に使用するためにどのように機能するかを知ることが重要です。

ワークフローを改善するためにVSコードでAngular 5コードスニペットを使用する方法は？

Angular 5コードスニペットの使用に加えて、コード完了のためのIntelliSense、トラブルシューティング用のデバッグツール、バージョンコントロール統合用のGITなど、VSコードの他の機能を使用してワークフローを改善できます。

VSコードのAngular 5コードスニペットのリソースはどこにありますか？

公式対コードドキュメント、Angularドキュメント、およびさまざまなオンラインチュートリアルやフォーラムで、VSコードのAngular 5コードスニペットに関するリソースをさらに見つけることができます。これらのリソースは、Angular 5コードスニペットを効果的に使用する方法に関するより詳細な情報と実用的な例を提供できます。

以上がAngular 5スニペットとVSコードでワークフローをブーストするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。