VSVimの間合いですよ

VSCode Vim の縦移動を強化する VSCode 拡張を開発した話

Transcript

1. VSVimの間合いですよ vscode-maai-cursor あのぞん (@anozon,(/elzup))
2. About me あのぞん (@anozon) elzup · GitHub 株式会社プランクユニッツ PlanckUnits VSCode(5年) Vim(8年) React,TypeScript .vimrc 1300行
3. 今回の話 VSCode 拡張開発に入門して コーディングを快適にした VSVimの間合いですよ • Vim の間合いはすごい ◦ 5Jump Keymap の提唱 • VSCode 拡張作ってみた！ ◦ 5Jump Keymap の強化
4. Vim の間合いはすごい
5. Vim とは Vim の間合いはすごい • Vimとは ◦ テキストエディタ ◦ モードを切り替えながらテキストを編集する ◦ ↑↓←→ が jklm • VSCode の Vim 拡張もある ◦ VSCodeVim ◦ vscode-neovim
6. Vim は高速で任意の場所へ移動できる 水平移動 Vim の間合いはすごい
7. 垂直移動 Vim の間合いはすごい
8. 弱点はどこでしょう？ Vim の間合いはすごい
9. Vimの弱点はここです Vim の間合いはすごい
10. 前後5行目あたりへ高速移動したい → 5Jump keybind を提唱します Vim の間合いはすごい 5Jump keybind とは “5行上へ移動をショートカットキーに登録すること” nnoremap <C-j> 5j nnoremap <C-k> 5k vnoremap <C-j> 5j vnoremap <C-k> 5k
11. 5Jump keybind により 　前後7行へ3ストローク以下で移動できる Vim の間合いはすごい -7 `<C-k>` kk -6 `<C-k>` k -5 `<C-k>` -4 `<C-k>` j -3 kkk -2 kk -1 k 0 `<curren>` +1 j +2 jj +3 jjj +4 `<C-j>` k +5 `<C-j>` +6 `<C-j>` j +7 `<C-j>` jj
12. 5Jump keybind の問題点 Vim の間合いはすごい どこに移動するかが大まかにしかわからない - 行数は数えたくない - 飛んでから考えたくない → 目印が欲しい
13. VSCode 拡張作ってみた！
14. 成果物 GitHub elzup/vscode-maai-cursor MarketPlace anozon.maai-cursor VSCode 拡張作ってみた！
16. 簡単な作成の流れ VSCode 拡張作ってみた！ 1. npx yo code (with-typescript) 2. コーディング 3. npx vsce package 4. (マーケットプレイスアカウント作成) 5. npx vsce publish
17. 初めて触った学び VSCode 拡張作ってみた！ • package.json で Config を定義する ◦ マーケットプレイスMETA情報だけでなく ◦ 定義する Config Param や Command ◦ 使う activationEvents のタイプなど • Range ◦ x,y は line, charactor • yo code で全部定義されてて快適 ◦ debug, publish
18. このプラグインにおける要点 VSCode 拡張作ってみた！ vscode.window.onDidChangeTextEditorSelection 　でカーソル移動イベントを取る activeEditor.selection.anchor 　でカーソル位置を取る → Decorator 当てたい位置を計算して装飾 50行程度の簡単なロジック
19. 開発で参考にした部分 VSCode 拡張作ってみた！ 同じ Decorator タイプの普段お世話になってる plugin • Indent Rainbow • Bracket Colorlizer microsoft/vscode-extension-samplesに サンプルパターンが豊富 • Decorator 2桁の数字と3桁以上の数字の Style を変える (わかりやすい)
20. オプションの追加 VSCode 拡張作ってみた！ • その行の文字全部にハイライトするモード • 5行区切りで全部ハイライトするモード • 5行以外の指定
21. 躓いた点 VSCode 拡張作ってみた！ - package.json の "activationEvents" のイベン トの設定が必要 - マーケットプレイス・デプロイ権限設定
22. (初心者の)疑問点 VSCode 拡張作ってみた！ 　 elzup/vscode-maai-cursor/issues
23. 感想・まとめ VSCode 拡張作ってみた！ • Electron の開発に入門したときに感覚似てた • Type が効いて良い (import "vscode") • `yo code` で Release まで楽だった • アドバイス改善点レビュー嬉しいです ◦ github.com/elzup/vscode-maai-cursor