WebVim is a Vim based distribution targeting JavaScript and Web development.

It targets :

javascript edition

And contains the features you expect from a modern code editor :

The WebVim idea is to provide you a vim distribution: something that comes prepackaged, preconfigured, built on a kernel to serve a goal. WebVim is to vim what Debian is to Linux, a vim distribution for the web.

Install

Only tested on Linux

Dependencies (the long story)

On Ubuntu (from 15.04)

  1. A modern version of Vim
apt-get install vim vim-runtime vim-gui-common

or compile a recent version with xterm_clipboard and ruby or python support.

  1. Some tools to compile YouCompleteMe
apt-get install build-essential cmake python-dev exuberant-ctags
  1. Node.js and npm
curl -sL https://deb.nodesource.com/setup_0.12 | bash -
apt-get install -y nodejs
  1. Some npm packages
npm install -g eslint csslint jshint jsonlint handlebars

Dependencies (the short story)

Please report me what you did to make it work on your OS

Fedora 23/24

sudo dnf install cmake python-devel npm vim
npm install -g npm eslint csslint jshint jsonlint handlebars

Install it:

git clone https://github.com/krampstudio/webvim.git ~/.vim
ln -s ~/.vim/.vimrc ~/.vimrc
ln -s ~/.vim/.tern-project ~/.tern-project
vim

The plugins install can take some times, especially since there's a compilation made by YouCompleteMe. If you've the feeling the install has frozen, you can finish the install after by entering the command :PlugInstall.

Hardcore mode

The hardcore mode remap some keys to force you use Vim in a productive way:

Restricting commands is the best way to make your fingers learn. After one or two days, you should be more productive and have learned lots of Vim commands.

You can disable the hardcore mode by setting the value of g:hardcoreMode to 0 in .vimrc. You can also change the mappings.

Usage

Vim

WebVim is only a Vim distribution with plugins and configuration, so all common Vim commands and basic mapping are available. You must know how to use Vim before using this IDE. If you're not comfortable with Vim enough I suggest you to take the interactive Vim tutorial (run vimtutor in a terminal), and keep a common usage cheat sheet close to you until your fingers get all the mappings in memory.

WebVim

Command Mode Context
Plugins
Install Plugins :PlugInstall n
Update Plugins :PlugUpdate n
Config
Edit .vimrc <leader>ev n
Reload .vimrc <leader>sv n
File Tree (NERDTree)
Toggle Tree <c-n> n
Open a node in a new tab t Tree Node
Change Root C Tree Node
Tree menu m Tree Node
Add a file a Tree Menu
Delete a file d Tree Menu
Move a file m Tree Menu
Copy a file c Tree Menu
Search in files (grep) g Tree Menu
Next match in grep :cn Grep > Quickfix
Move to left tab <s-left> n
Move to right tab <s-right> n
Change window (ie. tree to tab) <c-w><c-w>
Help ? Tree
Documentation :help NERDTree
Comment
Toggle comments <c-/> nv
Comments <leader>cc nv
Sexy Comments <leader>cs nv
UnComments <leader>cu nv
Yank and Comments <leader>cy nv
Documentation :help NERDCommenter
Align
Start interactive alignment EasyAlign v selection
Align next paragraph on = <leader>a= n
Align next paragraph on : <leader>a: n
Align next paragraph on delimiter x <leader>ax n
Right align selection on = <leader>a= v
Right align selection on : <leader>a: v
Right align selection on x <leader>ax v
Documentation :help :EasyAlign
Format
Format the file <c-f> n js,json,html,css
Format the selection <c-f> n js,json,html,css
Multiple Cursor
Start multiple cursor <c-m> v Visual Block
Multiple cursor insert i multiple cursor
Multiple cursor remove x multiple cursor
Leave multiple cursor <esc> multiple cursor
Paste
cycle backward through your history of yanks <leader>p nv after paste p
cycle forward through your history of yanks <leader>P nv after paste p
AutoCompletion
Select next proposal in menu <tab> i complete menu
Select previous proposal in menu <shift><tab> i complete menu
Syntax checking
Checkers infos :SyntasticInfo n
Check :SyntasticCheck n
Toggle check :SyntasticToggleMode n
Error window :Errors n
Jump next error :lnext n
Jump previous error :lprev n
JavaScript
Get type <leader>gt n under cursor
Get documentation <leader>gd n under cursor
Go to <leader>go n under cursor
Jump to definition <leader>gf n under cursor
Go to references <leader>gr n under cursor
Rename <leader>r n under cursor
Jump to the source of a require gf n node.js, cursor
Edit the main file of a CJS module :Nedit module n node.js
Edit a file of a CJS module :Nedit module/foo.js n node.js
Edit projects main (from package.json) :Nedit n node.js
Git
git diff :Gdiff n
git status :Gstatus n
git commit :Gcommit n
git blame :Gblame n
git mv :Gmove n
git rm :Gremove n
Open the current file in Github :Gbrowse n
Spell Check
Enable checking set spell n
move to the next misspelled word ]s n
move to the previous misspelled word [s n
add a word to the dictionary zg n
undo the addition of a word to the dictionary zug n
view spelling suggestions for a misspelled word z= n
Search
clear highlights <c-l> n
Editing
Move line up <leader>- nv
Move line down <leader>_ nv
Wrap in single quote <leader>' nv
Wrap in double quote <leader>" nv
Emmet
Expand abbreviation kj i html,css,scss
Next sections to come soon

Modes :

Commands :

Plugins

WebVim is only a distribution that contains plugins. The plugin authors have made the hard work.

Plugin authors rocks!

Plugin

User interface

Manage your project

Code writing

Code reading

History

Contributing

Every contribution is more than welcomed. You can:

Support via Gratipay

License

The content of this repository is licensed under the GPLv3