pscn

Extending Visual Studio Code

(こちらのページを自分流に翻訳したものです。2018-11-10)

ここでは、VS Code の拡張性と、はじめての extension を短時間で作る方法について、ご説明します。拡張性の設計に対する私達のアプローチについては、こちらをご覧ください。

既存の extension を使いたい場合は、Extension Marketplace をご覧ください。VS Code Marketplace から extension を探してインストールする方法をご説明しています。

すべての VS Code extension は、contribution (registration)、activation (loading)、そして VS Code extensibility API へのアクセスといった、共通のモデルを持っています。 また、language servers と debuggers を使えるという点が重要です。これらそれぞれにアクセスするための protocol が用意されています。詳しくは以下の各セクションをご覧ください。

  1. Extensions - 基本的な構成要素
  2. Language Servers - Language Server Protocol を通じて、編集機能を高度に拡張します。
  3. Debuggers - Debug Adapter を通じて、外部デバッガを接続します。

VS Code extensibility architecture

Extensions

すべての extension は、activate した時、extension host process 上で実行されます。これは extension のための分離された process で、VS Code の Main process の応答性を邪魔しません。

extension は以下の機能を利用可能です。

extension の基本をひととおり学ぶための、2つのチュートリアルをご用意しました。

  1. Hello World - 簡単な extension を作って、フォルダ構成や manifest について理解しましょう。activation の仕組み、実行とデバッグ、ローカルへのインストールについても学びます。
  2. Word Count - ファイルタイプに応じた activation、ステータスバーの更新、テキストが変更された時の処理、ファイルを閉じた時に extension を終了する方法について学びます。

さらに Extensibility Principles and Patterns では、extensibility API のあちこちで使われているプログラミング・パターンについて説明しています。

Language Servers

Language Server は、多くの言語において強力な編集機能をもたらす、特別な extension です。 Language Server を使って、jump-to-definitions, autocomplete, error-checking など、多くの language features を実装する事ができます。

詳しくは language servers をご覧ください。

Debug Adapter

VS Code は標準的なデバッグの UI を備えつつ、debugger extension と “debug adapters” に従い、UI を debugger や runtime と接続します。 debug adapter は VS Code Debug Protocol を使って VS Code と通信をするためのプロセスで、すべての言語に対応します。

debugger extensions の作成についての詳細は、こちらをご覧ください。

実際に VS Code extension がどんなものか見たければ、Extension Marketplace で数々の便利な extension を簡単に見る事ができます。それらをインストールして試すことで、VS Code がどのように拡張できるかのアイデアを得る事ができるでしょう。

Language Extension Guidelines

Language Extension Guidelines のページは、どんな language features を使えば良いかの参考になります。たとえば、code suggestions, actions, formatting, renaming などの language features が紹介されています。また、language server protocol を通じての実装方法や、extensibility API を直接利用する方法についても説明しています。

Themes, Snippets, and Colorizers

言語ごとのシンタックスハイライトやスニペット、カラーテーマによって、快適な編集環境を作る事ができます。TextMate 形式のファイルでこれらを設定し、VS Code でパッケージ化、再利用する事が可能です。.tmTheme, .tmSnippets, .tmLanguage などのファイルは、自作の extension の中でもそのまま使えます。Themes, Snippets, and Colorizers のページでは、TextMate 形式のファイルを extension に含める方法と、themes, snippets, language colorizers を自作する方法について説明しています。

Writing an Extension

Yeoman extension generator を使えば、基本的な extension のプロジェクトを簡単に作る事ができます。まずはプロジェクトを作ってみると良いでしょう。サンプルはこちらで見る事ができます。

extension は、TypeScript か JavaScript で書かれます。開発、ビルド、実行、テスト、デバッグのすべてを、VS Code 上で行う事ができます。

Testing Extensions

VS Code には、extension をテストする方法も用意されています。VS Code API を使って自作の extension をテストするような integration test を、実行中の VS Code インスタンス上で走らせる事が可能です。

Extension Ideas

VS Code の機能に関する多くのアイデアは、本体の一部としてよりも extension として実装されている方が良い場合があります。そうすればユーザは、適切な extension をインストールする事で、欲しい機能を選べます。VS Code の開発者は GitHub の vscode repository で、*extension-candidate という label を使って、開発中の extension を管理しています。もし build するのに良い extension を探しているなら、*extension-candidate issues を覗いてみてください。

Next steps