vsixを使ったvscodeのアップデートに負けにくいCSSや拡張機能のカスタマイズ方法

vscodeは現状頻繁にアップデートがかかる為、一部CSSの調整を行っても**すぐに元に戻ってしまいます**。
利用している拡張機能なんかも要望を出したり、プルリクで改善できる内容なら良いのですが、作者の方針と違う場合もあるので**独自のカスタマイズ**が必要な場合もあると思います。
なので**vsixを使ったアップデートの影響受けないカスタマイズ方法**を紹介します。
この方法を使うと**typescriptや拡張機能の予備知識がなくても**、**JSだけでカスタマイズできる**メリットもあります。


## vscode本体のアップデートからカスタマイズCSSを守る
vscode本体のアップデートのたびにCSSがリセットされてしまうので、アップデート対象外にするのは難しいです。
なので拡張機能を利用して、**アップデートのたびにCSSを追記する**方法を取ります。
**vscodeの背景にカバー画像を表示する**ことができる拡張機能 [background-cover](https://marketplace.visualstudio.com/items?itemName=manasxx.background-cover) は、**本体のCSSに背景画像を追記する仕組み**になっています。
アップデートのたびに再度実行されるので、この部分を利用してカスタマイズするとアップデートが掛かっても**すぐにCSS復活**が可能になります。
**他の拡張機能のCSSも含めて**、修正をしたいものは全てここに入れてしまえば、アップデートのたびに修正する必要がなくなります。

## 拡張機能のアップデートから拡張機能のカスタマイズを守る
拡張機能は、package.jsonの**name**と**publisher**が一致した**version**の高いものをアップデートする仕組みになっています。
**ローカルインストールできる vsix**を解凍してカスタマイズすると、これらを変更することができるので別名でインストールが可能になります。
別物扱いの拡張機能になるのでアップデートを回避できます。

## VSIXを別名でインストールする方法

今回は**CSSカスタマイズのアップデート対策**として利用できる[background-cover](https://marketplace.visualstudio.com/items?itemName=manasxx.background-cover)を別名インストール出来るようにします。


## 1. [background-cover](https://marketplace.visualstudio.com/items?itemName=manasxx.background-cover)のvsixを取得する

拡張機能の最新版vsixは、marketplaceの拡張機能インストールページにあるサイドメニューの【**Download Extension**】から取得することができます。
![vsix01.jpg](https://qiita-image-store.s3.amazonaws.com/0/320569/9c4aaf55-73d0-86c1-a530-6f900ebcf832.jpeg)

特定のバージョンが欲しい場合は[こちら](https://inocop.hatenablog.com/entry/2018/03/14/135252)を参考にしましょう。

## 2. vsixを解凍してpackage.jsonの内容を変更する

**vsixの中身**は、chromeの拡張機能とかと同様に**ZIPファイル**で、解凍ツールで解凍するとこんな感じになっています。
![vsix02.jpg](https://qiita-image-store.s3.amazonaws.com/0/320569/d909e095-c85c-bb92-e53c-67ccc5c91a74.jpeg)

**extensionフォルダ**の中身がインストールされることになります。
この中のpackage.jsonを修正していきます。

```json:extension/package.json
{
    "displayName": "background-cover-custom",
    "description": "カスタマイズしたbackground-cover",
    "version": "1.0.0",
    "publisher": "BigFly",
    ...
```
**name**か**publisher**を変更することで別の拡張機能になります。
プライベートインストールで**最低限修正が必要なのはこれだけです。**
※ここでは安易な名前にしていますがmarketplaceで被らない名前を付けましょう。被ってる場合は公開バージョンが上位のものに更新されてしまいます。

独自でカスタマイズしたものとしてわかりやすくしたい場合は**displayName**や**description**、**icon**を変更したりすると良いでしょう。
この拡張機能には、**フォルダからランダムに画像を変更できるショートカットコマンド**も設定されているので、**keybindings**を**ctrl+shift+f7** から変更するのもありです。
その他プロパティを変えたい場合は[こちら](https://code.visualstudio.com/docs/extensionAPI/extension-manifest)で調べてみてください。


## 3. 拡張機能をカスタマイズ

ここでは[vscodeの拡張機能background-coverの背景画像をもっと明るく表示する方法](https://qiita.com/hotsun/items/d17057f7621b3796b3a4)の記事を参考にカスタマイズしてみます。

```javascript:extention/out/getCss.js
return `
    /*ext-${extName}-start*/
    /*ext.${extName}.ver.${version}*/
    body{
        background-size:cover;
        opacity:${opacity};
        background-image:url('${imagePath}');
        background-position:center top; /* 横を中央基準に変更 */
    }
    .monaco-workbench{background:none !important;} /* workbench.colorCustomizationsを機能させるために必須 */ 
    .monaco-workbench .panel.integrated-terminal{opacity:0.8} /* ターミナル部分も癖があるので直接透過する */
    /*ext-${extName}-end*/
`;
```
壁紙は**中央基準**で作られてる気がするので、さらに1行追加してみました。
エディタを小さく開いても中心が基準になります。
CSSのカスタマイズがしたいだけで、別に背景いらないよって人は、デフォルト画像が表示されちゃうので/\*ext-${extName}～\*/関連のコメント部分以外を全部削除しましょう。
※元ネタにも書いてありますが**CSSが認識できない記述**をすると**表示がおかしくなる可能性**があるので気を付けてください。


## 4. 再度zip化して拡張子をvsixにする

修正が終わったらまた**zip化**します。
注意点としては、解凍したときに出来た**フォルダごとではなく画像のように3つを選択して**zip化することです。
![vsix03.jpg](https://qiita-image-store.s3.amazonaws.com/0/320569/3ffe10ae-21ed-16be-14b3-6e42440b1633.jpeg)
この例だとextention.zip → extention.vsix とか**適当な名前**になりますが、このままでも**正常にインストール**することができます。まあ何の拡張機能か判断がつかないので、残しておく場合は名前を変更しておいた方が良いですね。

## 5. vscodeにvsixをインストールする

vscodeの拡張機能パネルを開き、右上からメニューを開き【vsixからインストール】で先ほどのvsixをインストールします。
![vsix04.jpg](https://qiita-image-store.s3.amazonaws.com/0/320569/cb469880-6cff-10fb-a53c-9a406f2f3c66.jpeg)

↓こんな感じでインストールが出来ました。
![vsix05.jpg](https://qiita-image-store.s3.amazonaws.com/0/320569/3f9e09c7-e97a-8df2-dec4-6c0a134ed032.jpeg)
[先ほどの記事](https://qiita.com/hotsun/items/d17057f7621b3796b3a4)のように[workbench.colorCustomizations](https://code.visualstudio.com/docs/getstarted/theme-color-reference) の設定をすれば背景を明るくすることも可能です。


## 6. インストールした後のCSSや拡張機能のカスタマイズについて
もう**アップデートの影響を受けなくなっている**ので、インストールされた拡張機能をそのまま修正しても問題ないのですが、vsix化前のファイルを再度修正してvsix化してインストールする方が簡単です。
再インストールの際も**version**を上げる必要はありません。そのまま上書きされます。
※バージョン下げた時だけ「古いバージョンですが上書きしますか？」とメッセージが出ます。


実際作業してみると**すごく簡単な内容**なのですぐカスタマイズできると思います。
逆に言うと簡単に作れちゃうので、**公式以外のところから拾ってくるのは危険**とも言えますね。
とりあえず一度試せば他の拡張機能も**俺俺カスタマイズ**が色々出来ると思うので、ぜひお試しください。


[:christmas_tree: FORK Advent Calendar 2018](/advent-calendar/2018/fork)
:arrow_left: 02日目 [LitElement + actor-helpers でカウンター](/howking/items/f6fa77a414d358696fda) @howking 
:arrow_right: 04日目 [『AWS Loft Tokyo』に行ってみた](/otamma/items/b57c118b754084db499c) @otamma