One Step Ahead

プログラミングやエンジニアリング全般について書いていきます

VSCode拡張機能『MyCheatsheet for VS Code』 をリリースしました。

vscode

はじめに

タイトル通り、『MyCheatsheet for VS Code』 をリリースしました。
リリースしたと言っても今日というわけではなく、昨年10月にこっそりとリリースしています。 ただ、ひっそりリリースしたはいいものの、作った経緯とかをどこにも書いていなかったので、今日はご紹介交えてそこら辺を書いていきたいです。

Githubはこちら
Marketplaceはこちら

MyCheatsheet for VS Codeって何?

『Cheatsheet』はカンニングペーパーのことで、カンニング前提の社会人にとっては強い味方ですw
使用頻度の少ないコマンドや、特殊な文法などをまとめておくと検索の手間が減り非常に便利です。
実際にVSCode拡張機能でもいくつかのCheatsheetが公開されており、『Git Cheatsheet』や『Vue Cheatsheet』などがあります。

上のようにCheatsheetをダウンロードして参照するという拡張機能はすでにありましたが、自分でCheatsheetを作るという拡張機能はなかったので、自分で作ろうと思い立って作成したのが、『MyCheatsheet for VS Code』です。

機能紹介

この拡張機能は...

  • ワークスペースのRootに.cheatsheet.mdファイルが存在する場合。
  • ユーザーホームディレクトリに.cheatsheetsフォルダが存在する場合。

のいずれかで機能します。

『ワークスペースのRootに.cheatsheet.mdファイルが存在する場合』というのはイメージしやすいかなと思いますが、『ユーザーホームディレクトリに.cheatsheetsフォルダが存在する場合』というのがイメージしにくいかと思います。

端的に言えば、C:\Users\myName\cheatsheetsが存在している場合。このようなケースで機能が有効になります。(Linux, Macであれば、~/.cheatsheetsフォルダが存在している場合です。) 加えてWikiにも記載しましたが、フォルダ構造が重要です。

## windows
C:\Users\myName\.cheatsheets
 |
 |-- golang
 |     |-- .cheatsheet.md
 |
 |-- typescript
       |-- .cheatsheet.md

or 

## Linux or mac
~/.cheatsheets
 |
 |-- golang
 |     |-- .cheatsheet.md
 |
 |-- typescript
       |-- .cheatsheet.md

上のように、フォルダ名直下に.cheatsheet.mdファイルが必要になります。

Cheatsheet参照機能

show demo Ctrl + Shift + P(Win, Linux) もしくはCmd + Shift + P(Mac)でコマンドパレットを開き、Show Cheatsheetコマンドを検索します。
ワークスペースのRootに.cheatsheet.mdファイルが存在する場合は、下のように表示されます。

show wk-ch

ホームディレクトリにフォルダが存在する場合には、下記のように表示されます。

show wk-ch

後は、参照したいシートを選択すればOKです。

Global Cheatsheet初期化機能

Ctrl + Shift + P(Win, Linux) もしくはCmd + Shift + P(Mac)でコマンドパレットを開き、Init GlobalCheatsheetsDirectoryコマンドを検索します。
これはホームディレクトリ初期化コマンドで、ホームディレクトリに.cheatsheetsディレクトリが存在しない場合は、ディレクトリを作成します。

Cheatsheet追加機能

add demo Ctrl + Shift + P(Win, Linux) もしくはCmd + Shift + P(Mac)でコマンドパレットを開き、Add Cheatsheetコマンドを検索します。
コマンドを選択すると、workspaceとglobalの2つの選択肢が表示されます。
※ .cheatsheetディレクトリが存在しない場合は、globalは表示されません。

workspaceは文字通り、現在VSCodeで開いているワークスペースのRoot直下にシートを作成できます。 リポジトリでシートを共有したい場合などを想定しています。

次にglobalですが、これがHomeディレクトリ直下のシートになります。 globalコマンド選択後に、テキストボックスが表示されるので作成したいシートの名前を入力すればシートが作成されます。

Cheatsheet編集機能

edit demo Ctrl + Shift + P(Win, Linux) もしくはCmd + Shift + P(Mac)でコマンドパレットを開き、Edit Cheatsheetコマンドを検索します。
参照と同じ形式で、シートの候補が表示されるので、対象のシートを選択することでシートの編集を行うことができます。

今後の機能追加予定

今後のUpdate予定としては、

  • Gitと連携してリポジトリ機能を付けていくこと
  • GithubへのPush、Cloneをサポート

が目標になるかなと思っています。
人によっては、PCを複数台使っている人もいると思うので、PCへの簡単な共有を考えるとリポジトリ作成が必須になるかなと思っています。

まとめ

  • 自作のCheatsheetを作成できるVSCode用の拡張機能。
  • リポジトリ管理ができるような機能を追加予定。
  • Githubとの連携もできたらいいなぁと模索中。

今後の情報はこの記事のUpdateと更新情報記事でやっていきます!