Skip to content

Instantly share code, notes, and snippets.

@timmaffett

timmaffett/index.html

Last active April 5, 2022 15:22
Show Gist options
  • Save timmaffett/ed2b5ebfba33a4d7710a4c0772e099d0 to your computer and use it in GitHub Desktop.
Save timmaffett/ed2b5ebfba33a4d7710a4c0772e099d0 to your computer and use it in GitHub Desktop.
Download ZIP
Vim Cheat Sheet
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vim Cheat Sheet</title>
<link rel="stylesheet" href="styles.css">
<script type="application/dart" src="main.dart"></script>
</head>
<body>
<div class="container">
<div class="grid-block">
<div class="grid-1">
<h1>
<a class="site-title" href="https://vim.rtorr.com/">
Vim Cheat Sheet
</a>
</h1>
<h6 id="darthi"></h6>
</div>
</div>
<main><div class="container">
<div class="commands-container">
<div class="grid-block">
<div class="grid-lg-1-3">
<h2>Cursor movement</h2>
<ul>
<li>
<kbd>h</kbd> - move cursor left (or ⇦)
</li>
<li>
<kbd>j</kbd> - move cursor down (or ⇩)
</li>
<li>
<kbd>k</kbd> - move cursor up (or ⇧)
</li>
<li>
<kbd>l</kbd> - move cursor right (or ⇨)
</li>
<li>
<kbd>gj</kbd> - move cursor down (multi-line text)
</li>
<li>
<kbd>gk</kbd> - move cursor up (multi-line text)
</li>
<li>
<kbd>H</kbd> - move to top of screen
</li>
<li>
<kbd>M</kbd> - move to middle of screen
</li>
<li>
<kbd>L</kbd> - move to bottom of screen
</li>
<li>
<kbd>w</kbd> - jump forwards to the start of a word
</li>
<li>
<kbd>W</kbd> - jump forwards to the start of a word (words can contain punctuation)
</li>
<li>
<kbd>e</kbd> - jump forwards to the end of a word
</li>
<li>
<kbd>E</kbd> - jump forwards to the end of a word (words can contain punctuation)
</li>
<li>
<kbd>b</kbd> - jump backwards to the start of a word
</li>
<li>
<kbd>B</kbd> - jump backwards to the start of a word (words can contain punctuation)
</li>
<li>
<kbd>ge</kbd> - jump backwards to the end of a word
</li>
<li>
<kbd>gE</kbd> - jump backwards to the end of a word (words can contain punctuation)
</li>
<li>
<kbd>%</kbd> - move to matching character (default supported pairs: '()', '{}', '[]' - use <code>:h matchpairs</code> in vim for more info)
</li>
<li>
<kbd>0</kbd> - jump to the start of the line
</li>
<li>
<kbd>^</kbd> - jump to the first non-blank character of the line
</li>
<li>
<kbd>$</kbd> - jump to the end of the line
</li>
<li>
<kbd>g_</kbd> - jump to the last non-blank character of the line
</li>
<li>
<kbd>gg</kbd> - go to the first line of the document
</li>
<li>
<kbd>G</kbd> - go to the last line of the document
</li>
<li>
<kbd>5gg</kbd> or <kbd>5G</kbd> - go to line 5
</li>
<li>
<kbd>gd</kbd> - move to local declaration
</li>
<li>
<kbd>gD</kbd> - move to global declaration
</li>
<li>
<kbd>fx</kbd> - jump to next occurrence of character x
</li>
<li>
<kbd>tx</kbd> - jump to before next occurrence of character x
</li>
<li>
<kbd>Fx</kbd> - jump to the previous occurrence of character x
</li>
<li>
<kbd>Tx</kbd> - jump to after previous occurrence of character x
</li>
<li>
<kbd>;</kbd> - repeat previous f, t, F or T movement
</li>
<li>
<kbd>,</kbd> - repeat previous f, t, F or T movement, backwards
</li>
<li>
<kbd>}</kbd> - jump to next paragraph (or function/block, when editing code)
</li>
<li>
<kbd>{</kbd> - jump to previous paragraph (or function/block, when editing code)
</li>
<li>
<kbd>zz</kbd> - center cursor on screen
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>e</kbd> - move screen down one line (without moving cursor)
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>y</kbd> - move screen up one line (without moving cursor)
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>b</kbd> - move back one full screen
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>f</kbd> - move forward one full screen
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>d</kbd> - move forward 1/2 a screen
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>u</kbd> - move back 1/2 a screen
</li>
</ul>
<div class="well">
<strong>Tip</strong>
Prefix a cursor movement command with a number to repeat it. For example, <kbd>4j</kbd> moves down 4 lines.
</div>
<h2>Insert mode - inserting/appending text</h2>
<ul>
<li>
<kbd>i</kbd> - insert before the cursor
</li>
<li>
<kbd>I</kbd> - insert at the beginning of the line
</li>
<li>
<kbd>a</kbd> - insert (append) after the cursor
</li>
<li>
<kbd>A</kbd> - insert (append) at the end of the line
</li>
<li>
<kbd>o</kbd> - append (open) a new line below the current line
</li>
<li>
<kbd>O</kbd> - append (open) a new line above the current line
</li>
<li>
<kbd>ea</kbd> - insert (append) at the end of the word
</li>
<li>
<kbd>Esc</kbd> - exit insert mode
</li>
</ul>
</div>
<div class="grid-lg-1-3">
<h2>Editing</h2>
<ul>
<li>
<kbd>r</kbd> - replace a single character.
</li>
<li>
<kbd>R</kbd> - replace more than one character, until <kbd>ESC</kbd> is pressed.
</li>
<li>
<kbd>J</kbd> - join line below to the current one with one space in between
</li>
<li>
<kbd>gJ</kbd> - join line below to the current one without space in between
</li>
<li>
<kbd>gwip</kbd> - reflow paragraph
</li>
<li>
<kbd>g~</kbd> - switch case up to motion
</li>
<li>
<kbd>gu</kbd> - change to lowercase up to motion
</li>
<li>
<kbd>gU</kbd> - change to uppercase up to motion
</li>
<li>
<kbd>cc</kbd> - change (replace) entire line
</li>
<li>
<kbd>C</kbd> - change (replace) to the end of the line
</li>
<li>
<kbd>c$</kbd> - change (replace) to the end of the line
</li>
<li>
<kbd>ciw</kbd> - change (replace) entire word
</li>
<li>
<kbd>cw</kbd> or <kbd>ce</kbd> - change (replace) to the end of the word
</li>
<li>
<kbd>s</kbd> - delete character and substitute text
</li>
<li>
<kbd>S</kbd> - delete line and substitute text (same as cc)
</li>
<li>
<kbd>xp</kbd> - transpose two letters (delete and paste)
</li>
<li>
<kbd>u</kbd> - undo
</li>
<li>
<kbd>U</kbd> - restore (undo) last changed line
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>r</kbd> - redo
</li>
<li>
<kbd>.</kbd> - repeat last command
</li>
</ul>
<h2>Marking text (visual mode)</h2>
<ul>
<li>
<kbd>v</kbd> - start visual mode, mark lines, then do a command (like y-yank)
</li>
<li>
<kbd>V</kbd> - start linewise visual mode
</li>
<li>
<kbd>o</kbd> - move to other end of marked area
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>v</kbd> - start visual block mode
</li>
<li>
<kbd>O</kbd> - move to other corner of block
</li>
<li>
<kbd>aw</kbd> - mark a word
</li>
<li>
<kbd>ab</kbd> - a block with ()
</li>
<li>
<kbd>aB</kbd> - a block with {}
</li>
<li>
<kbd>at</kbd> - a block with &lt;&gt; tags
</li>
<li>
<kbd>ib</kbd> - inner block with ()
</li>
<li>
<kbd>iB</kbd> - inner block with {}
</li>
<li>
<kbd>it</kbd> - inner block with &lt;&gt; tags
</li>
<li>
<kbd>Esc</kbd> - exit visual mode
</li>
</ul>
<div class="well">
<strong>Tip</strong> Instead of <kbd>b</kbd> or <kbd>B</kbd> one can also use <kbd>(</kbd> or <kbd>{</kbd> respectively.
</div>
<h2>Visual commands</h2>
<ul>
<li>
<kbd>&gt;</kbd> - shift text right
</li>
<li>
<kbd>&lt;</kbd> - shift text left
</li>
<li>
<kbd>y</kbd> - yank (copy) marked text
</li>
<li>
<kbd>d</kbd> - delete marked text
</li>
<li>
<kbd>~</kbd> - switch case
</li>
<li>
<kbd>u</kbd> - change marked text to lowercase
</li>
<li>
<kbd>U</kbd> - change marked text to uppercase
</li>
</ul>
<h2>Registers</h2>
<ul>
<li>
<kbd>:reg[isters]</kbd> - show registers content
</li>
<li>
<kbd>"xy</kbd> - yank into register x
</li>
<li>
<kbd>"xp</kbd> - paste contents of register x
</li>
<li>
<kbd>"+y</kbd> - yank into the system clipboard register
</li>
<li>
<kbd>"+p</kbd> - paste from the system clipboard register
</li>
</ul>
<div class="well">
<strong>Tip</strong> Special registers:
<p>
 <kbd>0</kbd> - last yank<br>
 <kbd>"</kbd> - unnamed register, last delete or yank<br>
 <kbd>%</kbd> - current file name<br>
 <kbd>#</kbd> - alternate file name<br>
 <kbd>*</kbd> - clipboard contents (X11 primary)<br>
 <kbd>+</kbd> - clipboard contents (X11 clipboard)<br>
 <kbd>/</kbd> - last search pattern<br>
 <kbd>:</kbd> - last command-line<br>
 <kbd>.</kbd> - last inserted text<br>
 <kbd>-</kbd> - last small (less than a line) delete<br>
 <kbd>=</kbd> - expression register<br>
 <kbd>_</kbd> - black hole register<br>
</p>
</div>
<h2>Marks and positions</h2>
<ul>
<li>
<kbd>:marks</kbd> - list of marks
</li>
<li>
<kbd>ma</kbd> - set current position for mark A
</li>
<li>
<kbd>`a</kbd> - jump to position of mark A
</li>
<li>
<kbd>y`a</kbd> - yank text to position of mark A
</li>
<li>
<kbd>`0</kbd> - go to the position where Vim was previously exited
</li>
<li>
<kbd>`"</kbd> - go to the position when last editing this file
</li>
<li>
<kbd>`.</kbd> - go to the position of the last change in this file
</li>
<li>
<kbd>``</kbd> - go to the position before the last jump
</li>
<li>
<kbd>:ju[mps]</kbd> - list of jumps
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>i</kbd> - go to newer position in jump list
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>o</kbd> - go to older position in jump list
</li>
<li>
<kbd>:changes</kbd> - list of changes
</li>
<li>
<kbd>g,</kbd> - go to newer position in change list
</li>
<li>
<kbd>g;</kbd> - go to older position in change list
</li>
<li>
<kbd>Ctrl</kbd> + <kbd>]</kbd> - jump to the tag under cursor
</li>
</ul>
<div class="well">
<strong>Tip</strong> To jump to a mark you can either use a backtick (<kbd>`</kbd>) or an apostrophe (<kbd>'</kbd>). Using an apostrophe jumps to the beginning (first non-blank) of the line holding the mark.
</div>
</div>
<div class="grid-lg-1-3">
<h2>Macros</h2>
<ul>
<li>
<kbd>qa</kbd> - record macro a
</li>
<li>
<kbd>q</kbd> - stop recording macro
</li>
<li>
<kbd>@a</kbd> - run macro a
</li>
<li>
<kbd>@@</kbd> - rerun last run macro
</li>
</ul>
<h2>Cut and paste</h2>
<ul>
<li>
<kbd>yy</kbd> - yank (copy) a line
</li>
<li>
<kbd>2yy</kbd> - yank (copy) 2 lines
</li>
<li>
<kbd>yw</kbd> - yank (copy) the characters of the word from the cursor position to the start of the next word
</li>
<li>
<kbd>yiw</kbd> - yank (copy) word under the cursor
</li>
<li>
<kbd>yaw</kbd> - yank (copy) word under the cursor and the space after or before it
</li>
<li>
<kbd>y$</kbd> - yank (copy) to end of line
</li>
<li>
<kbd>p</kbd> - put (paste) the clipboard after cursor
</li>
<li>
<kbd>P</kbd> - put (paste) before cursor
</li>
<li>
<kbd>gp</kbd> - put (paste) the clipboard after cursor and leave cursor after the new text
</li>
<li>
<kbd>gP</kbd> - put (paste) before cursor and leave cursor after the new text
</li>
<li>
<kbd>dd</kbd> - delete (cut) a line
</li>
<li>
<kbd>2dd</kbd> - delete (cut) 2 lines
</li>
<li>
<kbd>dw</kbd> - delete (cut) the characters of the word from the cursor position to the start of the next word
</li>
<li>
<kbd>diw</kbd> - delete (cut) word under the cursor
</li>
<li>
<kbd>daw</kbd> - delete (cut) word under the cursor and the space after or before it
</li>
<li>
<kbd>D</kbd> - delete (cut) to the end of the line
</li>
<li>
<kbd>d$</kbd> - delete (cut) to the end of the line
</li>
<li>
<kbd>x</kbd> - delete (cut) character
</li>
</ul>
<h2>Indent text</h2>
<ul>
<li>
<kbd>&gt;&gt;</kbd> - indent (move right) line one shiftwidth
</li>
<li>
<kbd>&lt;&lt;</kbd> - de-indent (move left) line one shiftwidth
</li>
<li>
<kbd>&gt;%</kbd> - indent a block with () or {} (cursor on brace)
</li>
<li>
<kbd>&gt;ib</kbd> - indent inner block with ()
</li>
<li>
<kbd>&gt;at</kbd> - indent a block with &lt;&gt; tags
</li>
<li>
<kbd>3==</kbd> - re-indent 3 lines
</li>
<li>
<kbd>=%</kbd> - re-indent a block with () or {} (cursor on brace)
</li>
<li>
<kbd>=iB</kbd> - re-indent inner block with {}
</li>
<li>
<kbd>gg=G</kbd> - re-indent entire buffer
</li>
<li>
<kbd>]p</kbd> - paste and adjust indent to current line
</li>
</ul>
<h2>Search and replace</h2>
<ul>
<li>
<kbd>/pattern</kbd> - search for pattern
</li>
<li>
<kbd>?pattern</kbd> - search backward for pattern
</li>
<li>
<kbd>\vpattern</kbd> - 'very magic' pattern: non-alphanumeric characters are interpreted as special regex symbols (no escaping needed)
</li>
<li>
<kbd>n</kbd> - repeat search in same direction
</li>
<li>
<kbd>N</kbd> - repeat search in opposite direction
</li>
<li>
<kbd>:%s/old/new/g</kbd> -
replace all old with new throughout file
</li>
<li>
<kbd>:%s/old/new/gc</kbd> -
replace all old with new throughout file with confirmations
</li>
<li>
<kbd>:noh[lsearch]</kbd> - remove highlighting of search matches
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<div class="grid-block link-to-repo">
<p>
Checkout the source on
<a href="https://github.com/rtorr/vim-cheat-sheet" target="_blank" rel="noopener noreferrer">
Github
</a>
</p>
<p>version: 3.1.1</p>
</div>
</body>
</html>
Raw
main.dart
import 'dart:html';
import 'dart:async';
/*
Here is an example to play with within the DartPad with vim emulation keymap support.
Use the keyboard button to toggle the vim keymap on and off.
Use i to get to insert mode, Escape to exit insert mode
I have tested most the commands in the cheat sheet on
the right and they work in this dartpad vim. Let me know if
you find one that doesn't!
*/
void main() {
final header = querySelector('#darthi');
header?.text = "Hi From the Dart Code!";
int totalNags=0;
const oneSec = Duration(seconds:3);
Timer.periodic(oneSec, (Timer t) {
header?.text = (header.text??'') + ' try it!';
if( ++totalNags>20 ) {
t.cancel();
}
});
for (int i = 0; i < 10; i++) {
print('print sometime to the console');
}
}
Raw
styles.css
/*Layout*/
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&family=VT323&family=Work+Sans:wght@400;600&display=swap');
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid-block {
clear: both;
letter-spacing: -0.31em;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
overflow: hidden;
text-rendering: optimizespeed;
width: 100%;
}
.grid-block,
.grid-1,
.grid-lg-1-2,
.grid-lg-1-3 {
display: inline-block;
float: left;
letter-spacing: normal;
padding: 0px 10px;
vertical-align: top;
word-spacing: normal;
text-rendering: auto;
width: 100%;
zoom: 1;
}
body {
background-color: #222;
color: #fff;
font-family: 'Source Code Pro', monospace;
font-size: 20px;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: inherit;
font-family: 'VT323', monospace;
font-weight: 500;
letter-spacing: normal;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 10px;
}
h1 {
font-size: 48px;
margin-bottom: 0px;
margin-top: 5px;
text-align: center;
}
h1 a {
color: cornflowerblue;
}
h2 {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
}
a {
color: #444;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 12px 0;
line-height: 20px;
letter-spacing: normal;
}
.well p {
color: #000 !important;
}
.well p kbd {
line-height: 30px;
outline: 1px solid black;
margin: 5px 0px;
}
ul {
padding: 0;
}
li {
border-bottom: 1px dashed #e0e0e0;
line-height: 1.55;
list-style-type: none;
padding: 7px 0;
}
kbd {
background-color: #eee;
color: #000;
border-radius: 0;
box-shadow: none;
font-family: 'Source Code Pro', monospace;
font-size: 20px;
font-weight: bold;
padding: 4px;
}
.container {
background: #fff;
margin: 0 auto;
width: 100%;
max-width: 1170px;
}
.well {
background: #f8f8f8;
color: #333;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
min-height: 20px;
margin-bottom: 20px;
padding: 19px;
}
.link-to-repo {
margin: 20px 0;
text-align: center;
}
.link-to-repo p {
margin-bottom: inherit;
}
.ja {
font-size: 13px;
}
.ja h2 {
font-size: 20px;
}
.ja kbd {
font-size: 16px;
}
.box {
background: #f8f8f8;
color: #000;
border: 1px solid #e7e7e7;
margin: 10px 0;
width: 100%;
}
.box .grid-block {
padding: 0;
}
.box-header {
background: #ebebeb;
min-height: 30px;
padding: 10px;
}
.box-header h2 {
font-size: 16px;
margin: 5px 0;
}
.box-body {
font-size: 14px;
display: block;
clear: both;
overflow: hidden;
padding: 0 10px;
padding-bottom: 20px;
}
.box-body li {
border-bottom: none;
line-height: inherit;
list-style-type: none;
padding: 7px 7px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment