diff options
Diffstat (limited to 'Homework/engl3085/Technical-Comm/vim-docs-for-3085/site/understanding')
| -rw-r--r-- | Homework/engl3085/Technical-Comm/vim-docs-for-3085/site/understanding/index.html | 531 |
1 files changed, 531 insertions, 0 deletions
diff --git a/Homework/engl3085/Technical-Comm/vim-docs-for-3085/site/understanding/index.html b/Homework/engl3085/Technical-Comm/vim-docs-for-3085/site/understanding/index.html new file mode 100644 index 0000000..0daf32e --- /dev/null +++ b/Homework/engl3085/Technical-Comm/vim-docs-for-3085/site/understanding/index.html @@ -0,0 +1,531 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + + + <link rel="shortcut icon" href="../img/favicon.ico"> + + + <title>Understanding Vim - Vim</title> + + + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"> + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/v4-shims.css"> + <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.min.css"> + <link href='//rsms.me/inter/inter.css' rel='stylesheet' type='text/css'> + <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,600,700&subset=latin-ext,latin' rel='stylesheet' type='text/css'> + <link href="../css/bootstrap-custom.min.css" rel="stylesheet"> + <link href="../css/base.min.css" rel="stylesheet"> + <link href="../css/cinder.min.css" rel="stylesheet"> + + + + <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/github.min.css"> + + + + <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> + <![endif]--> + + + + +</head> + +<body> + + <div class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="container"> + + <!-- Collapsed navigation --> + <div class="navbar-header"> + <!-- Expander button --> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + + + <!-- Main title --> + + + <a class="navbar-brand" href="..">Vim</a> + + </div> + + <!-- Expanded navigation --> + <div class="navbar-collapse collapse"> + <!-- Main navigation --> + <ul class="nav navbar-nav"> + + + <li > + <a href="..">Home</a> + </li> + + + + <li > + <a href="../about/">About</a> + </li> + + + + <li > + <a href="../intro/">Introduction</a> + </li> + + + + <li > + <a href="../quickstart/">Quick Start</a> + </li> + + + + <li class="active"> + <a href="./">Understanding Vim</a> + </li> + + + + <li > + <a href="../references/">References</a> + </li> + + + </ul> + + <ul class="nav navbar-nav navbar-right"> + <li > + <a rel="prev" href="../quickstart/"> + <i class="fas fa-arrow-left"></i> Previous + </a> + </li> + <li > + <a rel="next" href="../references/"> + Next <i class="fas fa-arrow-right"></i> + </a> + </li> + </ul> + </div> + </div> +</div> + + <div class="container"> + + + <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary"> + <ul class="nav bs-sidenav"> + <li class="first-level active"><a href="#vim-is-modal">Vim is Modal</a></li> + <li class="second-level"><a href="#insert-mode">Insert Mode</a></li> + + <li class="second-level"><a href="#visual-mode">Visual Mode</a></li> + + <li class="third-level"><a href="#navigation-in-visual-mode">Navigation in Visual Mode</a></li> + <li class="second-level"><a href="#normal-mode">Normal mode</a></li> + + <li class="third-level"><a href="#cursor-movement">Cursor Movement</a></li> + <li class="third-level"><a href="#actions">Actions</a></li> + <li class="first-level "><a href="#making-vim-your-own-installing-plugins">Making Vim Your Own: Installing Plugins</a></li> + </ul> +</div></div> + <div class="col-md-9" role="main"> + +<h1 id="vim-is-modal">Vim is Modal</h1> +<h6>Logan</h6> + +<ul> +<li>Hopefully you've done the <a href="../intro/">Quick Start</a> and are ready to learn more about Vim. Here we will go over some of the concepts behind Vim.</li> +</ul> +<p>Vim is "modal", meaning that how one interacts with the editor is dependant on the current mode. In other words, modes can be likened to "states", and the state Vim is in determines what actions are available to the user.</p> +<p>This documentation will cover three such "modes": Normal Mode, Insert Mode, and Visual Mode.</p> +<p>The current mode, if it is not normal mode, is displayed in the bottom left corner:</p> +<p><img alt="Vim Modes" src="../img/mode-placement.png" /></p> +<h2 id="insert-mode">Insert Mode</h2> +<h6>Tyler</h6> + +<p>Insert mode is the mode in which text is entered into the document. In this mode, the keyboard is interpreted as text input, and the text cursor is visible. +Common ways of entering insert mode are listed below.</p> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>i</code></td> +<td>Insert before the cursor</td> +</tr> +<tr> +<td><code>I</code></td> +<td>Insert at the beginning of the line</td> +</tr> +<tr> +<td><code>a</code></td> +<td>Append after the cursor</td> +</tr> +<tr> +<td><code>A</code></td> +<td>Append at the end of the line</td> +</tr> +<tr> +<td><code>o</code></td> +<td>Create a new line below the cursor and insert</td> +</tr> +<tr> +<td><code>O</code></td> +<td>Create a new line above the cursor and insert</td> +</tr> +</tbody> +</table> +<h2 id="visual-mode">Visual Mode</h2> +<h6>Authored by Alaina D</h6> + +<p>Visual mode is the mode in which text is selected. In this mode, the text cursor is visible, and the text is highlighted. To enter visual mode, press <code>v</code> while in Normal mode (hint: to switch to normal mode, hit <code>ESC</code>--then press <code>v</code> to get to Visual mode).</p> +<p>In Visual mode, you may highlight text (using your cursor, of course) by navigating around within your file. While you are in visual mode, Vim will highlight the text that is currently selected. For this reason, Visual mode is very useful for selecting multiple words, lines, or paragraphs of text. You can even select the entire file's text in Visual mode, if you would like to.</p> +<p>While Vim is in Visual mode, text will become selected as you move your cursor around the document. Vim will automatically highlight the selected text, which makes it easier (in real-time) for you to see which text you are selecting.</p> +<p><img alt="Vim Screenshot" src="../img/visual_mode_sample.png" /></p> +<p>If you would like to deslect your text, hit <code>ESC</code> to go back to Normal mode, navigate your cursor to your desired location, and then re-enter visual mode by pressing <code>v</code>.</p> +<h3 id="navigation-in-visual-mode">Navigation in Visual Mode</h3> +<p>In Visual mode, you are free to navigate Vim similar to how you navigate in Normal mode. Below this paragraph, you will find a table of helpful navigation commands in Vim (the commands work the same in normal mode and in Visual mode).</p> +<h4 id="simple-navigation">Simple Navigation</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>h</code></td> +<td><code>(←)</code> Move the cursor left one character</td> +</tr> +<tr> +<td><code>j</code></td> +<td><code>(↓)</code> Move the cursor down one line</td> +</tr> +<tr> +<td><code>k</code></td> +<td><code>(↑)</code> Move the cursor up one line</td> +</tr> +<tr> +<td><code>l</code></td> +<td><code>(→)</code> Move the cursor right one character</td> +</tr> +</tbody> +</table> +<h4 id="word-by-word-navigationby-character-navigation">Word-By-Word Navigation/By-Character Navigation</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>w</code></td> +<td>Move the cursor to the beginning of the next word</td> +</tr> +<tr> +<td><code>e</code></td> +<td>Move the cursor to the end of the next word</td> +</tr> +<tr> +<td><code>b</code></td> +<td>Move the cursor to the beginning of the previous word</td> +</tr> +<tr> +<td><code>4j</code></td> +<td>Move the cursor down 4 lines (you may combine any number with j or k to move up ___ number of lines</td> +</tr> +<tr> +<td><code>3h</code></td> +<td>Move the cursor to the left 3 characters (you may combine any number with h or l to move ___ number of characters</td> +</tr> +</tbody> +</table> +<h4 id="multi-line-navigationline-by-line-navigation">Multi-line Navigation/Line-By-Line Navigation</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>0</code></td> +<td>Move the cursor to the beginning of the line</td> +</tr> +<tr> +<td><code>$</code></td> +<td>Move the cursor to the end of the line</td> +</tr> +<tr> +<td><code>^</code></td> +<td>Move the cursor to the first non-whitespace character of the line</td> +</tr> +<tr> +<td><code>SHIFT + g</code></td> +<td>Move the cursor to the end of the file</td> +</tr> +<tr> +<td><code>gg</code></td> +<td>Move the cursor to the beginning of the file</td> +</tr> +<tr> +<td><code>4j</code></td> +<td>Move the cursor down 4 lines (you may combine any number with j or k to move up ___ number of lines</td> +</tr> +<tr> +<td><code>3h</code></td> +<td>Move the cursor to the left 3 characters (you may combine any number with h or l to move ___ number of characters</td> +</tr> +</tbody> +</table> +<h4 id="deleting-text-in-visual-mode">Deleting Text in Visual Mode</h4> +<p>To delete your selected block of text, first enter visual mode using <code>v</code> (as mentioned above). Once you have selected the text that you would like to delete, press <code>d</code> for delete. When you press <code>d</code>, the section of text which you have selected will be deleted. If you would like to undo your deletion, press <code>u</code> to undo.</p> +<p><strong>NOTE: when you use <code>d</code> to delete text, Vim will automatically return to Normal mode (this means that you will need to press <code>v</code> to get back to Visual mode)</strong></p> +<h4 id="copypaste-text-using-visual-mode">Copy/Paste Text Using Visual Mode</h4> +<p>To copy text in Visual mode, you must first enter Visual mode (using <code>v</code>, as mentioned above). You will then select your desired block of text by moving your cursor over the desired text. Once you have selected the text that you want to copy, press 'y' to copy the text. Once you have copied your selected text, you may return to normal mode and use <code>SHIFT + p</code> or <code>p</code> to paste your desired text (<code>SHIFT + p</code> will paste text <em>before</em> your cursor, while <code>p</code> will paste text <em>after</em> your cursor). Please note that the text will be pasted wherever your cursor happens to be at the moment.</p> +<p><strong>NOTE: when you use <code>y</code> to copy (yank) text, Vim will automatically return to Normal mode (this means that you will need to press <code>v</code> to get back to Visual mode)</strong></p> +<h2 id="normal-mode">Normal mode</h2> +<h6>Logan</h6> + +<p>Normal mode is the default mode when Vim is first run, and the mode which a user will spend most of their time, as it is the "main" mode; a user enters other modes through Normal mode, and exiting those modes brings the users back to Normal mode. such as navigating text, delete and yank (vim-ology for "cut" and "paste") text, and changing into other .</p> +<p>Normal mode is also the mode in which a user enters other modes, such as Insert Mode and Visual Mode. When in any other mode, a user can always go back to Normal mode by pressing the <code><Esc></code> key.</p> +<h3 id="cursor-movement">Cursor Movement</h3> +<p>In normal mode, no keyboard input is interpreted as text input. Instead, the keyboard is used to move the text cursor around the document.</p> +<p>As an example, the text cursor can be moved using the <code>h</code>, <code>j</code>, <code>k</code>, and <code>l</code> keys. These keys are the most efficient way to navigate the cursor due to their placement on the homerow.</p> +<p>Note that this collection is not exhaustive, but rather a collection of the most common and useful commands. For a full list of commands, see this <a href="https://vim.rtorr.com/">Vim Cheat Sheet</a>.</p> +<h4 id="the-essentials">The Essentials</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>h</code></td> +<td><code>(←)</code> Move the cursor left one character</td> +</tr> +<tr> +<td><code>j</code></td> +<td><code>(↓)</code> Move the cursor down one line</td> +</tr> +<tr> +<td><code>k</code></td> +<td><code>(↑)</code> Move the cursor up one line</td> +</tr> +<tr> +<td><code>l</code></td> +<td><code>(→)</code> Move the cursor right one character</td> +</tr> +</tbody> +</table> +<p><div class="video-container"><iframe src="../mov/basic-movement.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h4 id="by-word">By Word</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>w</code></td> +<td>Move the cursor to the beginning of the next word</td> +</tr> +<tr> +<td><code>e</code></td> +<td>Move the cursor to the end of the next word</td> +</tr> +<tr> +<td><code>b</code></td> +<td>Move the cursor to the beginning of the previous word</td> +</tr> +</tbody> +</table> +<p><div class="video-container"><iframe src="../mov/word-movement.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h4 id="by-line">By Line</h4> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>0</code></td> +<td>Move the cursor to the beginning of the line</td> +</tr> +<tr> +<td><code>$</code></td> +<td>Move the cursor to the end of the line</td> +</tr> +<tr> +<td><code>^</code></td> +<td>Move the cursor to the first non-whitespace character of the line</td> +</tr> +</tbody> +</table> +<p><div class="video-container"><iframe src="../mov/line-moving.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h3 id="actions">Actions</h3> +<p>"Actions" in normal mode are commands that perform some sort of action on the text. These can be anything from deleting text to toggling the case of some text.</p> +<p>Typically there are two parts of a action in normal mode: the "operator" and a (sometimes optional) "motion". The operator is the action to be performed, and the motion is the text to perform the action on.</p> +<p>For example, with the command <code>d</code> as the "delete" operator, and the motion <code>w</code> as the "forward word" motion, together, form the command <code>dw</code>. This would delete any text under the cursor until the end of the word.</p> +<h4 id="repeating">Repeating</h4> +<p>In normal mode, actions and movements can be repeated by prefixing them with a number. For example, <code>3j</code> will move the cursor down three lines, and <code>10w</code> would go forward ten words.</p> +<p><div class="video-container"><iframe src="../mov/repeat.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h4 id="cutcopy-paste">Cut/Copy & Paste</h4> +<p>The action of copying a piece of text and pasting it somewhere else is a very common task in text editing, and Vim has a few ways to do this. Though, Vim uses the terminology "yank" and "put" instead of "copy" and "paste".</p> +<ol> +<li>To yank (or copy) text, the <code>y</code> operator is used in conjunction with a motion.</li> +<li>To cut text, the <code>d</code> operator is used in conjunction with a motion.</li> +<li>To put (or paste) text, the <code>p</code> operator is used. This operator puts the text that was last yanked or cut at the cursor.</li> +</ol> +<p>A specific property exists on the yank and cut operators: repeating them will yank or cut the entire line. For example, <code>yy</code> will yank the entire line, and <code>dd</code> will cut the entire line.</p> +<p>Therefore, the following are all examples of valid commands:</p> +<table> +<thead> +<tr> +<th>Command</th> +<th>Description</th> +</tr> +</thead> +<tbody> +<tr> +<td><code>yy</code></td> +<td>Yank (copy) the entire line</td> +</tr> +<tr> +<td><code>dd</code></td> +<td>Cut (delete) the entire line</td> +</tr> +<tr> +<td><code>y$</code></td> +<td>Yank (copy) from the cursor to the end of the line</td> +</tr> +<tr> +<td><code>dw</code></td> +<td>Cut (delete) the word under the cursor</td> +</tr> +<tr> +<td><code>p</code></td> +<td>Put (paste) the text that was last yanked or cut after the cursor</td> +</tr> +</tbody> +</table> +<p><div class="video-container"><iframe src="../mov/delete-yank.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div> +<em>Examples of the <code>d</code> and <code>y</code> operators, and repeating actions</em></p> +<h4 id="searching">Searching</h4> +<p>Vim has a built-in search feature that allows users to search for text in the document. The search feature is accessed by pressing the <code>/</code> key, and the search term is entered after the <code>/</code> key.</p> +<p><div class="video-container"><iframe src="../mov/search.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h4 id="replacing-text">Replacing Text</h4> +<p>Vim also has a powerful search and replace feature which can accessed via the <code>:%s</code> command.</p> +<p>The <code>:%s</code> command is similar the <code>sed</code> UNIX utility (see <a href="https://unix.stackexchange.com/questions/159367/using-sed-to-find-and-replace">this</a> stackexchange post as a quick example of the syntax) and takes two regex joined by forward slashes: the first is the text to search for, and the second is the text to replace it with. For example, <code>:%s/foo/bar/</code> will replace the first instance of <code>foo</code> with <code>bar</code> in the document.</p> +<p><div class="video-container"><iframe src="../mov/replace-search.mp4" style="position: relative; width: 100%; height: 22.172vw" frameborder="0" allowfullscreen></iframe></div></p> +<h1 id="making-vim-your-own-installing-plugins">Making Vim Your Own: Installing Plugins</h1> +<h6>Eric</h6> +<p>While Vim in it's own element can be a powerful tool, it is still just a text editor. Plugins can be installed to customize and improve the Vim editor, and add more functionality that Vim doesn't have on it's own. Vim version 8+ is required, and you can check by launching Vim.</p> +<p><img alt="Vim Screenshot" src="../img/vim_window.png" /></p> +<p>Vim looks in a specific directory, ~/.vim/pack/[whatever you want]/start. + If this PATH doesn't exist, create one using the <code>mkdir</code> command in the terminal, or navigating to the directory in your file manager, and put any downloaded packages inside of it. </p> +<p><img alt="File Structure in Terminal" src="../img/terminal1.png" /></p> +<p>Terminal file structure</p> +<p><img alt="File Stucture in Manager" src="../img/manager.png" /></p> +<p>Manager file structure</p> +<p>Vim will find them at boot, and they will be applied when it is launched. You can find packages anywhere on the internet, in the form of zipped folders, repositories, etc. A great website to find ones is <a href="https://vimawesome.com">Vim Awesome</a>.</p></div> + + + </div> + + + <footer class="col-md-12 text-center"> + + + <hr> + <p> + <small>Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.</small> + </p> + + + + + </footer> + + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + <script src="../js/bootstrap-3.0.3.min.js"></script> + + + <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/highlight.min.js"></script> + + <script>hljs.initHighlightingOnLoad();</script> + + + <script>var base_url = ".."</script> + + <script src="../js/base.js"></script> + + <div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + </div> + <div class="modal-body"> + <table class="table"> + <thead> + <tr> + <th style="width: 20%;">Keys</th> + <th>Action</th> + </tr> + </thead> + <tbody> + <tr> + <td class="help shortcut"><kbd>?</kbd></td> + <td>Open this help</td> + </tr> + <tr> + <td class="next shortcut"><kbd>n</kbd></td> + <td>Next page</td> + </tr> + <tr> + <td class="prev shortcut"><kbd>p</kbd></td> + <td>Previous page</td> + </tr> + <tr> + <td class="search shortcut"><kbd>s</kbd></td> + <td>Search</td> + </tr> + </tbody> + </table> + </div> + <div class="modal-footer"> + </div> + </div> + </div> +</div> + </body> + +</html> |