Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VSVimの間合いですよ
Search
anozon
November 22, 2021
Programming
0
100
VSVimの間合いですよ
VSCode Vim の縦移動を強化する VSCode 拡張を開発した話
anozon
November 22, 2021
Tweet
Share
More Decks by anozon
See All by anozon
PWAを活用している_ガジェットアプリの話.pdf
anozon
0
21
埼玉県の描き方.pdf
anozon
0
33
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
400
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
AIともっと楽するE2Eテスト
myohei
7
2.7k
XP, Testing and ninja testing
m_seki
3
250
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
型で語るカタ
irof
0
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Applications with DynamoDB
mza
95
6.5k
The Invisible Side of Design
smashingmag
301
51k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Practical Orchestrator
shlominoach
189
11k
Optimizing for Happiness
mojombo
379
70k
Documentation Writing (for coders)
carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
Done Done
chrislema
184
16k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
VSVimの間合いですよ vscode-maai-cursor あのぞん (@anozon,(/elzup))
About me あのぞん (@anozon) elzup · GitHub 株式会社プランクユニッツ PlanckUnits VSCode(5年)
Vim(8年) React,TypeScript .vimrc 1300行
今回の話 VSCode 拡張開発に入門して コーディングを快適にした VSVimの間合いですよ • Vim の間合いはすごい ◦ 5Jump
Keymap の提唱 • VSCode 拡張作ってみた! ◦ 5Jump Keymap の強化
Vim の間合いはすごい
Vim とは Vim の間合いはすごい • Vimとは ◦ テキストエディタ ◦ モードを切り替えながらテキストを編集する
◦ ↑↓←→ が jklm • VSCode の Vim 拡張もある ◦ VSCodeVim ◦ vscode-neovim
Vim は高速で任意の場所へ移動できる 水平移動 Vim の間合いはすごい
垂直移動 Vim の間合いはすごい
弱点はどこでしょう? Vim の間合いはすごい
Vimの弱点はここです Vim の間合いはすごい
前後5行目あたりへ高速移動したい → 5Jump keybind を提唱します Vim の間合いはすごい 5Jump keybind とは
“5行上へ移動をショートカットキーに登録すること” nnoremap <C-j> 5j nnoremap <C-k> 5k vnoremap <C-j> 5j vnoremap <C-k> 5k
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
5Jump keybind の問題点 Vim の間合いはすごい どこに移動するかが大まかにしかわからない - 行数は数えたくない - 飛んでから考えたくない
→ 目印が欲しい
VSCode 拡張作ってみた!
成果物 GitHub elzup/vscode-maai-cursor MarketPlace anozon.maai-cursor VSCode 拡張作ってみた!
None
簡単な作成の流れ VSCode 拡張作ってみた! 1. npx yo code (with-typescript) 2. コーディング
3. npx vsce package 4. (マーケットプレイスアカウント作成) 5. npx vsce publish
初めて触った学び VSCode 拡張作ってみた! • package.json で Config を定義する ◦ マーケットプレイスMETA情報だけでなく
◦ 定義する Config Param や Command ◦ 使う activationEvents のタイプなど • Range ◦ x,y は line, charactor • yo code で全部定義されてて快適 ◦ debug, publish
このプラグインにおける要点 VSCode 拡張作ってみた! vscode.window.onDidChangeTextEditorSelection でカーソル移動イベントを取る activeEditor.selection.anchor でカーソル位置を取る → Decorator 当てたい位置を計算して装飾
50行程度の簡単なロジック
開発で参考にした部分 VSCode 拡張作ってみた! 同じ Decorator タイプの普段お世話になってる plugin • Indent Rainbow
• Bracket Colorlizer microsoft/vscode-extension-samplesに サンプルパターンが豊富 • Decorator 2桁の数字と3桁以上の数字の Style を変える (わかりやすい)
オプションの追加 VSCode 拡張作ってみた! • その行の文字全部にハイライトするモード • 5行区切りで全部ハイライトするモード • 5行以外の指定
躓いた点 VSCode 拡張作ってみた! - package.json の "activationEvents" のイベン トの設定が必要 -
マーケットプレイス・デプロイ権限設定
(初心者の)疑問点 VSCode 拡張作ってみた! elzup/vscode-maai-cursor/issues
感想・まとめ VSCode 拡張作ってみた! • Electron の開発に入門したときに感覚似てた • Type が効いて良い (import
"vscode") • `yo code` で Release まで楽だった • アドバイス改善点レビュー嬉しいです ◦ github.com/elzup/vscode-maai-cursor