Vim Motions in Visual Studio Code
Datum: April 2025
Lesedauer: 7 Minuten
Vim
Vim ist ein konfigurierbarer Texteditor. Anstatt auf Maus und MenĂŒs zu setzen, arbeitet er mit Tastenkombinationen und Kommandos. Wer ihn beherrscht, bewegt sich mit beeindruckender Effizienz durch den Code.
Vim Motions
Die sogenannten Motions sind ein zentraler Grund fĂŒr die Effizienz, die Vim auszeichnet. Sie ermöglichen schnelle, prĂ€zise Aktionen â und tragen damit nicht nur zur Geschwindigkeit, sondern auch zu einem spĂŒrbar besseren Flow beim Arbeiten bei. Letzteres ist vielen Entwickler:innen sogar wichtiger als reine Schnelligkeit.
Kein Umgreifen zur Maus, kein Suchen nach MenĂŒs â man bleibt gedanklich ganz bei der Aufgabe. Die Finger verlassen kaum die Grundstellung auf der Tastatur. Das minimiert Kontextwechsel, reduziert unnötige Bewegungen, schont die Handgelenke und fördert einen durchgĂ€ngigen Arbeitsrhythmus.
Doch dieser Effizienzgewinn hat seinen Preis: Die Lernkurve ist steil. Wer ernsthaft einsteigen will, muss bereit sein, Zeit in das Erlernen der Konzepte und die Konfiguration der Umgebung zu investieren. Beherrscht man die Motions aber erst einmal, verschmilzt Navigation mit Denken â und Editieren wird zu einer fast nahtlosen, intuitiven TĂ€tigkeit.
VS Code Integration
Vim und Neovim mögen auf den ersten Blick wie Nischenlösungen wirken, sind aber unter Entwicklern hoch angesehen. Im Stack Overflow Developer Survey 2024 (opens in a new tab) belegt Vim Platz 4 und Neovim Platz 6 unter den meistgenutzten Entwicklungsumgebungen. Mit 83âŻ% Bewunderung ist Neovim der am höchsten bewertete Editor.
Gleichzeitig nutzen rund 59âŻ% der Entwickler Visual Studio Code als eine ihrer Haupt-IDEs â mit deutlichem Vorsprung vor IntelliJ IDEA auf Platz 2.
Um vom Vim-Konzept zu profitieren, muss man nicht komplett auf Vim, Neovim oder Emacs umsteigen. Mit der Extension VSCodeVim lassen sich die Vim-Motions direkt in Visual Studio Code integrieren. So bleibt der Komfort einer modernen IDE erhalten â wĂ€hrend gleichzeitig die effiziente, tastaturbasierte Bedienung von Vim genutzt wird.
Basics
Vim funktioniert grundlegend anders als klassische Editoren. Statt durchgÀngig in einem Textbearbeitungsmodus zu arbeiten, nutzt Vim verschiedene Modi, die jeweils auf bestimmte Aufgaben ausgelegt sind:
Modus | Zweck | Verhalten | Einstieg | Ausstieg |
---|---|---|---|---|
Normal | Navigation & Befehle | Text wird nicht direkt bearbeitet | Startmodus | Siehe Einstieg anderer Modi |
Insert | Text eingeben | Eingaben erscheinen im Dokument | i , a , o | Esc |
Visual | Text markieren | Auswahl blockweise sichtbar | v , V , Ctrl+v | Esc |
Command | Editor-Befehle ausfĂŒhren | Befehlszeile unten im Editor | : | Enter , Esc |
Die meisten Aktionen in Vim folgen einem einfachen Muster:
[Operator][Count][Motion]
Beispiele:
d2w
â löscht zwei Wörter (delete + count + motion)y$
â kopiert bis zum Zeilenende (yank + motion)c3j
â ersetzt den Inhalt der nĂ€chsten drei Zeilen (change + motion)
DarĂŒber hinaus erlaubt Vim Befehle, die sich auf bestimmte Strukturen im Text beziehen â etwa AnfĂŒhrungszeichen, Klammern oder HTML-Tags:
da"
â löscht AnfĂŒhrungszeichen inklusive Inhalt (delete around quotes)yy
â kopiert die aktuelle Zeile (yank line)cit
â ersetzt den Inhalt innerhalb eines HTML-Tags (change inside tag)
Zur Navigation verwendet Vim die Tasten h
, j
, k
, l
, anstelle der Pfeiltasten:
j
â nach untenk
â nach obenh
â nach linksl
â nach rechts
Mit nur wenigen Kommandos lassen sich so bereits mĂ€chtige, kombinierbare Operationen ausfĂŒhren â ohne die HĂ€nde je von der Tastatur zu nehmen.
CheatSheet
Die folgende Ăbersicht zeigt viele der Möglichkeiten auf:
Quelle: https://thingsfittogether.com (opens in a new tab)
EasyMotion
Trotz aller Effizienz kann die Navigation in lĂ€ngeren Dateien mit Vim manchmal mĂŒhsam werden. Zwar kann man zu bestimmten Zeichen springen â allerdings nur innerhalb der aktuellen Zeile. Kommt das Zeichen mehrfach vor, ist der Treffer nicht immer direkt erreichbar.
Das Plugin EasyMotion löst dieses Problem: Es markiert alle möglichen Sprungziele visuell im Editor. Mit nur wenigen Tasten landet man direkt an der gewĂŒnschten Position.
Konfiguration
Die folgenden Ausschnitte zeigen meine persönlichen Einstellungen.
Sie spiegeln meine individuellen PrĂ€ferenzen wider und sind nicht als allgemeingĂŒltige Empfehlung, sondern als Inspiration zu verstehen.
Settings
In den Haupteinstellungen werden die Keybindings festgelegt â welche Tastenkombinationen welche Aktionen auslösen. Dies kann fĂŒr jeden Modus separat erfolgen.
Nicht-rekursive Zuweisungen verhindert die Entstehung von Endlosschleifen.
{
// insert mode
"vim.insertModeKeyBindingsNonRecursive": [
// additional way to exit
{
"before": ["j", "j"],
"after": ["<esc>"],
"commands": ["workbench.action.files.save"]
},
// save on exit
{
"before": ["<esc>"],
"after": ["<esc>"],
"commands": ["workbench.action.files.save"]
}
],
// normal mode
"vim.normalModeKeyBindings": [
// vertical block jumping
{
"before": ["shift+j"],
"after": ["}"]
},
{
"before": ["shift+k"],
"after": ["{"]
},
// easymotion end of word down and up
{
"before": ["space", "j"],
"after": ["leader", "leader", "e"]
},
{
"before": ["space", "k"],
"after": ["leader", "leader", "g", "e"]
}
]
}
Beim leader
handelt es sich um eine benutzerdefinierte Taste, die als PrĂ€fix fĂŒr Tastenkombinationen dient.
Profile
In den Einstellungen des Profils lÀsst sich sowohl das Verhalten als auch das Erscheinungsbild anpassen.
Besonders empfehlenswert sind die mit "editor.lineNumbers": "relative"
aktivierten relativen Zeilennummern, welche schnelle SprĂŒnge im Code ermöglichen.
{
// visual
"editor.lineNumbers": "relative",
"vim.statusBarColorControl": true,
"vim.statusBarColors.normal": ["#181818", "#fff"], // bg, text
"vim.statusBarColors.insert": ["#000", "#808080"],
"vim.statusBarColors.visual": ["#bbb2a2", "#282624"],
"vim.statusBarColors.visualline": ["#ede2cf", "#282624"],
"vim.statusBarColors.visualblock": ["#ede2cf", "#282624"],
"vim.hlsearch": true, // highlight all text matching current search
"vim.highlightedyank.enable": true,
"vim.highlightedyank.color": "rgba(0, 0, 0, 0.5)",
// copying/yanking
"vim.useSystemClipboard": true, // system clipboard register (*) as default
"vim.overrideCopy": false, // stays in current mode after copying
// usabilty
"vim.mouseSelectionGoesIntoVisualMode": false, // enables use of mouse in insert mode
// easymotion
"vim.easymotion": true,
"vim.easymotionMarkerForegroundColorOneChar": "#eeff00",
"vim.easymotionMarkerForegroundColorTwoCharFirst": "#eeff00",
"vim.easymotionMarkerForegroundColorTwoCharSecond": "#eeff00",
// performance
"extensions.experimental.affinity": { "vscodevim.vim": 1 }
}
Keybindings
Ich kann nur empfehlen, sich mit den verfĂŒgbaren Shortcuts vertraut zu machen und diese nach Bedarf anzupassen. FĂŒr viele Funktionen gibt es bereits vordefinierte TastenkĂŒrzel, die jedoch manchmal mehr Bewegung erfordern und den Griff zur Maus notwendig machen. Durch eigene Anpassungen kann man diese AbhĂ€ngigkeit weiter reduzieren und nĂ€her an der Homerow bleiben.
Um die Steuerung konsistent zu gestalten, verwende ich hĂ€ufig die gleichen Tasten wie bei den Motions â z. B. h
und l
fĂŒr links und rechts.
[
// tab navigation
{
"key": "cmd+h",
"command": "workbench.action.previousEditor"
},
{
"key": "cmd+l",
"command": "workbench.action.nextEditor"
},
// split editor
{
"key": "cmd+7",
"command": "workbench.action.splitEditor"
},
// toggle between editor and explorer
{
"key": "cmd+m",
"command": "workbench.action.focusFirstEditorGroup"
},
{
"key": "cmd+m",
"when": "editorFocus",
"command": "workbench.explorer.fileView.focus"
},
// filesystem
{
"key": "n",
"command": "explorer.newFile",
"when": "filesExplorerFocus && !inputFocus"
},
{
"key": "r",
"command": "renameFile",
"when": "filesExplorerFocus && !inputFocus"
},
{
"key": "shift+n",
"when": "explorerViewletFocus",
"command": "explorer.newFolder"
},
{
"key": "d",
"when": "filesExplorerFocus && !inputFocus",
"command": "deleteFile"
},
// VS Code/Vim multiline fix
{
"key": "cmd+alt+up",
"command": "-extension.vim_cmd+alt+up",
"when": "editorTextFocus && vim.active && !inDebugRepl"
},
{
"key": "cmd+alt+down",
"command": "-extension.vim_cmd+alt+down",
"when": "editorTextFocus && vim.active && !inDebugRepl"
}
]
FĂŒr eine reibungslose Bedienung empfehle ich, sich bewusst zu entscheiden, welche Funktionen von Vim und welche von VS Code man nutzen möchte, um die beiden nicht unnötig zu mischen.
Ich schĂ€tze bestimmte Features von VS Code, wie die erweiterte Suchfunktion und das Multiline-Editing (z. B. â â§ L
), die mir eine schnellere und angenehmere Benutzererfahrung bieten, als sie in Vim möglich wĂ€re. Auch das Ăffnen, Speichern und Schliessen von Dateien erledige ich bevorzugt mit den eingebauten VS Code-Shortcuts, da sie mir bereits vertraut sind. Den Command Mode von Vim nutze ich daher nur selten. Aus diesem Grund habe ich auch eine Einstellungen vorgenommen, um das Multiline-Editing zu erhalten.
System
Die Caps-Lock-Taste habe ich auf Escape gemappt, um aus allen Modi wieder schneller und angenehmer in den Normal Mode wechseln zu können.
Mehr
Weitere Einstellungsmöglichkeiten der VSCodeVim Extension sind im entsprechenden Readme aufgelistet:
https://github.com/VSCodeVim/Vim (opens in a new tab)
Lernressourcen
Das Erlernen der Motions erfordert Geduld. Man muss die Motions lesen, ĂŒben und selbst anwenden. Mir haben zwei Ressourcen besonders geholfen:
Ressource | Link | Beschreibung |
---|---|---|
Learn Vim Extension | https://marketplace.visualstudio.com/items?itemName=vintharas.learn-vim (opens in a new tab) | VS Code-Erweiterung mit strukturierten Lektionen, die alle wichtigen Grundlagen mit verstÀndlichen ErklÀrungen und guten Beispielen abdecken. |
Vim Hero | https://www.vim-hero.com (opens in a new tab) | PrĂ€gnante ErklĂ€rungen und spielerischer Ăbungen â ideal zur Verbesserung von Geschwindigkeit und PrĂ€zision. |
Persönliche Erfahrung
Nach rund einem Monat mit VSCodeVim blicke ich auf verschiedene Phasen zurĂŒck.
1 - Aha-Moment
Die ersten Stunden waren beeindruckend - Kontrolle ĂŒber den Cursor, ohne Maus. Mir wurde klar, welches Potenzial in den Motions steckt. Es gab viel zu lernen.
2 - settings.json
VSCodeVim funktioniert zwar direkt nach der Installation. Rund wird das Erlebnis aber erst mit gezielten Einstellungen. Nach den ersten Basics habe ich viel Zeit in die Konfiguration investiert, um die Umgebung meiner Arbeitsweise anzupassen.
3 - Frontend?
Als Frontend-Entwickler hatte ich zwischenzeitlich Zweifel, ob Vim wirklich das richtige Werkzeug ist. Der hĂ€ufige Wechsel in den Browser, das Untersuchen von Elementen und das Scrollen fĂŒhrt einen oft zurĂŒck zum Trackpad.
4 - Keyboard
Mittlerweile nutze ich das Trackpad deutlich seltener. Mit AeroSpace (opens in a new tab) als Window-Manager und konsequenten Shortcuts navigiere ich effizient durch meine Umgebungen.
Ganz verzichten will ich jedoch noch nicht auf das Trackpad. Beim Scrollen oder schnellen Navigieren im Insert Mode bleibt es praktischer. Gerade als Frontend-Entwickler, der hĂ€ufig zwischen Editor und Browser wechselt, ist dieser Mix fĂŒr mich derzeit am besten.
Noch lÀuft nicht alles glatt, aber ich arbeite effizienter, weil ich mich mit meinem Setup auseinandergesetzt habe und es gezielt nutze.
Fazit
Ich werde die Motions definitiv weiter nutzen. Sie machen das Editieren nicht nur effizienter, sondern auch angenehmer. Ob sie langfristig mein primÀres Interface bleiben, wird sich zeigen. Doch der Weg dorthin ist spannend, und die Fortschritte wirken motivierend.