Ubuntu – How to customize Vim for web development and programming

customizationeditorgvimvim

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

my home folder

Best Answer

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:

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/ ;-)