VSCode拡張機能をつくる１〜環境構築＆HelloWorld〜
Node.jsが必要。デバッグはできたけど、パッケージ化はできなかった。
成果物
情報源
目次
1. VSCodeとは
Electron製のテキストエディタ。Electron-WikipediaによるとNode.js＋ChromiumレンダリングエンジンでGUIアプリを作成できるもの。
かつて私はインストールしていたようだ。別に今回はいらないはず。
2. Node.jsをインストールする
これでnpmもインストールされる。
3. パッケージをインストールする
npm install yo generator-code --save-dev
4. プロジェクトを作る
npx yo code
質問に答えるとファイルが作成される。
? ========================================================================== We're constantly looking for ways to make yo better! May we anonymously report usage statistics to improve the tool over time? More info: https://github.com/yeoman/insight & http://yeoman.io ========================================================================== (Y/n) _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? hello-vscode-ext ? What's the identifier of your extension? hello-vscode-ext ? What's the description of your extension? hello-vscode-ext ? Initialize a git repository? No ? Bundle the source code with webpack? No ? Which package manager to use? npm
質問が終わるとファイル作成とダウンロードがはじまる。
Writing in /tmp/work/hello-vscode-ext... create hello-vscode-ext/.vscode/extensions.json create hello-vscode-ext/.vscode/launch.json create hello-vscode-ext/.vscode/settings.json create hello-vscode-ext/.vscode/tasks.json create hello-vscode-ext/package.json create hello-vscode-ext/tsconfig.json create hello-vscode-ext/.vscodeignore create hello-vscode-ext/README.md create hello-vscode-ext/CHANGELOG.md create hello-vscode-ext/vsc-extension-quickstart.md create hello-vscode-ext/src/extension.ts create hello-vscode-ext/src/test/runTest.ts create hello-vscode-ext/src/test/suite/extension.test.ts create hello-vscode-ext/src/test/suite/index.ts create hello-vscode-ext/.eslintrc.json Changes to package.json were detected. Running npm install for you to install the required dependencies. npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"}) npm WARN hello-vscode-ext@0.0.1 No repository field. npm WARN hello-vscode-ext@0.0.1 No license field. added 231 packages from 172 contributors and audited 234 packages in 34.313s 40 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Your extension hello-vscode-ext has been created! To start editing with Visual Studio Code, use the following commands: cd hello-vscode-ext code-insiders . Open vsc-extension-quickstart.md inside the new extension for further instructions on how to modify, test and publish your extension. For more information, also visit http://code.visualstudio.com and follow us @code.
これでカレントディレクトリにhello-vscode-extディレクトリが作成された。
4-1. カレントディレクトリ移動
作成されたプロジェクトのディレクトリへ移動する。
cd hello-vscode-ext
4-2. ソースコードの確認
./src/extension.ts
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// 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('Congratulations, your extension "hello-vscode-ext" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('hello-vscode-ext.helloWorld', () => {
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World from hello-vscode-ext!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {}
以下の部分がメイン。メッセージダイアログを表示する。
./src/extension.ts
vscode.window.showInformationMessage('Hello World from hello-vscode-ext!');
./package.json
{
"name": "hello-vscode-ext",
"displayName": "hello-vscode-ext",
"description": "hello-vscode-ext",
"version": "0.0.1",
"engines": {
"vscode": "^1.60.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:hello-vscode-ext.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "hello-vscode-ext.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"@types/vscode": "^1.60.0",
"@types/glob": "^7.1.4",
"@types/mocha": "^9.0.0",
"@types/node": "14.x",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"@typescript-eslint/parser": "^4.31.1",
"eslint": "^7.32.0",
"glob": "^7.1.7",
"mocha": "^9.1.1",
"typescript": "^4.4.3",
"@vscode/test-electron": "^1.6.2"
}
}
以下のあたりが大事。VSCodeのコマンドパレットを開いてhelloと入力するとHello Worldというコマンドが表示される。
"activationEvents": [
"onCommand:hello-vscode-ext.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "hello-vscode-ext.helloWorld",
"title": "Hello World"
}
]
},
5. TSをJSにビルドする
TypeScriptをJavaScriptにビルドする。
npm run compile
> hello-vscode-ext@0.0.1 compile /tmp/work/hello-vscode-ext > tsc -p ./
6. デバッグする
6-1. プロジェクトをVSCで開く
code /tmp/work/hello-vscode-ext
プロジェクトのディレクトリhello-vscode-extをVSCodeで開く。
すると[Extension Development Host]というタイトルのVSCodeが開く。
6-2. デバッグ実行する
[Extension Development Host]のVSCodeは先述の拡張機能プロジェクトをインストールしたものなので実行できる。
Ctrl+Pでコマンドパレットを呼び出すhelloと入力するHello WorldというコマンドがあるEnterキーで実行する- 右下にメッセージが表示される
このメッセージ表示が今回デフォルトで実装された処理内容である。なので表示されたら成功。
7. パッケージングする
本番用にプロジェクトのソースコードをパッケージングする。パッケージングするとvsix拡張子ファイルが作成される。それをVSCodeからインストールすれば、めでたく拡張機能のインストール成功である。
7-1. パッケージング・ツールのインストール
カレントディレクトリをプロジェクトのディレクトリに移動する。そして以下コマンドを実行する。
npm install vsce --save-dev
7-2. プロジェクトをパッケージングする
カレントディレクトリをプロジェクトのディレクトリに移動する。そして以下コマンドを実行する。
npx vsce package
エラー。怒られた。
ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
URL翻訳して読んだけどよくわからん。SVG画像がどうとか関係なくね？
もしやプロジェクトの名前に-を入れたのがダメなのかな？ と思ってnpx yo codeで別プロジェクトhellovscodeextを作ってやり直してみたが、同じエラーだった。
$ npx yo code ... ? What's the name of your extension? hellovscodeext ... $ npx vsce package ... ERROR Missing publisher name. Learn more: https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
ダメだ、わかんね。
もういいや。一旦飛ばそう。当面はデバッグだけできればいいわ。(・д・)ﾁｯ
7-3. パッケージングしたブツをインストールする
以下のコマンドで。hoge-0.0.1.vsixは作成されたブツの名前にすること。私は動作未確認。コマンドだけ書いておく。
code --install-extension hoge-0.0.1.vsix
所感
どうでもいいけど、npmって使うたびに「アップデートしろ」って言ってきてウザい。
╭────────────────────────────────────────────────────────────────╮ │ │ │ New major version of npm available! 6.14.15 → 7.24.2 │ │ Changelog: https://github.com/npm/cli/releases/tag/v7.24.2 │ │ Run npm install -g npm to update! │ │ │ ╰────────────────────────────────────────────────────────────────╯
npm環境ってすぐに状況が変わるからウザい。ネットで調べた同じ手順で、同じ結果を得ることができない。困るんだよね、そういうの。やめてくんない？ 😠
最後の最後でしくじったときの悲しみと怒りは尋常じゃない。やっぱPythonとNode.jsってクソだわ。💩
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.52-v7l+ #1441 SMP Tue Aug 3 18:11:56 BST 2021 armv7l GNU/Linux
