VS Code ネタ詰め合わせ 2020

# Visual Studio Code 入門

この記事はオマケみたいなモノで、今回の本編はこっちの入門記事になります。既に VS Code を利用されてる方が、これから VS Code を触っていこうとされてる方に「とりあえずここ見とけ」と勧められるモノになるよう意識して書いてみました。

- [0回 : イントロダクション](https://qiita.com/wraith13/items/1942a5c306e674fd39ad)
- [1回 : コマンドパレット](https://qiita.com/wraith13/items/f7c9f60a7fe3b0d1e4aa)
- [2回 : 設定](https://qiita.com/wraith13/items/afb752a4b4d159f9e587)

## 今年作った拡張

### Bracket Lens

https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens

今年作った拡張の中では一番人気のヤツで、閉じ括弧の後ろにそのスコープがなんのスコープなのかを全自動で表示します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/84547658-4392-2df0-4fc3-1575b0a81b3e.png)

### Blitz

https://marketplace.visualstudio.com/items?itemName=wraith13.blitz

自分的に今年作った拡張の中ではイチオシなのはこっちなんですが、残念ながら全く注目されてません。クイックピック主体の UI で VS Code の設定を行える拡張で、画面を殆ど占有せずに設定が行え、設定の Undo/Redo も備えますし、コンフィグターゲット別の設定値を一度に確認できたりもします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/b43f0b24-2670-dd71-1c02-cde5281aee3d.png)

例えばこの拡張を使ってカラーテーマを変更すると、標準の UI で変更した時と違って、最近選択していたカラーテーマがどれが分かるので、カラーテーマを変えたモノのイマイチでやっぱり元に戻そう！って時に「あれ？　前に選択してたヤツなんだっけ？」とならないで済みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/fd8c980e-5149-b1e5-ba6d-3d27ba70bd41.png)

また、標準の設定UIと異なり、設定値まで含めた状態で絞り込みが行えるので、 `telemetry=true` のような絞り込みで、有効になっているテレメトリーの設定項目にアクセスするなんていった事も手軽にできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/b9ba60e1-95e4-64c5-d76f-45f4c260affb.png)

### File Path Bar

https://marketplace.visualstudio.com/items?itemName=wraith13.file-path-bar

これと同様の拡張が存在してて愛用してたのですが、最近の VS Code では非常に残念な事になるバグが発生してて使い物にならなくなってしまい、バグ修正のプルリクを送っても完全に放置されたままだったんで、それならと自作した拡張です。

アクティブなテキストエディタで開いているファイルのパスをステータスバーに表示するのと、その表示をクリックする事でそのファイルに関するメニューを表示するだけの拡張です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/384a0a0a-b46c-6d42-e3e8-0141c73503ec.png)

### Windows Terminal Utility

https://marketplace.visualstudio.com/items?itemName=wraith13.windows-terminal

これはまぁ、作るだけ作ってみるかと用意した拡張なのですが、いくつかオマケ的な機能もありますが基本的には VS Code から Windows Terminal を呼び出す為だけのモノです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146335/7380932d-2aec-4c24-27f2-cc68ec6f00da.png)

### save-vscode-schemas

https://github.com/wraith13/save-vscode-schemas

この記事内で後ほどお話ししますが、こいつは私以外が利用する必要がないモノなので marketplace には publish していません。

## VS Code's schemas

VS Code には独自の様々なスキーマ情報があるのですが、VS Code 拡張内であれば次のようなコードで取得可能です。( この例ではテキストを取得してるだけですので、多く場合、ここから更に ```JSON.parse()``` をかます事になると思いますが )

```typescript
const getDocumentText = async (uri: vscode.Uri) =>
    await vscode.workspace.openTextDocument(uri).getText();

const vscodeSchemaTasks = getDocumentText(vscode.Uri.parse("vscode://schemas/tasks"));
```

`vscode://schemas/settings/default` などは、その VS Code のバージョン及びインストールされている拡張に基づいて設定のスキーマ情報を返してくれる為、どんな設定項目が存在するのか詳細に参照する事ができ、 [Blitz](https://marketplace.visualstudio.com/items?itemName=wraith13.blitz) もこの情報を元に設定項目を提示しています。

で、便利な情報源ではあるのですが、 VS Code のバージョンが上がった際には日常的に情報が変わってしまう為、記録を残しておいて差分情報を見られるようにしてないと辛い事もある為、以下のリポジトリに記録していく事にしました。で、その為に用意したのが「今年作った拡張」のところの最後の拡張で、 VS Code のスキーマ情報を読み出しファイルに書き出すだけの拡張です。

https://github.com/wraith13/vscode-schemas

ここに記録しているのはほぼ素の状態の VS Code での記録となります。( インストールしている拡張が多いとその分、情報が膨れあがって差分を追いかけ難くなるので。なお、拡張を一時的に無効化してても、インストールされてる拡張の情報はスキーマに反映されます。 )

いま自分の環境でどうなっているか確認したい場合は [System Information](https://marketplace.visualstudio.com/items?itemName=wraith13.sysinfo-vscode) に `System Information: Show Schema` というコマンドを用意してあるのでよろしければご利用ください。

## vscel

https://github.com/wraith13/vscel

VS Code の拡張を作る上で、公式に用意されてる API をそのまま使うのは若干使い勝手が悪かったりするので、 VS Code 拡張向けのライブラリーを作成しました。

基本的に自分用で、ドキュメントも整って予告なく破壊的もすると思うので、直接利用される事はオススメしませんが、パクって利用できそうなところがあったら好きにパクってご利用ください。