Example - Word Count

Visual Studio Codeのドキュメントの和訳です。

原文

訳文

この文書は、あなたが、VS Codeの拡張の基礎を取り扱う、最初の拡張を読んでいることを前提としています。

ワード・カウントは、Markdownでの編集を助けるための拡張を、どのように作成するかをあなたに示す、端から端までのチュートリアルです。私たちが、これが、どのように動作するか全て理解する前に、中心的な機能の簡単な実地説明をしましょう。あなたは、あなたが期待するものを知っているように、構築するでしょう。

Markdownファイルが編集されるたびに、ステータス・バーにメッセージが、追加されます。メッセージには、現在の文字数が含まれ、そして、あなたが、タイプし、そして、ファイルからファイルに移動すると更新されます。：

ヒント：

完成したサンプルは、あなたが、どんな問題でも持っている必要がある、このGitHubリポジトリーから入手可能です。

概要

Overview

この例には、あなたが、関連した概念を通して持っていると思われる、3つの項目があります。：

ステータス・バーを更新する－VS Codeのステータス・バーで、ユーザー定義したテキストを表示します。
イベントを購読する－エディタ・イベントに基づいて、ステータス・バーを更新します。
拡張リソースを処理する－イベントの購読のような開放されたリソースやUIハンドル

まず、あなたが、最新のVS Code拡張ジェネレーターをインストールし、そして、それが、実行されてることを確認します。：


npm install -g yo generator-code
yo code

これは、拡張ジェネレーターを開くでしょう。－私たちは、この例をTypeScriptの新しい拡張オプションに配置します。今のところ、単純に、あなたが、下の画像の中で見るものと完全に同じ方法で領域に書き込みます。（発行者として、自分の名前を入れて）。


cd WordCount
code .

拡張を実行する

Run the Extension

先に進む前に、私たちは、F5を押すことによって、すべての動作が予想通りに作成されているか確認するために、拡張を実行することができます。あなたが、前の「Hello World」チュートリアル、で見たように、VS Codeは、もう一つのウィンドウを開きます。（［拡張開発ホスト］ウィンドウ）あなたの拡張は、そこに、読み込まれます。あなたは、Command Palette（F1を押して）で、「Hello World」コマンドを見つける必要があります。そして、あなたが、それを選択するとき、あなたは、ウィンドウの一番上に、「Hello World」と述べている情報ボックスを見るでしょう。

今、あなたは、拡張が適切に動作することを確認しました。あなたが、好む場合、あなたは、拡張開発ウィンドウを開いたままにすることができます。あなたが拡張に行う、どんな変更でも検証するために、あなたは、開発ウィンドウの中で、F5を押す、あるいは、Ctrl+R (Mac: Cmd+R)を押すことによって、拡張開発ウィンドウを再読み込むことのどちらかができます。

ステータス・バーを更新する

Update the Status Bar

作成されたextension.tsファイルの内容を、下記に示されたコードに置き換えます。それは、宣言し、そして、単語を数えることができるWordCounterクラスのインスタンスを生成し、そして、VS Codeのステータス・バーに表示します。「Hello Word」コマンドが呼び出されるとき、updateWordCountを呼び出します。


// The module 'vscode' contains the VS Code extensibility API
// Import the necessary extensibility types to use in your code below
// モジュールvscodeには、VS Codeの拡張APIが含まれています。
// 下記のあなたのコードで使用する、必要な拡張データ型をインポートします。
import {window, commands, Disposable, ExtensionContext, StatusBarAlignment, StatusBarItem, TextDocument} from 'vscode';

// This method is called when your extension is activated. Activation is
// controlled by the activation events defined in package.json.
// あなたの拡張がアクティブ化されるとき、このメソッドは、呼び出されます。

// アクティブ化は、package.jsonで定義されるアクティブ化イベントによって、制御されます。
export function activate(context: ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error).
    // 診断情報（console.log）とエラー（console.error）を出力するために、コンソールを使用します。
    // This line of code will only be executed once when your extension is activated.
    // あなたの拡張が、アクティブになると、この命令行だけが実行されます。
    console.log('Congratulations, your extension "WordCount" is now active!');

    // create a new word counter
    // ワードカウンターを新規作成します。
    let wordCounter = new WordCounter();

    var disposable = commands.registerCommand('extension.sayHello', () => {
        wordCounter.updateWordCount();
    });

    // Add to a list of disposables which are disposed when this extension is deactivated.
    // この拡張が、非アクティブになるとき、取り除かれる破棄リストを追加します。
    context.subscriptions.push(wordCounter);
    context.subscriptions.push(disposable);
}

class WordCounter {

    private _statusBarItem: StatusBarItem;

    public updateWordCount() {

        // Create as needed 
        // 必要に応じて作成します
        if (!this._statusBarItem) { 
            this._statusBarItem = window.createStatusBarItem(StatusBarAlignment.Left); 
        }  
 
        // Get the current text editor 
        // 現在のテキストエディターを取得します
        let editor = window.activeTextEditor; 
        if (!editor) { 
            this._statusBarItem.hide(); 
            return; 
        } 
 
         let doc = editor.document; 
 
        // Only update status if an MarkDown file 
         // Markdownファイルの場合、ステータスの更新のみを行います
       if (doc.languageId === "markdown") { 
            let wordCount = this._getWordCount(doc); 
 
            // Update the status bar 
         // ステータス・バーを更新する
           this._statusBarItem.text = wordCount !== 1 ? `${wordCount} Words` : '1 Word'; 
            this._statusBarItem.show(); 
        } else { 
            this._statusBarItem.hide(); 
        } 
    } 

    public _getWordCount(doc: TextDocument): number { 

        let docContent = doc.getText(); 
 
        // Parse out unwanted whitespace so the split is accurate 
        // 分割が正確になるように、不必要な空白文字を解析します
        docContent = docContent.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' '); 
        docContent = docContent.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 
        let wordCount = 0; 
        if (docContent != "") { 
            wordCount = docContent.split(" ").length; 
        } 
          
        return wordCount; 
    } 

    dispose() {
        this._statusBarItem.dispose();
    }
}

今、拡張に、私達の更新をためしてみましょう。

私たちは、TypeScriptファイルのコンパイルの監視を設定しておきます（拡張の.vscode\tasks.jsonファイルでは）それで、再構築する必要性がありません。［拡張開発ホスト］あなたのコードが、実行され、そして、拡張が、再読み込みされる場所のウィンドウ内で、単純に、Ctrl+Rを叩きます。（また、あなたは、1つ目の開発ウィンドウから、F5だけを行うことができます）。まだ、私たちは、「Hello World」コマンドで、以前と同じようにコードをアクティブ化する必要があります。Markdownファイル内の場合、あなたのステータス・バーは、ワード・カウントを表示します。

これは、良いスタートです。しかし、変更されたあなたのファイルとして、カウントが、更新される場合、それは、より素晴らしでしょう。

イベントを購読する

Subscribing to Events

あなたのヘルパー・クラスに、一連のイベントをフックしてみましょう。

onDidChangeTextEditorSelection－イベントは、カーソル位置が、変更されると呼び出されます
onDidChangeActiveTextEditor－イベントは、アクティブなエディタが、変更されると呼び出されます

これを実行するには、私たちは、extension.tsファイルに、新しいクラスを追加するでしょう。それは、それらのイベントに、購読を設定し、そして、WordCounterに、ワード・カウントを更新するよう依頼します。また、このクラスが、購読を、廃棄できるものとして、どのように管理するか、そして、それ自身が破棄された時、それを、どのように、一覧を示すのを停止するか、注意します。

extension.tsファイルの一番下に、以下に示すようにWordCounterControllerを追加します。


class WordCounterController {

    private _wordCounter: WordCounter;
    private _disposable: Disposable;

    constructor(wordCounter: WordCounter) {
        this._wordCounter = wordCounter;
        this._wordCounter.updateWordCount();

        // subscribe to selection change and editor activation events
        //選択した変更とアクティブ化イベント・エディタを購読します。
       let subscriptions: Disposable[] = [];
        window.onDidChangeTextEditorSelection(this._onEvent, this, subscriptions);
        window.onDidChangeActiveTextEditor(this._onEvent, this, subscriptions);
        
        // update the counter for the current file
        // 現行ファイルのためのカウンターを更新します
        this._wordCounter.updateWordCount();

        // create a combined disposable from both event subscriptions
        // 両方のイベント購読から、破棄可能な結合を作成します。
        this._disposable = Disposable.from(...subscriptions);
    }

    dispose() {
        this._disposable.dispose();
    }

    private _onEvent() {
        this._wordCounter.updateWordCount();
    }
}

コマンドが呼び出されるとき、私たちは、もはや、ワード・カウント拡張に読み込ていることを望みません。しかし、その代わりに、各々のMarkdownファイルのために利用できます。

まず、アクティブ化した関数のボディをこれに置き換えます。：


// Use the console to output diagnostic information (console.log) and errors (console.error).
// This line of code will only be executed once when your extension is activated.
//診断情報（console.log）とエラー（console.error）を出力するために、コンソールを使用します。
// あなたの拡張が、アクティブになると、この命令行だけが実行されます。
console.log('Congratulations, your extension "WordCount" is now active!');

// create a new word counter
// ワードカウンターを新規作成します。
let wordCounter = new WordCounter();
let controller = new WordCounterController(wordCounter);

// Add to a list of disposables which are disposed when this extension is deactivated.
// この拡張が、非アクティブになるとき、取り除かれる破棄リストを追加します。
context.subscriptions.push(controller);
context.subscriptions.push(wordCounter);

次に、Markdownファイルを開くと、即座に、拡張が、アクティブにされることを、私たちは確認する必要があります。これを実行するには、私たちは、project.jsonファイルを修正する必要があるでしょう。以前、拡張は、extension.sayHelloコマンドによってアクティブにされました。私たちは、もはや、それを必要としません。そして、このように、私たちは、package.jsonからの寄与属性を、完全に、削除することができます：


    "contributes": {
        "commands":
            [{
                "onCommand": "extension.sayHello",
                "title": "Hello World"
            }
        ]
    },

現在、あなたの拡張を変更します。そのため、それは、このactivationEvents属性を更新することによって、開らかれたMarkdownファイルをアクティブにします。：


   "activationEvents": [
        "onLanguage:markdown"
    ]

onLanguage:${language}イベントは、言語idを取得します。この場合、"markdown"、そして、その言語のファイルが開かれるたびに、呼び出されるでしょう。

Ctrl+Rで、ウィンドウの再読み込みするか、あるいは、F5に続いて、Markdownファイルの編集を開始することのどちらか行うことによって、拡張を実行します。あなたは、有効な更新しているワード・カウントを持っている必要があります。

あなたが、活性化関数上にブレークポイントを設定する場合、あなたは、最初のMarkdownファイルが開かれるとき、それが、一度だけ呼び出されていることに気づくでしょう。Markdownファイルが開かれ、そして、それらのテキストを変更するとき、updateWordCount関数が呼び出されるように、 WordCountControllerコンストラクタは実行され、そして、エディタ・イベントを購読します。

ステータス・バーをカスタマイズする

Customizing the Status Bar

私たちは、あなたが、どのように、Status Barで書式設定されたテキストを表示することができるかを見てきました。 VS Codeは、色、アイコン、ツールチップなどでさえ、あなたが、あなたのStatus Barの追加をカスタマイズできます。 IntelliSenseを使用して、あなたは、さまざまなStartBarItem領域を見ることができます。 VS Codeの拡張APIの学習のためのもう一つの素晴らしいリソースは、あなたの作成された拡張プロジェクトに含まれるvscode.d.tsタイプング・ファイルです。エディタで、node_modules\vscode\vscode.d.tsを開き、あなたは、コメントと一緒に完全なVS Codeの拡張APIを見るでしょう。

StatusBarItem更新コードを、以下に置き換えます：


// Update the status bar 
// ステータス・バーを更新します
            this._statusBarItem.text = wordCount !== 1 ? `$(pencil) ${wordCount} Words` : '$(pencil) 1 Word'; 
            this._statusBarItem.show();

計算されたワード・カウントの左に、GitHub Octicon鉛筆アイコンを表示します。

拡張リソースを処理する

Disposing Extension Resources

現在、私たちが、拡張が、Disposablesを通して、VS Codeのリソースをどのように操作する必要があるか、より深く観察してみましょう。

拡張が、アクティブになるとき、それは、破棄可能な購読コレクションを持つExtensionContextオブジェクトを渡されます。拡張は、このコレクションに、それらのDisposableオブジェクトを追加することができます。そして、拡張が、非アクティブになるとき、VS Codeは、それらのオブジェクトを取り除きます。

作業スペースを作成する多くのVS Code API、あるいは、（registerCommandのような）UIオブジェクトは、Disposableを返します。そして、それらのメソッドを、直接、削除する呼び出しで、拡張は、VS Codeから、これらの要素を取り除きます。

イベントは、onDid*イベント・サブスクライバ・メソッドが、Disposableを返す、もう一つの例です。拡張は、イベントのDisposableを取り除くことによって、イベントに登録を取り消します。私たちの例では、WordCountControllerは、直接、アクティブ化を解除した上できれいにした、それ自身のDisposableコレクションを維持することによって、イベント購読のDisposableを処理します。


        // subscribe to selection change and editor activation events
         //選択した変更とアクティブ化イベント・エディタを購読します。
       let subscriptions: Disposable[] = [];
        window.onDidChangeTextEditorSelection(this._onEvent, this, subscriptions);
        window.onDidChangeActiveTextEditor(this._onEvent, this, subscriptions);

        // create a combined disposable from both event subscriptions
        //両方のイベント購読から、破棄可能な結合を作成します。
        this._disposable = Disposable.from(...subscriptions);

ローカルに、あなたの拡張をインストールする

Installing your Extension Locally

これまでのところ、あなたが記述した拡張だけが、VS Codeの特別なインスタンス、拡張開発ホスト・インスタンスで、実行されます。あなたの拡張が、すべてのVS Codeのインスタンスで利用できるようにするために、機能拡張フォルダ内容を、あなたの.vscode/extensionsフォルダの下の新しいフォルダへ、コピーします。

あなたの拡張を公開する

Publishing your Extension

どのように、拡張を共有するかについての読んでください。

次の手順

Next Steps

以下について調べるためにお読みください：

Yoコード－Yoコード内の他のオプションについて学びます
拡張API－拡張APIの概要を取得します。
Customization－テーマ、設定とキーボード結合
公開ツール－パブリック・ギャラリーに、拡張を公開する方法を学びます
APIエディタ－Text文書、テキスト・エディタと編集テキストについて詳しく学びます

一般的な質問

Common Questions

まだ、何もありません。

ページトップへ Visual Studio Code ドキュメント Back Next