7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【VSCode】既存の拡張機能はカスタマイズして、独自仕様にできます。【勉強用にも】

Last updated at Posted at 2020-01-26

手順のまとめ

  1. Visual Studio Marketplace(拡張機能がここで公開されています。)で手頃な拡張機能を探す。
  2. GitHubからソースを入手する。(GitHubへのリンクがあります。※拡張機能によってはリンクがないこともあります。)
  3. 中身を修正してカスタマイズする。
  4. vsce packageを実行してVSIXを作成
  5. VSCode上からコマンドパレットでExtensions: Install from VSIX...を実行、VSIXを選択して拡張機能をインストール

これだけで理解できる方は以下の解説は不要です。

はじめに

前回の投稿で、独自の拡張機能を作る方法を解説しました。
【拡張機能の作り方】Visual Studio Code(VSCode)のスニペット作成が面倒だったので、自作の拡張機能をインストールした。 - Qiita

上記では、「yo code」というコマンドで拡張機能の雛形を作る方法を紹介しています。
ただ、すでに多くの拡張機能がソースを含めて公開されています
このソースをカスタマイズして独自仕様にすることもできるので今回はその手順を解説します。

手順

Visual Studio Marketplaceで手頃な拡張機能を探す

Visual Studio Marketplaceでは、拡張機能が公開されています。
今回はWorkbenchという拡張機能を使ってみます。

Workbench - Visual Studio Marketplace

GitHubからソースを入手

VSCode拡張昨日は、ソースがGitHubで公開されているものも多くあります。
GitHubからZipをダウンロードしてみます。

スクリーンショット 2020-01-27 4.26.06.png スクリーンショット 2020-01-27 4.26.32.png

andrew-lis/Workbench: Workbench - the VSCode Extension

中身を修正してカスタマイズ

中身は当然動くソースなので、イメージもつかんでいけると思います。
たいてい、package.jsonsrc/extensions.tsに調整をかけていくことになると思います。
(Workbenchは、src/extensions.tsからsrc/commands.tssrc/models.tsが読み込まれているのでこれらもカスタマイズ対象でしょう。)

VSIXを作成

ひととおりの調整が終わったら、vsce packageを実行してVSIXを生成します。

VSCodeで拡張機能をインストール

VSCode上からコマンドパレットでExtensions: Install from VSIX...を実行、VSIXを選択して拡張機能をインストールします。
これでカスタマイズした拡張機能を使うことができます。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?