くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > VSCode > VSCode拡張機能の開発入門 | その1

VSCode拡張機能の開発入門 | その1

VSCode VSCode拡張機能

VSCode拡張機能を作ってみたいなと思い、
いろいろ調べてみたときの備忘録(*´ω｀*)

公式ドキュメントはこのあたり

テンプレートでプロジェクト作成

テンプレートが用意されているので、yoコマンドを実行すればOK

npx --package yo --package generator-code -- yo code

実行すると、いくつか質問されるので、選んでいけばOK
TypeScript+esbuild+pnpmの場合は、こんな感じ

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? 
# ? Initialize a git repository? Y
# ? Which bundler to use? esbulld
# ? Which package manager to use? pnpm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

最後まで行くと、identifierでしたhelloworldフォルダができあがる

helloworld/
├── .vscode
│   ├── extensions.json
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── src
│   ├── test
│   │   └── extension.test.ts
│   └── extension.ts
├── .npmrc
├── .vscode-test.mjs
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── esbuild.js
├── eslint.config.mjs
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── vsc-extension-quickstart.md

launch.jsonも用意されているので、"Run Extension"を実行すると、
debug用のVSCodeが立ち上がって、動作を確認できる

ディレクトリ構成や概念

テンプレートの各ファイルや、VSCodeのAPIや拡張ポイントなどが説明されている

3つの概念

VSCode側が提供してくれてる重要な概念がこの3つ

Activation EventsとContribution Pointsは、package.jsonに書いて、
VS Code APIは、src/配下で使うJavaScriptライブラリ

ディレクトリ構成

主要なファイルはこのあたり

.
├── .vscode
│   ├── launch.json     // debug用のVSCodeの起動
│   └── tasks.json      // コンパイルなどのタスク
├── README.md           // マーケットプレイスにも表示される
├── CHANGELOG           // マーケットプレイスにも表示される
├── LICENCE             // マーケットプレイスにも表示される
├── src
│   └── extension.ts    // 拡張機能のエントリポイント
├── package.json        // 拡張機能のマニフェスト

マニフェスト

どんなコマンドやViewをこの拡張機能で提供しているかなどは、
package.jsonのcontributes配下に書いていく感じ

{
  "name": "helloworld",
  "version": "0.0.1",
  "main": "./dist/extension.js",

  // サポートしているVSCodeのバージョン
  "engines": { "vscode": "^1.98.0" },

  // 拡張機能用の設定: Activation Events
  "activationEvents": [],
  // 拡張機能用の設定: Contribution Points
  "contributes": {
    "commands": [
      {
        "command": "helloworld.helloWorld",
        "title": "Hello World"
      }
    ]
  },
}

詳細はこのあたりに

エントリポイント

エントリポイントとなるsrc/extension.tsはこんな感じ
基本は、独自のコマンドなどを作って、
active時にregisterCommandで登録していく感じ

// VSCode APIのimport
import * as vscode from 'vscode';

// 拡張機能が有効になったときの処理
export function activate(context: vscode.ExtensionContext) {
 // 自作のコマンドの登録
 // コマンドのID('helloworld.helloWorld')は、package.jsonにも記載する必要がある
 const disposable = vscode.commands.registerCommand('helloworld.helloWorld', () => {
  // 自作コマンドの中身: 通知を表示
  vscode.window.showInformationMessage('Hello World from !');
 });

 context.subscriptions.push(disposable);
}

// 拡張機能が無効になったときの処理
export function deactivate() {}

用意されているAPIはこのあたり

拡張機能でできること

何ができるか、どれを使えばいいのかはこのあたりにまとまっている

逆に、制約事項はこの2つ

  • DOMを直接操作することはできない
  • CSSを直接適用することはできない

詳細はこのあたりに

UIの名前など

各UIの名前などは、このあたりにまとまっている

container

こんな感じで、スクショ＋説明が書かれてるので、一通り目を通すと開発しやすくなる

用意されているアイコン(Codicons)

よく見るアイコンは用意されていて、拡張機能でも利用できる
アイコンの一覧はこのあたり

マーケットプレイスに表示される情報

package.json内のマーケットプレイスに表示される設定

必要な箇所はこのあたり。
作った拡張機能での表示はこちら

{
  // extensionのid
  "name": "sortable-explorer",
  // extensionのversion
  "version": "0.2.3",
  // publisherのid
  "publisher": "memorylovers",
  // マーケットプレイスで表示する名前
  "displayName": "Sortable Explorer",
  // マーケットプレイスで表示する説明
  "description": "Sortable Explorer",
  // マーケットプレイスで表示するアイコン: 256px or 128px以上の正方形のpng
  "icon": "resources/icon.png",
  // マーケットプレイスでのカテゴリ
  "categories": [
    "Other"
  ],
  // リポジトリ。マーケットプレイスでも表示
  "repository": {
    "type": "git",
    "url": "https://github.com/memorylovers/sortable-explorer"
  },
  // スポンサーの受付リンク。マーケットプレイスでも表示
  "sponsor": {
    "url": "https://github.com/sponsors/memory-lovers"
  },
  // マーケットプレイスで、Previewと表示するかどうか
  "preview": false,
}

これの他に、LICENSEファイルやCHANGELOGファイルもあると、
マーケットプレイスのページからリンクされる

リリースや自動デプロイ

リリースや自動デプロイ関係はこのあたりに

pnpmを使う場合は、--no-dependenciesをつけないとエラーになるっぽい

多言語対応

Extension ManifestのUseful Node modulesに　　 vscode-nlsがちょろっと書かれているが、package.json周りはドキュメントなさそう？

ただ、機能としてはあるっぽい。以下の記事が参考になる

以上!! これでだいぶ理解できた気がする(*´ω｀*)

あとは、以下のあたりを深堀りしていきたい

参考にしたサイト様