1. 概要
これは、拡張機能の中身を見た人は、ご存じかと思いますが、拡張機能は「JavaScript」もしくは「Typescript」で作成されています。
「npm」が必要になるようです。
「npm」は、「Node Version Manager for Windows」でインストールしました。
「Node Version Manager for Windows」のインストールに関しては、「JavaScript - Node.js - インストール」をご参照ください。
2. インストール
「npm」を使用して、必要なツールをインストールします。
管理者権限で、コマンドプロンプトを開いて。
npm install -g yo generator-code
npm warn deprecated boolean@3.2.0: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
added 672 packages in 24s
npm notice
npm notice New minor version of npm available! 11.11.0 -> 11.12.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.12.1
npm notice To update run: npm install -g npm@11.12.1
npm notice
3. プロジェクト作成
あらかじめ、プロジェクトのフォルダを作成しておいて、そこへ移動。
yo code
（表示がずれずれになっているかと思いますが・・・）
ここから、対話形式で設定していきます。
下記は、「TypeScript」のまま Enter
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
'---------´ │ generator! │
( _´U'_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ' |° ´ Y '
'list' prompt is deprecated. Use 'select' prompt instead.
? What type of extension do you want to create?
> New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (TypeScript)
ここは、拡張機能の名前になります。
なんでもよい。
What's the name of your extension?
前で入力した名前がたぶん、全部小文字で出てくると思います。
Enter
What's the identifier of your extension?
Enter
What's the description of your extension?
Y Enter
Initialize a git repository? (Y/n)
Enter
? Which bundler to use?
> unbundled
webpack
esbuild
Enter
? Which package manager to use?
> npm
yarn
pnpm
「Open ...」を選んだら、こけたので「Skip」を選んで。
Enter
Writing in D:\extensions\exercise...
create exercise\.vscode\extensions.json
create exercise\.vscode\launch.json
create exercise\.vscode\settings.json
・・・ 略 ・・・
'list' prompt is deprecated. Use 'select' prompt instead.
? Do you want to open the new folder with Visual Studio Code?
> Open with 'code'
Skip
これで、プロジェクトが作成されたのかしら・・・。
4. Hello World
ここまでの作業で、「Hello World」がでけちょるです。
「Visual Studio Code」を新規に開いて、前項のフォルダを追加します。
ソースが、「Typescript」で作成されちょるですが、ここは、「JavaScript」にします。
コマンドプロンプトを開いて、プロジェクトフォルダで。
npm run compile
終わったら。
out/extension.js
が、でけちょるはずです。
デバッグします。
F5 で、デバッグを開始すると、新規の「Visual Studio Code」のウィンドウが開きます。
そこで、Crtrl+Shift+P でコマンドパレットを開いて。
「Hello World」と入力すれば、候補に出るはずなので、それを選択して Enter
すると、右下に、「Hello World from exercise」（「exercise」は、このときつけたプロジェクト名）と表示されます。
