VSCodeでオレオレ拡張機能を自作し、自分だけで使う方法

このページでは、VSCodeのオレオレ拡張機能を自作する方法を解説していく。

ただし、VSCodeで後悔はせずにあGitHub等で管理、自分だけ使う方法を解説する。

一応、node.jsをインストール済みの前提で話を進めていく。

開発環境

• node.js v16.20.0
• npm v8.19.4

オレオレ拡張機能の作り方

1. yo, generator-code, vsce をインストール

初めに、yo, generator-code, vsceのパッケージをインストールする。 (Permission errorが発生する場合はsudoをつけてね)

npm install -g yo generator-code vsce

yoとgenerator-codeは拡張機能の雛形を作成するために使い、 vsceは作成した拡張機能をVSCodeにインストール可能な１つのファイルにコンパイルするために必要なパッケージとなる。

2. yo code　を実行

パッケージのインストールが完了した後は、以下のコマンドを実行して拡張機能の雛形を作る。

yo code

対話形式で入力していくと、雛形が完成する。

3. 拡張機能を作成する

後は拡張機能をガシガシ作っていく。その際に以下の事を気をつけること。

RAEADMEを修正する

拡張機能をインストールできる様にするためには、READMEを修正しておく必要がある。(デフォルトのままだと、 Make sure to edit the README.md file before you package or publish your extension. のエラーが発生する。)

面倒な場合は、READMEの中身を全て消すと良い。

package.jsonの編集

package.jsonの編集も行っておく。特に、repositoryの設定がないとインストールができなくなる。

ちなみに、僕がperl-awesome-snippetsという拡張機能を作った際のpakcage.jsonは以下の通り。 (省略している部分あり)

また、licenceを指定している場合は、LICENCE.mdを作成する必要がある。

{
  "name": "perl-awesome-snippets",
  "displayName": "Perl Awesome Snippets",
  "description": "Perl Awesome Snippets",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.0.0"
  },
  "publisher": "sunadarake",
  "author": {
    "name": "Sunadarake"
  },
  "license": "MIT",
  "categories": [
    "Snippets",
  ],
  "keywords": [
    "snippets",
    "perl"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/sunadarake/perl-awesome-snippets"
  },
  "homepage": "https://github.com/sunadarake/perl-awesome-snippets",
  "contributes": {
    "snippets": [
      {
        "language": "perl",
        "path": "./snippets/file.json"
      }
    ]
  }
}

4.パッケージをvscodeにインストールする。

拡張機能が完成したら、以下のコマンドを実行しVSCodeにインストールできる形式のファイルを生成する。

vsce package
code --install-extension my-extension-0.0.1.vsix

もし、GitHub上で拡張機能を管理している場合は、git cloneの後に拡張機能のrootディレクトリに移動し 上記のコマンドを実行すれば良い。