vscode-ext

vscode-ext.md

https://code.visualstudio.com/api/get-started/your-first-extension

npm install -g yo generator-code

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

❯ 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)
? What's the name of your extension? vscode-ext-hello-world
? What's the identifier of your extension? vscode-ext-hello-world
? What's the description of your extension? hello world
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm

Writing in /Users/makototateno/ghq/github.com/makotot/vscode-ext-hello-world...
   create vscode-ext-hello-world/.vscode/extensions.json
   create vscode-ext-hello-world/.vscode/launch.json
   create vscode-ext-hello-world/.vscode/settings.json
   create vscode-ext-hello-world/.vscode/tasks.json
   create vscode-ext-hello-world/package.json
   create vscode-ext-hello-world/tsconfig.json
   create vscode-ext-hello-world/.vscodeignore
   create vscode-ext-hello-world/webpack.config.js
   create vscode-ext-hello-world/vsc-extension-quickstart.md
   create vscode-ext-hello-world/.gitignore
   create vscode-ext-hello-world/README.md
   create vscode-ext-hello-world/CHANGELOG.md
   create vscode-ext-hello-world/src/extension.ts
   create vscode-ext-hello-world/src/test/runTest.ts
   create vscode-ext-hello-world/src/test/suite/extension.test.ts
   create vscode-ext-hello-world/src/test/suite/index.ts
   create vscode-ext-hello-world/.eslintrc.json

Changes to package.json were detected.

Running npm install for you to install the required dependencies.

added 317 packages, and audited 318 packages in 10s

66 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Your extension vscode-ext-hello-world has been created!

To start editing with Visual Studio Code, use the following commands:

     code vscode-ext-hello-world

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

To run the extension you need to install the recommended extension 'amodio.tsl-problem-matcher'.

For more information, also visit http://code.visualstudio.com and follow us @code.


? Do you want to open the new folder with Visual Studio Code? Open with `code`

src/extensions.tsでF5押して、コンパイルしてデバッグ開始。拡張機能開発するホストウィンドウが開かれる。 コマンドパレットで> Hello Worldを選んで、開発中となる拡張機能のコマンド実行できる。

---

https://code.visualstudio.com/api/get-started/extension-anatomy

hello worldがどう動いていたか

• onCommandを登録
  • https://code.visualstudio.com/api/references/activation-events#onCommand
  • > Hello Worldコマンドで拡張機能が有効になる
• contributes.commandsにHello Worldを入れておくことで、コマンドパレットに登録
  • https://code.visualstudio.com/api/references/contribution-points#contributes.commands
  • command IDに紐付け
• commands.registerCommandでcommand IDにコマンドを登録
  • https://code.visualstudio.com/api/references/vscode-api#commands.registerCommand