Drop Dreamweaver and use VIM

Posted 13 years ago in General, Code

So for the first 10 years of my web design & development experience I used Dreamweaver. That was a mistake. All I did was over-pay and loose time working with an inferior editor. Last year, I switched to VIM and I love it. It's a great editor which offers you exactly what you need. Now don't get me wrong, I prefer VIM but I wouldn't pretend it's the "best" editor out there, there are many others like it such as textmate, sublime, and emacs. But I don't use those so I'm not going to mention them further.

Why not use Dreamweaver?

Dreamweaver is a great editor. If you have no idea how to actually make a website. The biggest reason is that it wants to do the work for you, the problem is, it's not good at that. It never will be. Dreamweaver can understand the result you want but it doesn't understand context so when you let it generate the code for you, it's going to generate a lot of code you don't need. It's a fine set of web developer training wheels but you gotta move on when you're ready. I can't tell you how much I wish I learned about VIM 9 years ago.

But the big reason that Dreamweaver is a bad editor is simply how much it slows your process down. Think about what's involved in changing a word 10 lines up? You either press up 10 times, then the left arrow key until you get to the word then you can either press backspace until the word is gone, or take the mouse and delete the word. You could also take the mouse, select the word, press backspace and replace it.

What VIM offers however is options, and with that comes speed. In that samescenario you can just type the following key sequence in Normal mode 10k3wcE. It moves the cursor 10 lines up, moves right by 3 words, and puts you in edit mode while over-writing the next word so you can just start typing. The only time spent is how long it takes you to type "10k3wcE".

What is VIM?

VIM stands for Vi Improved, Vi is a traditional text editor that comes with unix machines including Mac OS X. ViM works much like VI but adds some extra functionality, customizability, and above-all plugins. It's a text-based code editor.

What makes VIM so great?

Vim is a mode based editor. In other words you use it differently based on the mode you're in which means you get a good interface for what you want to do within your code. By default you are in normal mode where you can view code, move up, down, left, right, with k, j, h, and l (Lowercase "L"). This allows you to use your keyboard to logically transverse your code based on words, lines, letters, and code blocks.

Then there's command mode. This is activated by pressing ":" (colon) and followed by a command, plus text and enter. This is where you can tell vim to save your file, open a new file, split the window into frames, run other functions and plugins.

Lastly there's insert mode. This one is pretty straight forward, this is when you can type your content. There's a few ways to get into this mode. Such as pressing ce in normal mode allows you to edit up to the end of the current word object.

So the big picture here is that VIM allows you to really interact with the context of the code you're typing. It breaks the text you type into words, lines, blocks, vertical blocks, and of course individual characters with numerous ways to transverse and manipulate them.

Extendability

This is what really got me into VIM, the numerous plugins available which mean you can really craft the tool you want. That's what really gives VIM and like editors their power. You get the tool you want to work with, you do't have to use it the way they want you to.

Customization

You can really customize anything in VIM! The amount of options is amazing. Don't like using h, j, k, and l (Lowercase "L") to navigate your text? Fine. Remap your keys in your configuration file!

One of my favorite features is how many themes there are for VIM. If you've used dreamweaver you get one theme, or you can take the time to change the colors and that's it. With VIM you can find many themes and switch to them at anytime. What this does is let you pick a comfortable theme for your environment? Working in a dark coffee shop, use a dark theme. Working in a bright office building? Time to switch to a white theme!

How much is VIM?

Oh I forgot to mention: It's FREE!!! Why? Open source, bitches!

What's the catch?

Oh you're quite wise for asking what the catch is and I'm not going to sugarcoat it: There is a learning curve. It's going to take some time & effort to learn. But I am going to share the resources that helped me learn it. Took me two weeks to get used to editing my code that way.

Vim Resources

Here's some resources I've come across for obtaining VIM and learning it along with a few cherished plugins.

Download MacVim

Learning Vim

As promised here's what I used to learn vim which are a series of video tutorials created by Derek Wyatt who's strong personality does add a bit of entertainment to the process. Following is his introduction tutorial to show you what VIM can offer. It's what got me hooked almost exactly a year ago!

http://www.derekwyatt.org/vim/vim-tutorial-videos/vim-novice-tutorial-videos/

Favorite Plugins

There's really just a few plugins I couldn't live without if you're interested.

  • Pathogen http://www.vim.org/scripts/script.php?script_id=2332

    Pathogen allows you to use git to safely and effortlessly install more plugins in their own folders. By default you would have to install them in a global syntax, startup, indenting, etc... directories. With pathogen they reside in a plugin directory in their own folders. To uninstall the plugin you just remove the folder, to install them with pathogen you can just use git or any other type of plugin manager.

  • Nerd Tree http://www.vim.org/scripts/script.php?script_id=1658

    Nerd Tree is a great plugin for managing files, makes it nice since you can just view the files your working with right away.

  • Vim Themes http://www.vim.org/scripts/script.php?script_id=625

    Here's a ton of VIM themes you can install. In command mode enter :SCROLL and you can use the normal mode movement keys to scroll through the plugins.