目次

はじめに
本書について
免責事項
表記関係について
第1章 VSCodeAPI
1.1 VSCodeとは
1.2 VSCodeAPIとは
1.3 拡張機能の開発方法
第2章 環境構築
2.1 VSCode
2.2 git
2.3 Node.js
2.4 Yeomanとgenerator-codeの環境構築
第3章 シンタックスハイライト開発
3.1 シンタックスハイライトとは
3.2 雛形作成
3.3 拡張機能のインストール
3.4 シンタックスハイライト作成
3.5 言語設定
第4章 スニペット開発
4.1 スニペットとは
4.2 雛形作成
4.3 拡張機能の結合
4.4 スニペット作成
あとがき

はじめに

本書について

 本書を手に取っていただきまして、ありがとうございます。昨今、様々なテキストエディターが普及しています。それら多くのエディターには単純なテキスト編集だけでなく、多種多様な機能が実装されています。なかには拡張機能を導入できる機能があり、ユーザーの使い方に合わせたカスタマイズができるようになっているテキストエディターも存在します。それらの機能は、プログラミング開発のためのものも少なくありません。こうして、ソフトウェア開発の環境はテキストエディターの高機能化に伴い、とても快適なものとなってきました。特に有名なプログラミング言語であれば、インストールするだけで開発のためのツールやシステムがサポートされていて、すぐにでも開発を始められます。


 一方で、プログラミング言語も数多く存在しています。あるプログラミング言語から派生したり、特定の目的のために作られたり、ジョークとして開発されたり…と、多くの言語が生み出されてきました。そういったマイナーな言語や新しく開発されたばかりの言語は、テキストエディターに対応していないことが多くあります。


 テキストエディターによるサポートのない言語を扱うとき、開発環境の乏しさがモチベーションに悪影響を及ぼすことが少なくありません。そこで、「ないのであれば自分で作ってしまおう」という考えのもと、拡張機能開発に関する手順を本書にまとめました。Visual Studio Code(以降VSCodeと称します)の拡張機能に関する情報は、公式であるMicrosoft社から公開されています(英語だけではありますが)。その内容はとてもわかりやすくなっています。本書を読んだ後にそちらをご覧になれば、おそらくは期待する機能を実装することができると思います(もし熟練の方であれば、最初から公式のホームページをご覧になることをお勧めします)。どうか、皆様の開発ライフのお役に立てると嬉しいです。

免責事項

 本書は、拡張機能の開発方法の情報提供と開発支援が目的です。開発・運用および公開は必ずご自身の責任と判断のもと行ってください。本書をもとにした開発・運用・公開された開発物によって発生したトラブルや損害に関する一切の責任は、著者は負わないものとします。本書の内容はできる限り正確であるよう努めています。ですが、内容の正確性や完全性・信頼性について保証するものではありません。本書の内容は関連するサービスの停止やシステム障害により、予告なく停止する場合があります。

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

第1章 VSCodeAPI

1.1 VSCodeとは

 VSCodeは、Microsoft社が開発したテキストエディター1です。Windows,Mac,Linuxの各種プラットフォームに対応しています。MITライセンスのOSSとなっており、ソースコードはGitHub2で公開されています。

 「ミニマップ」「Markdownプレビュー」「マルチカーソル」「シンタックスハイライト」「行番号表示」「見た目の配色変更」「画面分割」等々、インストール直後の標準状態で揃っている機能だけでも高機能なソフトウェアです。標準のソフトウェア開発支援機能に加えて、拡張機能3をインストールすること(標準機能以外に追加機能を導入すること)で、自分の開発スタイルに合わせたカスタマイズも可能となっています(図1.1)。

図1.1: 標準機能と拡張機能例

MITライセンスとは

 OSSライセンスのひとつです。数あるOSSライセンスの中でも緩いものになります。ソフトウェアの使用だけでなく、変更・再頒布・販売を無制限に許可しています。個人利用だけでなく商用利用でも、利用制限は同じです。ただし、再頒布時にはMITライセンスを載せることが求められています。また、ソフトウェア開発側はソフトウェア要因の問題や責任は負わないことを明記してあります。


 VSCodeのユーザーインターフェースは次のようになっています。

図1.2: VSCodeのユーザーインターフェース
サイドバー エクスプローラーやgit、拡張機能の情報を表示します。
アクティビティーバー サイドバーに表示する内容を切り替えます。
エディターグループ 編集しているファイルの内容を表示します。この画面は左右上下に分割して表示することが可能です。エディターグループの上にはパン粉リスト(ファイルパス)を表示します。右にはミニマップを表示します。Alt+zで右端折り返しの切替も可能です。
パネル ターミナルや出力、問題や警告、デバッグのコンソールを表示します。
ステータスバー エディターグループに表示しているプロジェクトの情報とアクティブになっているファイルの情報を表示します。

 エディターグループは左右上下に分割して表示することも可能です。

 ユーザーインターフェースの他に、コマンドパレットを使用して機能を使うことができます。Ctrl+SHift+Pを押すと、エディター画面上部にコマンドを入力するテキストボックスが表示されます。このテキストボックスにコマンドを入力することで、機能を呼び出すことができます。テキストボックスにはサジェスト機能がついていますので、忘れてしまっても機能の名前から検索することもできます。

図1.3: コマンドパレット

1.2 VSCodeAPIとは

 VSCodeAPIとは、VSCodeの機能を開発者以外の人でも追加できるようにするためのインターフェース(窓口)です。VSCodeは拡張性を持たせることを前提に開発されており、様々な拡張機能を開発することができます。「VSCodeの見た目の色を変えたり」、「アイコンを追加したり」「プレビュー機能を追加したり」と、VSCodeAPIを利用して開発できる拡張機能は様々です。

 公式よりAPIに関する情報が公開されています。4GitHubにVSCodeAPIのサンプルコードも公開されています。5

APIとは

 APIはApplication Programming Interfaceの略です。開発したソフトの特定の機能を第三者(開発者ではない人たち)が使えるように、情報をまとめて公開したものです。

 「●●って問い合わせしてくれたら××って応答するよ!」といった内容の情報を公開することで、ソフトの一部の機能を使って新しいツールの開発をすることができます。


1. https://code.visualstudio.com/

2. https://github.com/microsoft/vscode

3. https://marketplace.visualstudio.com/vscode

4. https://code.visualstudio.com/api

5. https://github.com/microsoft/vscode-extension-samples

試し読みはここまでです。
この続きは、製品版でお楽しみください。