Zenn
🔥

VS Codeの拡張機能の開発で困った話（デバッグ）

2024/09/30に公開
TypeScript
VS Code
npm
yarn
yeoman
tech

VS Codeの拡張機能の開発で困った話（デバッグ）

1. 本記事のターゲット層

(1) VS Codeの拡張機能開発に挑まんとする者
(2) 個人開発がしたいヘンタイ
(3) TypeScriptやNode.jsを学びたい人

2. イントロダクション

今回、この記事を書くきっかけとなったのは、VS Codeの拡張機能開発をしている中で、公式のGET STARTEDを実行するとエラーがたくさん出て戸惑ったからです。

他にも戸惑う人がいると思い、助けになればと考えてこの記事を書いています。

VS Codeの拡張機能の開発は仕事ではなく、個人開発の領域でやっていました。

いま、まさに開発したい拡張機能がありまして、TypeScriptの勉強にちょうどいいかなと思い、言語もそれを選んで開発をしております。

開発の勉強をする際、初級の壁を超える上でもっとも重要なことは「自分がやりたいことを見つけること」だと思います。

実際の開発現場においても、誰かのやりたいこと（人によって鮮明度合いは違いますが）がまず先にあり、ヒアリングによってそれを聞き出した結果を要件定義に落とし込み、要件の鮮明度合いに応じた対応、あるいは開発手法を選択していきますよね。

それと同様にまずは「自分のやりたいこと」を先に見つけて、それを実現するためにはどうしたらいいか考えながら開発を進めていくことで、学んだ知識を活用する力が身に付くと考えています。

そのため、今回は日頃の業務で「あったらいいな」という簡単な検索機能を持つVS Codeの機能開発を通じて、TypeSctiptの実践的なコーディングをすることに挑戦しようとしていました。そうした中で、様々な問題に直面し、この記事を書こう！と思い立ちました。

TypeSctiptやNode.jsについて、これから学んでいこうとする方も、ぜひ拡張機能開発から始めるとスモールスタートで実践力が身に付くのではないかと思っています。そのため、本記事のターゲット層に含んでおります。

3. 具体的な事象とそれに対する対応内容について

preLaunchTask 'npm watch'を実行後にエラーが存在します


このエラーは、参照しているモジュールやライブラリが見つからないことが起因になって表示されています。

extention.tsやextention.test.tsの中身を見ると、赤線(エラー)が表示されているので、その部分を解消する必要があります。

console.logでエラー表示している場合

tsconfig.jsonのlibにdomを追加します。

{
	"compilerOptions": {
		"module": "Node16",
		"target": "ES2022",
		"outDir": "out",
		"lib": [
			"ES2022","dom"
		],
    ～～省略～～

vscodeでエラー表示している場合

tsconfig.jsonのtypesにvscode、nodeを追加します。typesがない場合は、typeRootsも一緒に追加します。

    ～～省略～～
		"lib": [
			"ES2022","dom"
		],
		"sourceMap": true,
		"rootDir": "src",
		"typeRoots":[
			"node_modules/@types"
		],
		"types":[
			"vscode",
			"node"
		],
    ～～省略～～

※typeRootsがなかった場合はPowerShellでプロジェクトフォルダから以下のコマンドを実行する。

yarn add --dev @types/vscode @types/node

assert、suite、testでエラー表示している場合

tsconfig.jsonのtypesにmochaを追加します。typesがない場合は、typeRootsも一緒に追加します。

    ～～省略～～
		"lib": [
			"ES2022","dom"
		],
		"sourceMap": true,
		"rootDir": "src",
		"typeRoots":[
			"node_modules/@types"
		],
		"types":[
			"mocha"
		],
    ～～省略～～

※typeRootsがなかった場合はPowerShellでプロジェクトフォルダから以下のコマンドを実行する。

yarn add --dev @types/mocha

4. まとめ

環境によって他にもエラーが出る場合もあるかもしれないですが、現時点では私が発見して、対応できたものは以上となります。

では、楽しいコーディングライフを！！

Discussion