VSCodeの拡張機能の作り方（初期化編）

はじめに

VSCode拡張機能を作る際の自分への忘備録として、プロジェクトの初期化方法を残しておきます。

yoとgenerator-codeをインストールする

Yeomanジェネレーターを使って拡張機能のプロジェクトを初期化するため、yoとgenerator-codeをインストールします。

package	description
yo	Yeoman which is a scaffolding tool
generator-code	Yeoman generator for VS Code extensions

npm install -g yo generator-code

初期化する

プロジェクトを初期化します。
ターミナルから、yo codeを実行します。
今回は、拡張機能をTypeScriptで作成するため、New Extension (TypeScript)を選択します。

% yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? 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) 

選択を進めると、以下の内容が質問されるので、自分が作成する拡張機能に合わせて入力を行なってください。

question	description	example answer
What's the name of your extension?	拡張機能の名前	HelloWorld
What's the identifier of your extension?	拡張機能の識別子	helloworld
What's the description of your extension?	拡張機能の説明	Hello World sample extension
Initialize a git repository?	git リポジトリを初期化するか	Yes
Bundle the source code with webpack?	webpack でソースコードをバンドルするか	No
Which package manager to use?	パッケージマネージャーの選択	npm

初期化が完了すると、次のファイルとフォルダが作成されます。

.vscode/
├── extensions.json
├── launch.json
├── settings.json
├── tasks.json
node_modules/
src/
├── test/
│ ├── runTest.ts
│ ├── suite
│   ├── extension.test.ts
│   └── index.ts
├── extension.ts
.eslintrc.js
.gitignore
package-lock.json
package.json
README.md
tsconfig.json
vsc-extension-quickstart.md