Home > Editor > Visual Studio Code > ドキュメント

Yoコード-拡張ジェネレーター

新規作成日 2016-05-26
最終更新日

Yoコード-拡張ジェネレーター

Yo Code - Extension Generator(原文)

私たちは、あなたが開始することを助ける、Yeomanジェネレーターを記述しました。 私たちは、ほとんどの拡張/カスタマイズをこれに分類するテンプレートを追加する予定です。

ジェネレーターをインストールします。

Install the Generator

コマンド・プロンプトから、YeomanとVS Code拡張ジェネレーターをインストールします。:

※ 予め、Node.jsをインストールしておく必要があります。参考:Node.jsのインストール

参考:Visual Studio Codeで、拡張を作成するために、YeomanとVS Code拡張ジェネレーターをインストールする。


npm install -g yo generator-code

Yoコードを実行する

Run Yo Code

Yeomanジェネレーターは、あなたのカスタマイズを作成するための、必要な手順、あるいは、 必要な情報のためのプロンプトが表示される拡張を説明します。 単純に、ジェネレーターを起動するために、コマンド・プロンプトで、以下のものをタイプします。:


yo code
Yeomanジェネレーターの実行画面

ジェネレーター・オプション

Generator Options

ジェネレーターは、新しい拡張のための拡張の骨格のどちらかを作成することができます。 あるいは、言語のための、すぐに使える拡張を作成します。 テーマやスニペットは、既存のTextMate定義ファイルに基づいています。

TypeScriptの新しい拡張

New Extension in TypeScript

「hello world」コマンドを実装する拡張の骨格を作成します。あなた独自の拡張の出発点としてこれを使用します。

  • 拡張識別子の入力を求めます。そして、現在のディレクトリで、その名前のフォルダを作成するでしょう。
  • ソース、テストと出力フォルダで、基本的なフォルダ構造を作成します
  • package.jsonファイルと拡張メインファイルのテンプレート
  • launch.jsonとtasks.jsonを設定します。そのため、F5で、コンパイルし、 そして、あなたの拡張を実行し、そして、デバッガを添付します
  • 必要に応じて、Git リポジトリを設定します
  • 一度、作成されると、作成されたフォルダ上で、VS Codeを開きます。 フォルダには、次の手順とクイック・ガイドとして、ファイルvsc-extension-quickstart.mdが、含まれています。

    参考:

    JavaScriptの新しい拡張

    New Extension in JavaScript

    新しい拡張(TypeScript)と同じことを行いますが、しかし、JavaScriptです。

    新しいカラー・テーマ

    New Color Theme

    既存のTextMateカラー・テーマに基づく、新しい色のテーマを与える拡張を作成します。

    • 既存のTextMateカラー・テーマ(.tmTheme)の位置(URL、あるいは、ファイル・パス)を入力するよう求められます。 このファイルは、新しい拡張にインポートされます。
    • カラー・テーマの名前やに色に基づいたテーマ(明暗)を入力するように求められます。
    • 拡張識別子の入力を求めます。そして、現在のディレクトリで、その名前のフォルダを作成するでしょう。

    一度、作成されると、作成されたフォルダ上で、VS Codeを開き、そして、新しいテーマを検証するために、拡張を実行します。 vsc-extension-quickstart.mdを確認します。それは、次の手順とクイック・ガイドです。

    新しい言語サポート

    New Language Support

    カラー表示機能で言語を与える拡張を作成します。

    既存のTextMate言語ファイル(.tmLanguage、.plistや.json)の位置(URLやファイル・パス)のための入力するように求めます。 このファイルは、新しい拡張にインポートされます。

    拡張識別子の入力を求められ、そして、現在のディレクトリで、その名前のフォルダを作成するでしょう。

    一度、作成されると、作成されたフォルダ上で、VS Codeを開き、そして、色付けを検証するために、拡張を実行します。 次の手順のためのvsc-extension-quickstart.mdを確認します。作成されました言語設定ファイルを探します。 そして、言語が使用するコメントと括弧のスタイルに、設定がオプションを定義します。

    新しいコード・スニペット

    New Code Snippets

    新しいコード・スニペットを与える拡張を作成します。

    • フォルダの場所を入力するように求めます。 それには、TextMateスニペット(.tmSnippet)やSublimeスニペット(.sublime-スニペット)が含まれています。 これらのファイルは、VS Codeのスニペット・ファイルに変換されます。
    • これらのスニペットが、アクティブにする言語を入力するように求めます
    • 拡張識別子の入力を求められ、そして、現在のディレクトリで、その名前のフォルダを作成するでしょう。

    一度、作成されると、作成されたフォルダ上で、VS Codeを開き、そして、スニペットを検証するために、拡張を実行します。 次の手順のためのvsc-extension-quickstart.mdを確認します。

    拡張を読み込む

    Loading an Extension

    拡張を読み込むために、あなたは、ファイルを、あなたのVS Codeの機能拡張フォルダに、コピーする必要があります。 私たちは、これを、ここで詳細にカバーします:拡張をインストールする

    次の手順

    Next Steps

    • 公開ツール-VS Code Marketplace(原文)に、あなたの拡張を、どのように公開するかを学びます。
    • Hello World-あなたの最初の拡張を構築するために、『Hello World』チュートリアルに挑戦します。

    一般的な質問

    Common Questions

    Q:yoコード・ジェネレーターは、Windows 10では、矢印キーに対応しません。

    A:まさしく、yoでYeomanジェネレーターを開始し、続いて、Codeジェネレーターを選択します。

    Yeomanジェネレーターの動作画面

    ※yoのバージョン 0.8.4では、Windows 10でも、矢印キーでのメニュー選択に対応しています。

    Home Editor Tools Operation TagScript HPSpace

    Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
    kukekko@gmail.com
    ご連絡の際は、お問い合わせページのURLの明記をお願いします。
    「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」