VIM editing is the holy grail of integrated development environments (IDEs). No, it does not have pictures and pretty things to click on. No, it doesn’t naturally include all your project files with drag-and-drop. No, no, and no. But yes, it is the best HTML Code editor, in my opinion. Let me give you some reasons why!
I strongly urge any HTML programmer to get acquainted with the VIM text editor. Even if you don’t use it as your primary editor, it has so many benefits that I can’t visualize programming without it. When I use VIM for web development, I feel like I’m programming while I program. How awesome is that? If you want to learn HTML, I strongly suggest Vim editing for your HTML files.
Let’s take a step back, so although the VIM code editor has a high learning curve with huge benefits waiting on the other side, you can get your feet wet with VIM tutor. At the terminal, type in vimtutor, and a tutorial program will start where you will use VIM strokes to get through the tutorial. That’s a neat feature of the VIM editor. You can then proceed to the actual VIM manual by typing :help or :help [subject] for help on a specific topic at the VIM prompt. So now we have some of the basics out of the way, let’s move on to some of the enormous benefits of the VIM text editor.
Vim Editing Basics
While using VIM to edit a file, as I stated, you are basically programming as you program. We programmers like to deal with numbers, correct? We don’t necessarily care for strings and all the manipulation that goes on behind a string since it increases complexity. Well, VIM editing is just like that. You can get a few commands under your belt over a number of days and use numbers to edit your file … literally.
So, let’s discuss the simple delete word command (dw). You can type in dw, which will delete the word underneath the cursor. You can then type (.) to repeat the command. You can also type in the number of words to delete. 4dw (delete 4 words). Pretty cool. At the moment, I’m trying to get you into the VIM programming mindset because as you type in 4dw, you might wonder how that functionality was programmed into the VIM editor and if adding similar functionality may benefit your current program.
In case you’re stuck in the VIMtutor program, you can exit VIM by using the following commands (:q) to quit, (:wq) to write and quit, or (:q!) to force quit and discard your changes. Then, you can always jump right back in for some programming fun.
Benefits of Vim Code Editor
Now let’s move to the real crazy benefits of the VIM editor and why I use no other editor. The support it has for things that open and close is ridiculous. If you are on one end of a bracket, you can switch to the other end by typing % (Shift + 5). You can also move to a containing bracket or to the function definition containing your current line. Although that’s pretty cool, it becomes pretty awesome when you’re editing. For example, let’s say you have the following HTML code snippet in the VIM editor.
<html><body><p>My Hello World paragraph</p></body></html>
VIM recognizes HTML elements on installation and identifies them as tags. Like daw means delete a word, dat means delete a tag in VIM. So, for VIM HTML, we’ll eventually use operations such as copying a tag, pasting a tag, changing a tag, deleting a tag, and so forth. We can update with the change operator (c) and delete with the (d) operator. You’ll have to learn some of these things, but learning should be a continuous way of life for any serious web developer (another plus). If our cursor is over the e in Hello in the above HTML example, and we realize we want to reset the paragraph tag and start over. We can type cit, and it will delete everything within p and place you in insert mode. As long as you are within the tag, typing cit anywhere will remove all the text within the tag and place you in insert mode. Tags open and close, too (or should help with errors when things don’t work as expected).
<html><body><p>[cursor]</p></body></html>
You get the above code from using cit. You will get the same thing using dit without the insert mode, so you’ll delete the text within the tag. You can do this freely, knowing it is correct because programs don’t make mistakes; humans do. There is no need to use your mouse in your fantastic Graphical User Interface (GUI) IDE to try and select the text just right, which could take a few tries. Just cit, and everything within the tag is gone. This VIM feature alone is quite remarkable! … not to mention VIM is lightning-fast compared to any other IDE. It is undoubtedly lightweight in comparison since you use known keystrokes to tell the VIM code editor what to do versus looking for things to click on, which is costly to program. You have many days in your life .. slow and steady with learning the VIM editor and the rewards will be there, I assure you.
Programming With VIM And File System Support
Let’s move to another aspect of the wonderful VIM code editor: Vim Ctags and file system support. Ctags is a file that helps VIM jump to the definition of a function for whatever term is underneath the cursor. The tags file is generated when you run the ctags command at the command prompt and is saved to your hard disk, so if you add more functions, classes, or namespaces to your code base, you’ll need to rerun the vim ctag command to update your tags file. In addition, the VIM editor allows you to use the command gf to go to the actual file of the term (file name path) underneath the cursor. You can also run commands from the terminal within VIM and display the results right within the window. And you can, of course, open multiple files and split windows both vertically and horizontally. You can also paste into registers and record macros that make common repeatable steps, in essence, as easy as 123 with a guarantee of no mistakes from human error. You will need the ambition and drive to find out how to do these things, but I want to touch on one thing I find pretty amazing about the file system integration. By the way, many more features of VIM are not mentioned here (VIM code editor = a lifetime of learning).
From within the VIM editor, you can run any terminal command such as grep in Linux to find instances of a variable within the project. Let’s assume we run a recursive grep command for a word in one of your large projects.
:read !grep -rn someWord .Running the above command will find someWord and list them in your window. Now, you can save this file to the hard disk where you ran the command for high-speed access to this search in the future. And as long as your project files don’t change too much through editing, you can open this hard disk file at any time in the future (lightning fast compared to the search of a large project) and use the VIM command gf to proceed to the file and G to go to the line or search for the term. This is more useful in larger projects where you can have searches through massive code bases saved just to be able to go directly to any file with that word. It’s like ctags for a file search, but the benefits are enormous (only run that 3-minute search once).
:cd /path/to/images
:read !lsI’ll give you a taste of what can be accomplished with the above code for HTML programming. As you can see, we set the path to the images folder. Now, we want to list our images in the Vim editor, so we run the command ls in MAC or Linux (or dir on Windows). Once we run the ls command (:read !ls), the result of the command is listed in your editor. LS is a command that lists files and will list all the image file names in your editor. Now, you can use those names like any other text in your document. Hopefully, you can see how awesome this is and how the Vim Text editor can help write less error-prone HTML code.
I’ll create some videos on programming with VIM so you can see for yourself how useful it is for a web developer. I completely love using it, and it is easily my preferred choice. Thinking the VIM way takes a little getting used to, but when you get it, you start to use the other IDEs similarly. If interested, I strongly recommend Practical Vim (Edit Text at the Speed of Thought) by Drew Neil. You can also always type :help [subject] at command line and jump around editing things very fast 🙂 . Let me know your experiences with VIM below and how you’ve found it to be most helpful.
Note: If you need top-notch web development capable of building world-class website applications and features, request a quote from us today!
