Visual Studio Code 拡張機能開発から公開まで

Visual Studio Code の拡張機能を開発し、実際に公開した備忘録。

拡張機能: [SearchRep - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=satosystems.searchrep)
ソースコード: [GitHub - satosystems/searchrep](https://github.com/satosystems/searchrep)

## 環境構築

### Homebrew

```shell-session
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
...
$
```

### Visual Studio Code

```shell-session
$ brew cask install visual-studio-code
...
$
```

### Node.js

```shell-session
$ brew install node
...
$
```

### Yeoman generator for Visual Studio Code Extensions

```shell-session
$ npm install --global yo generator-code
...
$ 
```

### VSCE

```shell-session
$ npm install --global vsce
...
$
```

## プロジェクト作成

```shell-session
$ yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes

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

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? searchrep
? What's the identifier of your extension? searchrep
? What's the description of your extension? Search and replace via search result editor
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? Yes
? Which package manager to use? npm
   create searchrep/.vscode/extensions.json
   create searchrep/.vscode/launch.json
   create searchrep/test/runTest.js
   create searchrep/test/suite/extension.test.js
   create searchrep/test/suite/index.js
   create searchrep/.vscodeignore
   create searchrep/.gitignore
   create searchrep/README.md
   create searchrep/CHANGELOG.md
   create searchrep/vsc-extension-quickstart.md
   create searchrep/jsconfig.json
   create searchrep/extension.js
   create searchrep/package.json
   create searchrep/.eslintrc.json


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.


npm WARN deprecated flat@4.1.0: Fixed a prototype pollution security issue in 4.1.0, please upgrade to ^4.1.1 or ^5.0.1.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN searchrep@0.0.1 No repository field.
npm WARN searchrep@0.0.1 No license field.

added 221 packages from 155 contributors and audited 222 packages in 10.45s

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

found 0 vulnerabilities


Your extension searchrep has been created!

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

     cd searchrep
     code .

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

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

```

## パッケージ化

`package.json` の先頭に `"repository"` と `"publisher"` を追加する。

```json
{
  "publisher": "satosystems",
  "repository": {
    "type" : "git",
    "url" : "https://github.com/satosystems/searchrep.git"
  },
}
```

`README.md` を自身の拡張機能の内容に修正する。

以下を実行する。

```shell-session
$ vsce package
 DONE  Packaged: /Users/ogata/git/searchrep/searchrep-0.0.1.vsix (6 files, 2.79KB)
$
```

上記で作成した .vsix はそのままでは動作しないため、以下の要領で webpack を用いてパッキングする必要がある。

- [VSCode拡張機能のパッケージ化に関する補足 - Qiita](https://qiita.com/keiji-kataoka/items/4071bbf22640d2e4dfcd)

## 公開

1. [Azure DevOps Services | Microsoft Azure](https://azure.microsoft.com/ja-jp/services/devops/) にサインインする
2. New organization で新しい組織を作成する（この組織は拡張機能の `package.json` に追記した `"publisher"` と同じ必要がある）
3. <https://aka.ms/vscode-create-publisher> にアクセスし、作成した拡張機能をアップロードする