How can I customize Vim for web development and programming?

Question

I tried already to find something for my question in [askubuntu.com] , but nothing was answering my needs. So, what i want is build vim as a very powerful and useful editor for html,css, javascript, etc but for programming too. I am trying to learn css and generally I wanted a very nice editor with many plugins. So, can anybody help me, step by step, for customizing vim and about what features to look around that might help me in my learning period?thanks

Oh, and the only way that vim is running is from terminal?thanks

***edit--->I cannot find my.vimrc file

Solution 1

Everyone else has excellent advice, I thought I'd fill in with some of the basics:

1. GVim for vim outside the console, and how to install it

You asked whether vim can only be run from the console. GVim (GUI-Vim) is the standalone version. From your screenshot, it looks like you're using Ubuntu, you can find gvim in the Software Centre and install it from there. Alternatively you can sudo apt-get install gvim from a terminal.

2. Creating a .vimrc config file

It looks like, by default, vim/gvim doesn't create a .vimrc for you, so you can create one yourself. Open vim, and type :e ~/.vimrc to edit a new file called .vimrc in your home folder (~)

We'll start by adding just one setting, so that we can see whether it worked. Add the following text:

" switch on line numbering
set number

The " is the comment character.

Then, quit vim and restart it - you should find that a line number 1 has appeared at the top left, and you should find that any file you edit from now on has line numbering switched on by default.

3. Installing a plugin

Plugins live in a folder called ~/.vim/, but, again, vim doesn't create this by default, so you have to make it:

mkdir ~/.vim

Over time, the .vim folder will grow several subfolders like:

• plugin for plugins
• color for color schemes
• doc for documentation
• syntax for syntax highlighting modes

But for now it's empty. Let's add one plugin, to try it out.

Start by opening vim with vim . - that tells vim to open a folder in "explorer" mode. We'll install NERDtree which is a popular file browser plugin, which will replace the default explorer.

Go to http://www.vim.org/scripts/script.php?script_id=1658 and dowload the zip file from the table at the bottom of the page.

Open it up in archive manager, choose "extract", and then tell it to extract into you ~/.vim/ folder. You may need to hit Ctrl+H inside archive manager's folder browser, to show hidden folders.

Once it's extracted, it will create several subfolders in .vim for you. If you now restart vim with a

vim .

You should see the explorer view has changed! It's now using the NERDtree plugin.

4. More .vimrc settings

My full .vimrc is available here https://bitbucket.org/hjwp/vim/src, but here are a few settings I find really useful:

" syntax highlighting
syntax on

" map cut & paste to what they bloody should be
vnoremap <C-c> "+y
vnoremap <C-x> "+x
map <C-v> "+gP

" sane text files
set fileformat=unix
set encoding=utf-8

" sane editing
set tabstop=4
set shiftwidth=4
set softtabstop=4

" convert all typed tabs to spaces
set expandtab

"autocompletion with ctrl+space
inoremap <c-space> <c-n>
inoremap <Nul> <c-n>

5. Ctags

I wouldn't worry too much about plugins at first, just getting to know the power that vim offers you out of the box should be useful enough to your coding already. But one thing that really is useful to have working in vim is ctags. ctags lets you do things like "jump-to-definition", and autocomplete across all the keywords in your source tree. start with:

apt-get install exuberant-ctags

Then, in your .vimrc, add

map <f12> :!ctags -R .<cr>

Now, when you hit "F12" in a vim session, it will generate a .tags file, which vim can use to scan for keywords.

Now, if you're on, eg a function call in your source code, you can use ctrl+] to jump to its definition. More info here: https://stackoverflow.com/questions/563616/vim-and-ctags-tips-and-tricks

6. what's next

Other people have posted some really useful-looking guides, here's a couple of SO pages I've found useful tho:

• https://stackoverflow.com/questions/95072/what-are-your-favorite-vim-tricks
• https://stackoverflow.com/questions/726894/what-are-the-dark-corners-of-vim-your-mom-never-told-you-about
• https://stackoverflow.com/questions/164847/what-is-in-your-vimrc

It's a whole vim-world out there. But: warning: If you find yourself getting into vim golf, you've probably gone too far - http://vimgolf.com/ ;-)

Solution 2

I'd suggest you start studying .vimrc's just like the one above. Everyone's needs and preferences are different so you should denfinitely go with manually installing stuff instead of just copying someone elses configurations.

Some resources about learning VIM itself:

• Learn Vim Progressively, a great guide about learning Vim.
• Vim Novice Tutorials, a series of videos by Derek Wyatt I enjoyed myself when I first began my journey.
• Cheat Sheet, if you're not familiar with Vim from before I'd recommend going at this like an examination. Write the keybindings down on a paper, the command on the left and the description on the right. Then start memorizing by hiding either the command or the description and trying to remember the answer. Doesn't take long before the commands come naturally to you, but remember to actively use them in Vim as well, otherwise you'll quickly unlearn.
• http://usevim.com (Evaluates vim plugins and has a Vim 101 series as well)
• http://vimcasts.org/episodes/archive (Some great casts)

Some really useful plugins

• Syntastic Static code analysis for tons of languages
• vim-css3-syntax Syntax highlighting for CSS3. Generally you should update the syntax files for HTML5 and Javascript as well, if you use them that is.
• Matchit Extends the functionality of %
• Surround Mappings for tags/parenthesis etc, really powerful for Web Devs
• Tcomment Easily toggle comments in most languages
• Pathogen Keep your vim folder organized so you can uninstall and play around with plugins
• NERDtree A really popular tree explorer, personally though I prefer just :e .
• Command-T A popular buffer manager, personally I can't use it as it depends on ruby.
• Snipmate Easily insert code snippets.
• Sparkup Extend div#stuff.class > ul > li*5 into HTML, you get the drift.

Some other good to knows

• To get tabcompletion for projects you can use ctags which vim supports
• Rebind caps-lock to esc, after one day you can't understand how you had the energy to reach all the way to esc.
• Vim has branched undo trees, meaning you can still undo even though you altered your undo tree.Gundo helps you visualize this.
• Vim has persistent undos, meaning it saves your undo history even if you restart your computer, you should definitely enable this.
• In my own vimrc I have a function which checks if I'm working on a Drupal or a Wordpress site, depending on this different code conventions are set. (Guess this could be useful to know, you can find it in my repository linked below.)
• Steve Losh had this awesome config defining a Number Object in vim so you can delete/change/etc only the number in for example 200px by pressing cN

Vimrc repositories worth checking out

• Steve Losh Awesome stuff
• Tim Pope Creator of Fugitive, Surround and tons of other vim plugins
• Oxy My own repository, in the README I have an example for generating ctags for Drupal projects.
• Derek Wyatt His screencasts taught me vim, you can find alot of cool stuff there

Solution 3

you can use this:

bash < <(curl -s https://raw.github.com/wongyouth/vimfiles/master/install.sh)

This is my teacher's configuration, hoping to help you.

A handful of plugins for vim all maintained in one bundle subdirectory, useful vim configuration, espacially for Rails coding. All plugins are included as submodules, so you can get plugins updated in one command that makes life easier.

Details: https://github.com/wongyouth/vimfiles

Comments

[gabriel]

And what exactly we can do with this?Nice but i prefer manual installations because then i know what actually am i installing!

[clark]

You can see the usage and vim plugins included in the submodules in the this link:github.com/wongyouth/vimfiles

[gabriel]

Ok, even if i would like to use some of the plugins and stuff you mentioned above how can i use them?My vimrc folder where is it?thanks

[gabriel]

Ok,as i mentioned before there are no .vim or .vimrc files. I know what the . does but, can you guide me please how exactly do we install a single plugin or change one single setting?Please help!thanks

[gabriel]

@sagarchalise Ok, after we create those files are we able to change the way vim works?

[sagarchalise]

@gabriel basically vimrc should contain what vim should do i.e. syntax-highlighting, tabs/space, line numbers etc. By defaullt vim is just a text editing tool. You make it what you want. Vim is extremely powerful and tweakable. But you need to understand its modes and commands. vim.wikia.com/wiki/Example_vimrc see here for sample vimrc

[hwjp]

ah, I guess it's possible that vim wouldn't create a .vimrc by default, and you'd need to make it yourself... I'll update the answer, and also include something on how to install a basic plugin...

[hwjp]

is that better?

[gabriel]

wonderful help from you, thanks!BUT how can I uninstall a plugin?Am I deleting the files?thanks

[gabriel]

Also, I installed pathogen and my .vim file is not at all organized. Any useful html plugin? Thanks

[hwjp]

Hi Gabriel, Yes, to remove a plugin, just delete its files. If you have any stuff in your .vimrc that uses the plugin, you'll need to remove that too. I don't know anything about pathogen, but don't worry too much about how your .vim folder is organised - as you install each new plugin, it will tell you which folders you need to use... finally, I don't use anything special for html coding, the default vim setup is already pretty good at html - syntax highlighting and indentation are already smart enough... If I were you I'd just start coding!

[hwjp]

I've added some info on ctags, which I think you'll find useful - maybe more useful than installing loads of plugins at this stage...

[gabriel]

Thank you very much!You have helped me a LOT. I have more questions but your answer is guiding me to another using experience of vim!thanks

[hwjp]

:-) enjoy your time with vim!

[Santosh Kumar]

How do I bind Caps Lock to Escape (I'm not using Ubuntu)?

[oxy]

@SantoshKumar I'm using xmodmap -e 'clear Lock' -e 'keycode 0x42 = Escape' and it works in Ubuntu and Arch. Place it in your .xinitrc or .xsession.