Mastering CSS and XHTML with Vim

Question

Please point me to some guides on how to master (X)HTML, CSS with Vim. I preffer to create web pages by hands and I decided to go with Vim.

Any useful plugins, tips & tricks, tutorials, how-tos, books, articles?

Thanks!

Answer 1

You'll "master (X)HTML, CSS with Vim" the same way you'd do with any other text editor or language: by working hard, reading books, watching screencasts and keeping up with the news. The editor you choose is totally irrelevant.

That said, here are a few native features and plugins that helped me a lot:

• Omnicompletion is Vim's own autocompletion-like feature, except that it's not automatic.

  Hit ctrl p or ctrl n to complete with a word contained elsewhere in your document.

  Hit ctrl x ctrl o to display a list of possible completions based on the language.

  BEGIN EDIT

  Another very very useful feature is "file-path completion", start typing the path to a file and hit <Cx><Cf> to display a menu with possible completions.

  Also, the aforementioned features can be automated with plugins, the one I use is AutoComplPop .

  END EDIT

• Objects allow you to move, select and perform actions on your code in crazy cool ways.

  Say you have <div>word</div> with the cursor on o , d i t will delete word , c i t will delete word and place the cursor between the tags for further editing and so on…

  If you know what d , c or v mean, that i roughly means inside and a roughly means around and that t means tag you already have a very powerful tool, there. Vim has other objects very useful for code editing: " , ' , ( , [ , { etc, type :help objects for more.

  For me, this feature alone was enough to justify scraping TextMate.

• Blockwise Selection does what it says. :help blockwise-visual for more info.

• :normalize or :norm is also very useful to prepend or append something to a group of lines.

• SnipMate is a plugin inspired by TextMate's snippets system. You type form then hit tab to expand to a complete boilerplate <form> element in which you can move by further hitting tab to edit values and attributes.

• Surround takes the objects business to another level by making it possible to add tag pairs around your selection, deleting them or changing them.

  If you take the example above, hit c s t <p> to change it in a more correct <p>word</p> . To add a pair of tags to word , select it with v then hit S and type the tag you want.

Answer 2

Sparkup is a pretty awesome plugin. Besides that, I normally use both snipMate and delimitMate , though those are useful for coding in any language.

Answer 3

tl;dr; install this vim setup https://github.com/jameslai/jvim

James Lai wrote an amazing article on Frontend Vim which was 404'ing when I answered this. It has helped me switch from ST2 to VIM so I'm posting it here.

---

Why I Use VIM as My Editor of Choice for Front End Development

by James Lai

I've been using VIM for years, and I just can't get away from it. While many people like to use Sublime Text 2, and I can't help but absolutely encourage that, if you'd like to use an editor that can scale with your knowledge, VIM should be your editor of choice.

Easily edit content within tags

As FED's, we're constantly editing content within tags. VIM makes this easy with its “tag” text object - t. Here's a common scenario, you have source code that looks like:

<div>Some content within here</div>

In VIM, to replace the content within that tag, you merely need to press cit. This will change the inner tag and you'll be left with this:

<div></div>

Easily replace HTML attributes

Similar to the above, we deal with content within quotes all the time, often as attributes within our HTML. You may have something that looks like:

<aside class="one-third author box">

In this scenario, just hit ci". Perhaps the neatest part about this trick, if this was the only content on that line, you don't even need your cursor anywhere near the quote itself! VIM is intelligent enough to simply empty out the content of the quote regardless of its position in the line, and you'll be left with:

<aside class="">

Jump back and fourth between where you've edited

As FEDs, we are constantly jumping back and fourth between places we've previously edited. VIM maintains a “jump list” which is easily navigated by Ctr+O (jumping to previous locations) and Ctr+I (forward). This makes our routine of editing many files simultaneously incredibly painless.

More information on jumps

On a mac? In VIM, you've got a proper delete key again

Mac keyboards don't come with a normal “delete” key - we essentially have a backspace key but it's labelled delete. Sure, you could reach for funcdelete, but that function key is sure out the the way. Instead, hit x!

Move CSS like a master

Often I'll need to refactor some CSS and move properties between selectors. With VIM, I can move content from various lines to my cursor position with a simple:

:<linenumber>,<linenumber>m

Common operations like these are made laughably easy with VIM.

Jump to the end or beginning of a line

This is unusually common in my workflow - needing to jump to the end of a line. Perhaps I forgot a semicolon at the end of a CSS property or line of Javascript. To jump to the end of the line, simply hit A and you're in insert mode at the end of the line. Need to edit at the beginning (not counting tabbing)? Use I.

Edit at the speed of thought

One of the staple concepts of VIM is to prevent needing to reach for your mouse. When I'm in my flow, I never reach for the mouse unless its to interact with a web page I'm working on. Getting good at VIM means your ability to edit and manipulate text nearly approaches how fast you can think of the problem. Because of the concept of text objects, thinking “I want to delete this line” becomes a trivial dd, or deleting a word with daw. As you think about the problem, you more often then not have a easy command to describe to the editor. The ability to get into your flow with VIM is, in my opinion, higher than most other editors.

Easy split windows

Something that completely changed how I developed was learning how to really leverage split windows in VIM. Yes, VIM has split windows, and they're amazing! Some editors come with this functionality, but it can be cumbersome to use, or difficult to remember to use.

Spits are powerful because we're often addressing the same item in a number of places. If you're addressing an element, you'll often want the HTML file up. If you're applying styling to it, you'll want the CSS up, and if you're applying behaviors, you'll want the Javascript up as well. Seeing them all at the same time has saved me literally countless headaches in editing. The flow feels very “natural”, not to mention just how awesome your editor will look. Often I'll have at least 4 splits going at any one time.

A great way to get started is by typing :Vex. This opens a Vertical exploration window. From here you can browse to whatever file you want to, and that file will appear in the split. There's also the always salacious :Sex command, which will open a horizontal split explorer window.

Vertical Split Windows

More information on splits

More information on the file explorer

Your setup, anywhere

Perhaps one of the most compelling features is the ability to have your customized setup very quickly. I keep my VIM configuration in a GitHub repo , meaning regardless of what machine I'm on, I'm about 2 commands away from having my complete setup ready to go.

…even on remote machines

Front end developers will inevitably work on a remote server at some point. Heck, many of us have local linux boxes in a VM replicating our server environments. You're going to need an editor, and rather than either fumble around in VIM due to not knowing how to actually make it dance, or using a basic and underpowered editor like nano, getting good at VIM client-side means you're going to be a master server-side.

Final thoughts

VIM is an amazing editor, and although you may think it's old, it's actually more than up to the task for today's editing. No matter what new editor hits the market, I may try them out to see what innovations are out there, but in the end, I always come back to VIM for all my editing, and I love it.

Answer 4

I do it that way. I haven't found that much support for it, so I wrote a little of my own. I keep it on Google code hosting . I also use a version of Vim with Python embedded, and use some Python to extend some functionality. That's in the pycopia.vimlib package.

There is only a little, but hopefully useful stuff. You can start from there.

Answer 5

Emmet . Which was called zencoding a long time ago, is a nice plugin for several editors (including vim) with many features that enables you to code html and css very rapidly.

For example, you can type div.some span.other<ctrl+y> ans you'll get:

<div class="some>
   <span class="other>
      (cursor here) 
   </span>
</div>

Answer 6

1. Install CSS3 syntax plugin .
2. Install HTML5 syntax plugin .
3. Install Syntastic syntax checker plugin .
   1. You'll also have to install CSS Lint's CLI tool , since the syntax checker uses it.

---

There are a lot more plugins related to general development, which you can find in several questions scattered around this website, but the ones above a specifically related to help writing better CSS & HTML.

Answer 7

I use a lot zencoding, so, if you're used with zen-coding try the zenCoding plugin for Vim find it here

If you want to learn more about zen-coding you could read: zen coding vim tutorial