VSCodeをEmacsキー配列で使う
=========================
以下の記事で「VSCode([[https://code.visualstudio.com/|Visual Studio Code]])」をインストールした。そして、Emacsキー配列で使うようにカスタマイズしたので備忘録を残す。
[[myblog>2021/06/12/vscode-macos-windows-linux/|【VSCode】macOS, Windows, Ubuntuで共通なエディター環境を構築（インストール編）]]
基本キーボード配列変更
------------------
Emacs配列の場合は、CtrlキーとMetaキーが押しやすい位置にあった方が便利なので、以下の変更をする。
### Windowsの場合
CtrlキーとCapsキーを入れ換えて、Ctrlキーが小指で押しやすい位置に移動する。
Windowsの場合、レジストリを書き換える事でキー配列は変更ができるので、Microsfotが配布していた「[[software/windows/remapkey]]」というツールを使って変更を行った。尚、このツールは現在では入手できないかもしれないが、同等機能のソフトが色々と出回っているので、どれらを利用してもよい。
### macOSの場合
Emacsキー操作では、Metaキーとして使われるoptキーが親指で押しやすい位置にあった方が便利なのでcmdキーと入れ替える。[[myblog>2019/05/03/macos-karabiner-elements-key/|Karabiner-Elements]]を使って、vscodeでのみキー入れ替えを行う。
以下の「`vscode.json`」ファイルを作成し、`~/.config/karabiner/assets/complex_modifications/` フォルダに保存。
{
"title": "ALT <=> CMD in VSCode",
"rules": [
{
"description": "Swap option and command in vscode",
"manipulators": [
{
"type": "basic",
"from": {
"key_code": "left_option",
"modifiers": {
"optional": [
"any"
]
}
},
"to": [
{
"key_code": "left_command"
}
],
"conditions": [
{
"type": "frontmost_application_if",
"bundle_identifiers": [
"VSCode"
]
}
]
},
{
"type": "basic",
"from": {
"key_code": "left_command",
"modifiers": {
"optional": [
"any"
]
}
},
"to": [
{
"key_code": "left_option"
}
],
"conditions": [
{
"type": "frontmost_application_if",
"bundle_identifiers": [
"VSCode"
]
}
]
}
]
}
]
}
上記設定を、Karabinerで有効にする。
{{software:vscode:karabiner-preferences-vscode-01.png?800|}}
尚、Ctrlキーについては、Mac標準キーボードでは、小指の横に配置されているので変更の必要はないが、もしもWindowsキーボードなどを使っている場合などは、このソフトなどで配列変更する。
### Ubuntuの場合
CtrlキーとCapsキーを入れ換えて、Ctrlキーが小指で押しやすい位置に移動する。手順は、下記記事を参照。
[[https://www.yokoweb.net/2019/08/07/ubuntu-18_04-desktop-caps-ctrl/|【Ubuntu 20.04/18.04 LTS】CapsLockとControlキーを入れ替える]]
VSCodeのキーバインド変更
--------------------
拡張機能を使ってEmacsキー準拠配列にカスタマイズする。いろいろな拡張機能が公開されているが「[[https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx|Awesome Emacs Keymap]]」がお勧めでインストールする。
### 拡張機能のインストール
VSCodeでは、様々な拡張機能が準備されている。まずは、Emacsキー配列に変更する拡張機能をインストールする。
サイドメニューの■マークが並んだアイコンをクリック。
{{:software:vscode:vscode-win-06.png?600|}}
検索フォームに「Awesome Emacs Keymap」と入力する。（全部入力しなくてもマッチする一覧がでる）
これで、基本的なEmacsキー操作になる。キー割り当ては、下記URLのドキュメント参照。
[[https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx|Awesome Emacs Keymap]]
キーバインドの調整
--------------
あとは、好みのキーバインドを追加する。キーバインドは、`keybindings.json` ファイルに記述する事で設定できる。
左下の歯車アイコン（設定）から「キーボードショートカット」を選択。
{{:software:vscode:vscode-kybind-01.png|}}
設定されているキーバインドの一覧が表示される。次に、右上の「キーボードショートカットを開く(JSON)」を押す。
{{:software:vscode:vscode-keybind-02.png|}}
`keybindings.json`ファイルの編集画面となるので、キー割り当ての定義を記述する。
{{:software:vscode:vscode-keybind-03.png|}}
以下の定義を追加。
[
{
"key": "ctrl+,",
"command": "workbench.action.previousEditor",
"when": ""
},
{
"key": "ctrl+.",
"command": "workbench.action.nextEditor",
"when": ""
},
{
"key": "ctrl+z ctrl+p",
"command": "workbench.action.previousEditor",
"when": ""
},
{
"key": "ctrl+z ctrl+n",
"command": "workbench.action.nextEditor",
"when": ""
},
{
"key": "ctrl+z ctrl+a",
"command": "cursorTop",
"when": "textInputFocus"
},
{
"key": "ctrl+z ctrl+e",
"command": "cursorBottom",
"when": "textInputFocus"
},
{
"key": "ctrl-i",
"command": "tab",
"when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
},
// サイドバーのファイラーへ移動（戻る）
{
"key": "ctrl-z ctrl-o",
"command": "workbench.view.explorer"
},
]
以下のキー定義となる。
^ キー割当て ^ 説明 ^ コマンド ^
| C-, | 左のタブへ切り換え | workbench.action.previousEditor |
| C-. | 右のタブへ切り換え | workbench.action.nextEditor |
| C-z C-p | 左のタブへ切り換え | workbench.action.previousEditor |
| C-z C-n | 右のタブへ切り換え | workbench.action.nextEditor |
| C-z C-a | バッファー先頭に移動 | cursorTop |
| C-z C-e | バッファー末尾に移動 | cursorBottom |
| C-i | タブ | tab |
| C-z C-o | サイドバーのファイラへ移動 | workbench.view.explorer |
C-sキーでの検索動作
----------------
`C-s`キーでの検索の挙動が違っててストレスだったが、[[https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx|Awesome Emacs Keymap]]のFAQにも書かれているがEmacsと同様にするには下記の設定を追加する。
"editor.find.seedSearchStringFromSelection": "never",
> i-search (C-s) is initialized with the currently selected string and the previous search is removed.
> This is VSCode's design that an extension cannot control. To disable it, you should set editor.find.seedSearchStringFromSelection VSCode setting as "never". It makes the find widget work similarly to Emacs.
{{:software:vscode:emacs-editor-find-search.png?600|}}
`C-s`の動きが近くなって快適になった。あとは、`C-s C-w`での検索ワードの取得の挙動を同じにしたい。
### 検索ウィジェットの終了
[[https://marketplace.visualstudio.com/items?itemName=tuttieee.emacs-mcx|Awesome Emacs Keymap]]のFAQにも書かれているが、ウィジェットは移動キーで閉じますので、検索ウィジット上でのカーソル移動はできない。これは、オリジナルのEmacsの動作を意図された設計です。
尚、`C-g`でキーでも検索ウィジットが終了できるが、検索開始したカーソル位置に戻ったりする仕様なので、オリジナルのEmacsとは動きが異なる。カーソル移動で抜け出すように使うようにした方がよい。
関連記事
-------
- [[software/vscode/vscode-user-settings]]
- [[myblog>2021/06/12/vscode-macos-windows-linux/|【VSCode】macOS, Windows, Ubuntuで共通なエディター環境を構築（インストール編）]]
- [[myblog>2017/04/01/emacs-macos-msys2-ubuntu/|【Emacs 25-27】macOS, Windows, Ubuntuで共通なエディター環境を構築（まとめ）]]
参考
----
1. [[https://qiita.com/peutes/items/4e20b48185b24bf06a8f?utm_source=pocket_mylist|Karabiner-Elementsで、MacのTerminalでoptionとcommandを入れ替え・自由にキーバインド変更をする例]]
2. [[https://knowledge.sakura.ad.jp/23355/?utm_source=pocket_mylist|快適キーボード操作のためのキーカスタマイズ ～Mac編～]]
3. [[https://github.com/vscode-doc-jp/Docs/blob/master/getstarted/keybindings.md]]
4. [[https://qiita.com/kurun_pan/items/507517c3f569b080abe2|VSCodeのEmacsキーバインド拡張まとめ]]
5. [[https://blog.solunita.net/posts/how-to-find-keybind-what-fired-in-vscode/|Visual Studio Code のキーボードショートカットで発火してるコマンドを探す方法]]
6. [[https://noanoa07.livedoor.blog/archives/2196964.html|VSCode のキーボードショートカットのカスタマイズ法とオススメ設定]]
7. [[https://qiita.com/keitean/items/04727aeb673d1822107e|VSCodeでキーバインドを設定する。keybindings.jsonが無い時の対処法]]
8. [[http://hidemon-memo.blogspot.com/2019/04/vscodetabctrl-i.html|vscodeでtabをctrl-Iで入力する]]
9. [[https://kkznch.hatenablog.com/entry/2020/10/11/160736|VSCodeでAwesome Emacs Keymap使ってるときに検索バー内でカーソル移動したい]]
10. [[https://dev.classmethod.jp/articles/vscode_file_operation_shortcut_setting/|【小ネタ】極力キーボードから手を離したくないライトvimmerがVSCodeに設定しているショートカット（基本的なファイル操作編）]]
- - - - -