Help us understand the problem. What is going on with this article?

僕の考えた最強のキーバインドチートシート(VSCode)

More than 1 year has passed since last update.

僕の考えた最強のvscodeチートシート

いろんな人が書いているチートシートにこんな不満はありませんか?

  • windows(またはmac)のキーしか書いてない
  • あっちの人の記事にはあれが書いてあるけど、これには書いてない
  • 俺キーバインド変えてるし…
  • もっとマニアックなコマンド教えろ

それらを解決すべく、カスタマイズ可能なチートシートを作りました。

成果物
https://optimistic-khorana-d23568.netlify.com/

vscode.gif

以下各フォームについて解説します。

フォームの入力内容はlocalstorageに保存

各フォームの入力内容はlocalstorageに保存しているので、再アクセス時に前の入力値が保たれます。

自分のkeybinding.jsonでアップデートできる

このチートシートは「デフォルトjson」の部分に貼り付けたkeybinding.jsonを読み込んで、各コマンドに僕が考えたコメントを割り振ること作成されます。

フォームに何も入力されていない場合、keybinding.jsonは拡張機能を切った僕のwindowsとmacのPCのkeybinding.jsonが適用されます。ユーザーエージェントから判別してmacの場合は、macのkeybinding.jsonが。それ以外はwindowsのkeybinding.jsonが適用されます。(linuxはわからなかったのでごめんなさい)

拡張機能でコマンドが変わっている人は特に忘れずに自分のdefaultのjsonを「デフォルトjson」の欄に貼り付けてください。
また、自分でカスタマイズしたjsonの方はカスタムjsonの方に貼り付けてください。

stripJsonCommentsを使用しているので、jsonにコメントが入っていても問題ありません。

https://www.npmjs.com/package/strip-json-comments

なお自分のjsonで起こったので注意です。下記のようなコードを貼り付ける際、気をつけてください。'hogehoge'の後ろの「,」を取り除かないとJSONのパースに失敗します。(vscode上では問題なく動く模様。)

    command:'hogehoge',
}

キーバインド置換設定

keyの項目の文字列を置換します。windoswでは「oem_〇〇」。macでは「[〇〇]」のような文字列がキーボード配列によって指すキーが違ったりしているので、自分のパソコンのキーバインドを参考にデフォルト値を決定しています。

また、alt,cmd,shift,ctrlはmacでは記号がデフォルト値に入るようにしてあります。

キーボード配列で変わるものではありませんが、escape等も別の表示ができるようにしてあります。

僕はWindowsでこんな風に変えてます。

alt→Alt
ctrl→Ctrl
escape→ESC
backspace→Back
home→Fn+right (ファンクションキーがないと押せないので)
end→Fn+left
pageup→Fn+up
pagedown→Fn+down

commandとwhenでフィルター

このチートシートはjsonから作り出した配列に対してcommandとwhenの値にフィルターをかけて作成しています。

スペースで複数のワードをフィルターに使えます。

「hoge moge」と入力した場合「hogeかつmogeを含む」フィルターになります。(hogeまたはmogeにはならないので注意)

単語の先頭に「-」をつけることで、単語を除外できます。「hoge -moge」では「hogeを含み
、mogeを含まない」フィルターになります。

常に表示するコマンド

「常に表示する」欄に入力したコマンドはフィルターで除外されない他、元のキーバインドのjsonに載っていない場合、key欄とwhen欄を空にして表示させます。

プリセット

上記のフォームに入力した値は名前をつけてプリセットとして登録できます。
プリセットはlocal storageに保存するので、再読込しても問題ありません。

デフォルトプリセット

最初から設置してあるプリセットはカスタマイズ不可能です。
マニアックなキーバインドを把握したかったのも動機の一つなので、わざわざ書かなくていいようなマニアックな操作も載ってます。
後々もっと使いやすいデフォルトプリセットを用意して切り替えられるような仕組みにしたいです。

作るのに使ったもの

  • vuejs
  • vuetify

templateはpugで書いています。もうpugしか書きたくない。

ソースコード

ソースコードか?欲しけりゃくれてやるぜ・・・ 探してみろ。このサイトのすべてをそこに置いてきた!

https://github.com/tempakyousuke/vscode-cheatsheet

by TEMPA・D・KYOUSUKE

※ ネタがわからない人ごめんなさい

課題や感想

  • 割と中途半端な状態で発表した自覚があります。
  • マサカリが怖い。
  • デフォルトプリセットはまだまだ見直し・追加予定。
  • 選んだプリセットでユーザーにキーを打ち込ませるトレーニングゲームとかできたらいいなとか思ってます。

追記予定

  • ちょっとまだまだ修正する点が多いサイトですが、落ち着いたら製作途中で溜まったvscodeの知見書きます。
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away