VS CodeとVimが好きなエンジニアが考えた最強のエディタ

Slide 1

Slide 1 text

VS CodeとVimが好きなエンジニアが考えた最強のエディタ KMiura(@k_miura_io)

Slide 2

Slide 2 text

自己紹介 • 三浦耕生(こうき) • オフィスDXのSaaSのバックエンドエンジニア • JAWS UG名古屋運営 • Cloudflare Meetup 名古屋運営 @k_miura_io koki.miura05

Slide 3

Slide 3 text

エディタの変遷

Slide 4

Slide 4 text

大学入学して • プログラムはターミナルでやるものという考えが刷り込まれていた • viでプログラムを書いて、保存、編集、カーソル移動をすべてキーボードでやることに最初慣れなかった • Mac、LinuxとUnixの世界に片足突っ込んだ

Slide 5

Slide 5 text

大学2年～就活直前 • メインの開発機がUbuntu • Vimでの開発を強要された • コピペはgedit(Ubuntuにあるデフォルトのエディタ)

Slide 6

Slide 6 text

就活～大学院 • 東京の会社へ就活行った時に参加した勉強会でAtomを知る • 自分好みのデザインにできるのが魅力的 • カスタムしすぎるとクソ重くなる…

Slide 7

Slide 7 text

社会人になる直前 • MS製品のくせにクソ軽くて使いやすい… • どれだけ拡張機能いれても動作が重くならない • 新卒時代の会社はIntelliJのライセンス付与されてたけどそれでもブレずにVSCode を使ってたｗ

Slide 8

Slide 8 text

エディタ変遷 vi 大学入学学部2年 gedit / Vim 学部4年 Atom 社会人になる直前 VSCode

Slide 9

Slide 9 text

大きな転機が…

Slide 10

Slide 10 text

英語配列のキーボードに鞍替え • 新卒時代のメンターの影響で英語配列のキーボードを買う • 奮発してRealforceを買ったら思いの外フィットした(合わなかったら損するところだったｗ) • 出先でも英語配列を使いたくてHHKBも買う

Slide 11

Slide 11 text

久々にVimを触ってみたら… あれ、昔より使いやすくね？ ↑ 社会に馴染めない僕(イメージ)

Slide 12

Slide 12 text

Vim / VSCodeの両刀遣いに Vimのキーバインドは合理的だけど、VSCodeの拡張性は便利両方のいいとこ取りできる方法はないだろうか…

Slide 13

Slide 13 text

会社の勉強会で… IntelliJにVim拡張機能入れてキーバインドをカスタムしてます ↑話を聞いている(ふりをしている)僕そんなことできるんだ…

Slide 14

Slide 14 text

VSCodeにもそういう機能があった https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Slide 15

Slide 15 text

動かしたときの挙動

Slide 16

Slide 16 text

VSCodeのVim拡張 • エディタ内でのカーソル移動やコードのコピペなどがVimと同じように操作できる • VSCodeのショートカットも使えるが、それが Vimとかぶる時はVimが優先される • あくまでVimのキーバインドをエミュレートしているだけなので自分で設定しているVim拡張は使えない ↑ VSCodeのScreencastを有効にするとキー入力を表示できる

Slide 17

Slide 17 text

Vim拡張を入れたことへの弊害 • 普段の作業を自分のVSCodeでやっているので人のVSCodeを使う時に手癖でVimのキー操作をやってしまうｗ • 入れている拡張機能によってはフッターのVimの入力モードがわかりにくくなることがある • 編集前の状態に戻してもそのステータスがわかりにくくなる

Slide 18

Slide 18 text

まとめ • 元VimmerがVSCodeに拡張をいれることで両方のいいとこ取りをしたエディタ環境を構築した • キー操作が効率よくなったが、他のエディタを触ると手癖がつくので要注意 • VSCodeのScreencastは結構便利