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

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

拡張機能: SearchRep - Visual Studio Marketplace
ソースコード: GitHub - satosystems/searchrep

環境構築

Homebrew

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

Visual Studio Code

$ brew cask install visual-studio-code
...
$

Node.js

$ brew install node
...
$

Yeoman generator for Visual Studio Code Extensions

$ npm install --global yo generator-code
...
$ 

VSCE

$ npm install --global vsce
...
$

プロジェクト作成

$ 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" を追加する。

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

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

以下を実行する。

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

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

• VSCode拡張機能のパッケージ化に関する補足 - Qiita

公開

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