Open2022/01/03にコメント追加9

vscode拡張に入門してみる

やってみたいネタがあるのだけど、作り方を調べたこともないのでhello worldくらいしてみたい。

適当にググってたどり着いた公式ドキュメントがこちら

then install Yeoman and VS Code Extension Generator with:

yeomanって何？ってググると、

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

とのこと。ちなみに紹介記事などはだいたい6~7年ほど前のが多い。公式ページでもgulpやgruntと並んでいる。

わかったところでやってみる。

とりあえずリポジトリを作り、

node versionを適当に固定しつつ、コマンドを入れる。

npm install yo generator-code

globalは嫌なのでやらない。npxでコマンド実行する。

npx yo codeとすると

誰ｗ

先にcloneしていたのでディレクトリ作成とかの挙動で手間取ってしまったが、get-started記事の通りに作成 -> vscode起動 -> F5 -> 出てきたvscodeインスタンスでHello Worldコマンドを実行とすると、notificationが出てきた。やったね。

開発対象がvscode（内で動く拡張）だから当然ではあるが、開発してるvscodeとは別個にブツが動くvscodeインスタンスが起動するのか。
そして変更のreloadをReload Windowしたりデバッグできたりするっぽい。

色々調べて、カーソル位置にある単語を取得できたのでメモ

		const e = vscode.window.activeTextEditor
		if(!e) return;
		const word = e.document.getText(e.document.getWordRangeAtPosition(e.selection.start))
		console.log(word)

外部コマンド実行して結果を取ってみたい、となるとこうなった。

		const options = {
			shell: false,
			cwd: '.git'
		}
		const ws = vscode.workspace.workspaceFolders?.[0].uri.path ?? '/'
		options.cwd = path.resolve(ws, options.cwd)

		console.log(child_process.execFileSync('pwd', options).toString())
		console.log(child_process.execFileSync('ls', options).toString())

wsのfallbackが雑なので、ws取れなければ諦めるなりしないとダメそう。
そもそも明示的にworkspace作ってないフォルダでも取れたので、現実的にこれがundefになることは無いと思う。
（ファイルを単体で開いたときくらい？）