CodeSandboxのキーバインドを自分好みにする方法
CodeSandboxはWeb上でVisual Studio Codeが提供されるWebサービスです。 ReactやVueのフロントエンド環境はもちろん、Next.jsやNuxt.jsなどのサーバーを必要とするアプリケーションの開発環境を立ち上げながらコードを書けるのが特徴です。
CodeSandboxをより便利に使うために、「Vimのキーバインドを有効にする方法」と「JSONでキーバインドをカスタマイズする方法」を紹介します。
Vimのキーバインドを有効にする方法
VimからVSCodeに入った人は「VSCodeVim」でVim風キーバインドを使っている人は多いのではないでしょうか?
以下の手順でVimキーバインドを有効にできます。
- ヘッダーのアイコンをクリックし「Preferences」を選択
- 次のような設定モーダルが表示されるので左ペーンから「Editor」を選択
- 「Enable Vim extension」を有効にすると、ページのリロードを求められるので支持にしたがい「Confirm」を選択
JSONでキーバインドをカスタマイズする方法
VSCodeでいう「Keyboard Shortcut」の設定をいじる方法もあります。 CodeSandbox上では一見設定画面へのアクセス方法がありませんが、Command Palatteを経由することで設定画面にアクセスします。
以下の手順でキーバインドをカスタマイズできます。
- Cmd(Ctrl)+ Shift + P でCommand Palatteを開く
- 「Keyboard」と入力し表示された「Preference: Open Keyboard Shortcuts (JSON)」を選択
- VSCode形式でキーバインドを設定します。
参考に自分が設定したJSONを掲載します。emacs風の行頭・行末に飛ぶキーバインドです。
[
{
"key": "ctrl+a",
"command": "cursorLineStart"
},
{
"key": "ctrl+e",
"command": "cursorLineEnd"
},
]