mottox2 blog

CodeSandboxのキーバインドを自分好みにする方法

tips

CodeSandboxはWeb上でVisual Studio Codeが提供されるWebサービスです。
ReactやVueのフロントエンド環境はもちろん、Next.jsやNuxt.jsなどのサーバーを必要とするアプリケーションの開発環境を立ち上げながらコードを書けるのが特徴です。

CodeSandboxをより便利に使うために、「Vimのキーバインドを有効にする方法」と「JSONでキーバインドをカスタマイズする方法」を紹介します。

Vimのキーバインドを有効にする方法

VimからVSCodeに入った人は「VSCodeVim」でVim風キーバインドを使っている人は多いのではないでしょうか?

以下の手順でVimキーバインドを有効にできます。

  1. ヘッダーのアイコンをクリックし「Preferences」を選択
  2. 次のような設定モーダルが表示されるので左ペーンから「Editor」を選択
  3. 「Enable Vim extension」を有効にすると、ページのリロードを求められるので支持にしたがい「Confirm」を選択

codesandbox.io_s_gui-book-pj5x2.png (139.5 kB)

JSONでキーバインドをカスタマイズする方法

VSCodeでいう「Keyboard Shortcut」の設定をいじる方法もあります。
CodeSandbox上では一見設定画面へのアクセス方法がありませんが、Command Palatteを経由することで設定画面にアクセスします。

以下の手順でキーバインドをカスタマイズできます。

  1. Cmd(Ctrl)+ Shift + P でCommand Palatteを開く
  2. 「Keyboard」と入力し表示された「Preference: Open Keyboard Shortcuts (JSON)」を選択
  3. VSCode形式でキーバインドを設定します。
スクリーンショット 2020-03-29 22.52.13.png (146.8 kB)

参考に自分が設定したJSONを掲載します。emacs風の行頭・行末に飛ぶキーバインドです。

json
[
  {
    "key": "ctrl+a",
    "command": "cursorLineStart"
  },
  {
    "key": "ctrl+e",
    "command": "cursorLineEnd"
  },
]
B!
dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

dev

リモート勤務なITエンジニアが分報で気をつけること

2020年になり誰もが予想しなかった速度で、人々の営みはオンライン上で行われるようになりました。もちろん仕事も例外ではありません。 そういった変化の中ではオンライン上のコミュニケーションがより重要

poen

うちでやりたい○つのこと

新型コロナウイルスの影響で外出が推奨されなくなって数週間がたった。 「自分は普段から引きこもりがちだ。大して影響はないだろう。」と構えていたが、日に日に後ろ向きの感情が強くなっているように感じている

うちにいよう
Copyright © 2019 @mottox2 All Rights Reserved.