<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Giovanni Naufal</title>
    <description>The latest articles on DEV Community by Giovanni Naufal (@gionaufal).</description>
    <link>https://dev.to/gionaufal</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F6106%2F11934186.jpeg</url>
      <title>DEV Community: Giovanni Naufal</title>
      <link>https://dev.to/gionaufal</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gionaufal"/>
    <language>en</language>
    <item>
      <title>How (and why) I use Vim</title>
      <dc:creator>Giovanni Naufal</dc:creator>
      <pubDate>Fri, 01 Mar 2019 17:44:23 +0000</pubDate>
      <link>https://dev.to/gionaufal/how-and-why-i-usevim-4h6g</link>
      <guid>https://dev.to/gionaufal/how-and-why-i-usevim-4h6g</guid>
      <description>

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--m35fjwl9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9vlhgbdlr5e8znzad1yr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--m35fjwl9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9vlhgbdlr5e8znzad1yr.png" alt="Vim in action"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Vim in action&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;There's much discussion of what is the best text editor among programmers and developers on the web. There are a lot of options, being some of the most popular; &lt;a href="https://atom.io"&gt;Atom&lt;/a&gt;, &lt;a href="https://www.sublimetext.com/"&gt;Sublime&lt;/a&gt;, &lt;a href="https://code.visualstudio.com/"&gt;VS Code&lt;/a&gt;, &lt;a href="https://notepad-plus-plus.org/"&gt;Notepad++&lt;/a&gt;, &lt;a href="https://www.gnu.org/software/emacs/"&gt;Emacs&lt;/a&gt;, &lt;a href="http://www.vim.org/"&gt;Vim&lt;/a&gt;… Some have IDE-like features, others are most basic and simple, like the standard notepad.&lt;/p&gt;

&lt;p&gt;When I worked at &lt;a href="https://campuscode.com.br"&gt;Campus Code&lt;/a&gt; we were 8 developers, and almost all used Vim. We have a standard configurations that you can &lt;a href="https://github.com/campuscode/cc_dotfiles"&gt;check out here&lt;/a&gt;.&lt;br&gt;
In this post I will not try to convince you about what is the best editor or IDE. I'll only show the advantages that I found using Vim, why I use it and how you can use it too.&lt;/p&gt;

&lt;h3&gt;
  
  
  First, a little bit of history…
&lt;/h3&gt;

&lt;p&gt;Vim (Vi IMproved) is a improved clone of the Vi editor. It is open source and it was launched in 1991. To start it, just type &lt;code&gt;vim&lt;/code&gt; in your terminal (Linux or MacOS). You will see a screen like that:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--j9mEe15D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0842l3g36p4zszk1y2dk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--j9mEe15D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/0842l3g36p4zszk1y2dk.png" alt="Vim initial screen"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Vim initial screen&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  And now, what do I do?
&lt;/h3&gt;

&lt;p&gt;If you have no clue about how to use Vim, you are not alone. In 2017 &lt;a href="https://stackoverflow.blog/2017/05/23/stack-overflow-helping-one-million-developers-exit-vim/"&gt;Stack Overflow announced&lt;/a&gt; that the question "How to exit Vim?" reached 1 million visits. That's the same as to say that 1 in every 20k users accessing the site are just trying to exit Vim.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2oi4Tanz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/gqtgc68s0kphmnod2992.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2oi4Tanz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/gqtgc68s0kphmnod2992.png" alt="exit vim"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Just type &lt;code&gt;:q&lt;/code&gt; and Enter, seriously&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;As you probably noticed, Vim doesn't have graphic interface nor mouse support (it sort of has, but no one uses it), so navigation must be made through the keyboard. This is easier than it looks, but it requires a little bit of practice.&lt;br&gt;
To open a file with Vim just type &lt;code&gt;$ vim &amp;lt;path_to_file&amp;gt;&lt;/code&gt; in your terminal. If you want to open the folder that you are at, &lt;code&gt;$ vim .&lt;/code&gt; .&lt;/p&gt;

&lt;p&gt;Vim was built thinking that, as developers, we pass most of our time editing text, not necessarily writing new stuff. That's why it has 2 main modes: &lt;code&gt;Normal&lt;/code&gt; (navigation) and &lt;code&gt;Insert&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Normal mode:
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e7HGmAaq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/95dmdf9yntn980xaj059.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e7HGmAaq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/95dmdf9yntn980xaj059.png" alt="vim normal mode"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The mode is shown at a bar below the editor&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is the standard mode when you open Vim. Navigation is made with the keys &lt;code&gt;h&lt;/code&gt; (left), &lt;code&gt;j&lt;/code&gt; (down), &lt;code&gt;k&lt;/code&gt; (up) and &lt;code&gt;l&lt;/code&gt; (right). If you want you can use the arrows, but only the fact that you have to move your hand from the characters to reach them makes the alphabetic navigation more efficient.&lt;/p&gt;

&lt;p&gt;Some other important commands:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;w&lt;/code&gt; move the cursor to the beginning of the next word&lt;br&gt;
&lt;code&gt;e&lt;/code&gt; move to the end of the next word&lt;br&gt;
&lt;code&gt;b&lt;/code&gt; move to the beginning of the previous word&lt;br&gt;
&lt;code&gt;x&lt;/code&gt; erase the character below the cursor&lt;br&gt;
&lt;code&gt;u&lt;/code&gt; undo last change&lt;br&gt;
&lt;code&gt;&amp;lt;ctrl&amp;gt;+r&lt;/code&gt; redo last undone change&lt;br&gt;
&lt;code&gt;v&lt;/code&gt; access visual mode (for selection). To select something, navigate through hjkl or arrows, and the selected text will be in another color.&lt;br&gt;
&lt;code&gt;y&lt;/code&gt; copy what's selected in visual mode. It can be used combined with other commands, for example yw to copy the next word, yy to copy the whole line.&lt;br&gt;
&lt;code&gt;d&lt;/code&gt; delete what's selected in visual mode. Like y it can be used with other commands.&lt;br&gt;
&lt;code&gt;c&lt;/code&gt; delete what is selected and opens Insert mode (change). Like the above, it can be used with other commands.&lt;/p&gt;

&lt;h4&gt;
  
  
  Insert mode
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dn22obhY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5pokjrtu9wg91rzmvmwf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dn22obhY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/5pokjrtu9wg91rzmvmwf.png" alt="vim insert mode"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;When the lower bar is showing INSERT, you can write&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Press &lt;code&gt;i&lt;/code&gt; to enter insert mode. As the name says, on it you can insert, or write, what you want. Here Vim works like any other editor, and depending on your configuration you can have autocomplete options and even shortcuts to create HTML tags like &lt;a href="https://github.com/mattn/emmet-vim"&gt;Emmet&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--S8ZNgftb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/996kk5d0qh14071db9j2.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--S8ZNgftb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/996kk5d0qh14071db9j2.gif" alt="Emmet-vim in action pressing &amp;lt;ctrl&amp;gt;+y"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Emmet-vim in action pressing +y&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;To exit insert mode, press &lt;code&gt;ESC&lt;/code&gt;. I find it better to work changing between these two modes.&lt;/p&gt;




&lt;p&gt;Other useful commands&lt;/p&gt;

&lt;p&gt;In normal mode:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;:e &amp;lt;path-to-file&amp;gt;&lt;/code&gt; open a file&lt;br&gt;
&lt;code&gt;:w&lt;/code&gt; save the current file&lt;br&gt;
&lt;code&gt;:q&lt;/code&gt; close the file (and Vim)&lt;br&gt;
&lt;code&gt;/foo&lt;/code&gt; find foo in the file. Press Enter to go to t he word, n to go to the next occurrence of the word and N to the previous&lt;br&gt;
&lt;code&gt;:%s/foo/bar/g&lt;/code&gt; replace foo by bar in the whole file. See here other replace options&lt;br&gt;
&lt;code&gt;g10&lt;/code&gt; jump the cursor to line 10 (for example)&lt;br&gt;
&lt;code&gt;gg&lt;/code&gt; jump the cursor to the first line of the file&lt;br&gt;
&lt;code&gt;G&lt;/code&gt; jump the cursor to the last line&lt;/p&gt;




&lt;p&gt;There are just some basic tips. Using Vim requires patience and persistence, but at least to me it was worth it, because it increased considerably my work speed and efficiency.&lt;/p&gt;

&lt;p&gt;Do you have another useful Vim tips or questions? Leave them here in the reply!&lt;/p&gt;

</description>
      <category>vim</category>
      <category>vi</category>
      <category>ide</category>
      <category>texteditor</category>
    </item>
  </channel>
</rss>
